Website performance is important not only as one of the factors impacting your website ranking on Google, but also as it affects the user experience. In this article, we answer a question: why is theme optimization important?
For starters, website speed is one of the ranking factors, with growing importance, while user experience is key to keeping your audience engaged. A fast website provides a better user experience than a slow one, as research shows that people do not read or engage as much on slower sites. That alone should be enough reason to optimize your website.
When optimizing your website performance, there are several aspects to take into consideration:
- Website design, structure, and layout.
- Properly structured data.
- Website page speed performance.
Website design, structure, and layout
Clear and consistent navigation
While it is not as important regarding ranking, clear and consistent navigation in B2B website design is crucial to users finding things easily and getting to know your site structure. For example, too many options in the menu dropdown can become overwhelming the same way as too many fields in the forms. The fewer options the user must skim through the more likely they are to engage with your B2B website.
Rather than listing all the options, reduce the website menu items to the essentials. Secondary items can go into the website content and be laid out in a more engaging and visually appealing way, like cards that may contain descriptions, icons, etc.(see the example below from the Pyramid Analytics website).
Content Structure and Markup
A website’s visual hierarchy establishes order and importance within the content, which is why it is up to the developer to translate that order into the back-end code. Divide content into sections and place appropriate headings to mark the new sections and the importance of the section. Separating content into different sections with a well-laid-out content structure allows the reader to easily find what they are looking for and navigate to the relevant content. The same goes for the search engines, as they have an easier time processing the content, which improves crawl efficiency.
One way to keep your website optimized is having proper content structure and using the correct HTML markup. With the right CSS, you can use any elements to wrap around the different sections and get it looking how you want. However, we need to respect semantics and use the right element for the right job, i.e., using CSS we can make any <span> or <div> element look like a top-level heading, but it will not get any benefits, as it has no semantic value. It is best to use the relevant HTML element for the job – <h1>.
Without proper content structure, the browser does not know what the heading or the paragraph is, which can cause unintended consequences:
- When looking at the webpage users tend to scan content quickly, often reading just the headlines. If they cannot find anything useful, they are more likely to abandon the page.
- Search engines indexing your page consider the headings as important keywords for influencing the page’s search rankings. Without headings, your page will perform poorly in terms of SEO (Search Engine Optimization).
- To style content with CSS, or make it do interesting things with JavaScript, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.
Therefore, we need to give our content structural markup.
To implement semantic markup, HTML provides dedicated tags to represent sections, such as:
- header: <header>.
- navigation bar: <nav>.
- main content: <main>, with various content subsections represented by <article>, <section>, and <div> elements.
- sidebar: <aside>; often placed inside <main>.
- footer: <footer>.
It is up to you what elements are used to represent content, as long as the hierarchy makes sense.
Keep in mind a few of the best practices as you create content structure:
- Preferably, you should use only one <h1> per page – this is a top-level heading, and all others sit below it.
- Make sure to use the correct order of the headings in the hierarchy. Do not use <h3> followed by <h2>, as that does not make sense and can lead to unexpected and weird results.
- Aim to use no more than 3 levels per page unless it is necessary. Documents with many levels are difficult to navigate. If possible, spread the content over multiple pages.
Read more: Key metrics to track for B2B marketing.
Structured Data
Structured data is a complex and extensive topic. We have authored an article to get you up to speed, but here are some of the key points:
- Structured data is code written in a specific standardized format using a vocabulary called Schema.org.
- Adding structured data to your B2B website makes your site clearer and easier for search engines to read and increases the chances of your website being presented in the best way.
- Structured data can give you rich results and help you stand out in a crowd.
- Content quality still matters and must match the structured data.
Website page speed performance
There are many moving parts in this topic, and each B2B website requires a different approach, as each website is unique and uses different tools, like plugins and third-party services.
How to measure site speed and the best measurement tools
Let me begin with the fact that there is no single metric for page speed. When you look at the way a page is loaded, there are distinct stages and many various parts which can be measured. And each of these is affected by numerous factors: network, server, page structure and functionality, browser, etc.
When it comes to the network, there is little you can do to impact it. Your server hardware is connected to the internet via fiber cables that move data through, which is limited to the speed of light and traffic.
One of the things that you can track and measure is the server performance with tools like NewRelic or DataDog, which monitor your site from the ‘inside’. While these are paid services, there are alternatives, like the Query Monitor plugin, which can show you what is slowing down your website – be it your theme, plugins, or environments.
To measure your B2B website performance on the end user’s browser, you need to look at how your website is constructed from different pieces, laid out, drawn, and displayed. How quickly things load is affected by the way images are loaded, how many CSS and JavaScript files are downloaded and processed, as well as by every HTML element on your website.
We recommend using multiple tools to test your website from the outside in, which scan and measure how it loads:
- WebPageTest, Pingdom Website Speedtest Tools, GTmetrix
- Google PageSpeed Insights
- Firefox or Chrome Developer Console
- Lighthouse for Chrome
Using these tools, you can spot things like images that need to be optimized, which CSS or JavaScript is slow and/or oversized, or tracking 3rd party assets which could be loaded selectively on where they are used only.
There are a few metrics that make sense for all B2B websites to measure, including:
- Time to First Byte, identifies the time at which your server responds with some information. Measure with Query Monitor or NewRelic.
- First Contentful (“meaningful”) Paint, marks the time at which the first text or image is painted. Measure with Lighthouse for Chrome.
- Time to Interactive is the amount of time it takes for the page to become fully interactive. Measure with Lighthouse for Chrome.
These metrics have a user-centric focus and correlate directly with user satisfaction, which is great for SEO.
Read more: How to keep your B2B website from crashing.
How to improve site speed and tools
Before going forward with any changes to your production website, make sure to test them out in a safe environment. Also, ensure you have access to your server via (S)FTP, in case any of the plugins or changes break the site and you are no longer able to login to the WordPress admin area.
1. Keep your website up to date
One of the things to keep an eye out for is making sure your website is up to date – WordPress, plugins, and the theme. In most cases, this ensures that all parts contain performance enhancements and/or security fixes, among other improvements.
2. Remove any unwanted or unused plugins
Conduct plugin audits on a regular basis, as it is common to install many plugins over the course of your website usage. Review your B2B website’s plugin usage and remove the ones that are not needed or used anymore.
3. Optimize images
Images have a high impact on your website as they affect your overall total page size. Image optimization helps to efficiently encode and minimize images. There are many plugin options for WordPress image optimization, here are some of them:
4. Cache Your WordPress Installation
With caching, your website serves already generated data (i.e., cached content) to visitors, instead of dynamically generating data for every visit. There are many caching plugins available for WordPress; consult your website hosting provider to make sure that it does not conflict with their page cache if applicable.
5. Optimize your assets and loading
One of the plugins available to WordPress users is called Autoptimize, which can aggregate, minify, and cache styles and scripts, minify HTML, inline critical CSS, lazy-load images, and much more. One of the great advantages of this plugin is that you do not need to have any coding knowledge and improvements can be made right away from the plugin dashboard. Make sure to thoroughly test the website after tweaking any of the settings.
6. Consider Using a Content Delivery Network (CDN)
Content Delivery Networks (CDN) can help your website load faster globally by storing and serving your static resources through server nodes all around the world. While CDNs are an appropriate solution for most websites looking for speed improvements, not every site necessarily needs one.
Important Notes
The steps mentioned above are meant to be a general guide on optimizing your WordPress site. However, they do come with a few caveats and things to be concerned about:
- Test After Minifiying and/or Combining Scripts
- Clear Your Page Cache After Making Site Changes
Summary
Every millisecond can make a difference between the user staying or leaving your B2B website. We recommend reviewing the plugins and theme regularly. The above optimizations are a good overall fit for most websites, both in terms of compatibility and improving site performance.
