The number of tools to test WordPress page speed and measures to maintain a good page speed are so many. However, do you know how those optimizations function, or whether they will make your site faster?

One of the most complex topics in regards to website management is page speed. In fact, most articles that talk about this topic offer you with a list of actions that you need to take. If not, they provide a list of plugins you can install to assist with various features of WordPress Page speed.

Although all that is good, all websites are different. For this reason, we compiled this guide to assist you understand how the WordPress page speed works, and the actions to take on your website to improve its page speed.

What is WordPress Page Speed?

WordPress Page speed is the total amount of time that a web page takes to load. You cannot give one number to page speed. Reason, most metrics capture elements of the page load in various ways, and for various test conditions.

Why Should You be Cautious about WordPress Page Speed?

Recently, Google renewed their concentration on page speed. They made mobile speed a ranking factor. Indeed, a speed report in Google Chrome and Search Console announced that they might flag slow websites. Nevertheless, since 2010, page speed is a ranking factor for Google.

Here are reasons why you need to care about page speed:

• Affects analytics: the analytic tag of faster website loads quickly, making that website record more visitors. However, the analytics system does not record any visitor who leaves before the tag starts.
• Influences the user experience: if your website has a faster page speed, your visitors enjoy a quick and smooth user experience. You can notice any delay on their actions.
• SEO: according to Google, the WordPress page speed update has an impact on slower websites.

Furthermore, most studies shows that increasing WordPress page speed leads to many benefits. For example, more visitors, high click to visit ratio on ads, an increased organic traffic, and others. Even so, most of these studies might be somehow misleading. According to Google, enhancing WordPress page speed does not affect your rankings, unless your website was extremely slow.

So, why might you see an increase in visitors? The answer is simple. The analytics tag may have launched quickly, and it recorded most people before they left your page.

How Fast Should Your Page Load?

We do not have an official threshold for page load. However, the suggestion of most experts is that your website should take than three seconds to load. According to a Google study, if a page loads for more than three seconds, around 53% of mobile visitors leave that page.

Since Google does not have a specific metric for page speed, the suggestions of its representatives are general. For example, make your website as fast as possible, and make your site faster for users.

How is a Page Built?

You should know how a browser build a page to understand how to enhance your page speed. To explain this, we shall look at waterfall charts to have a view of the loading resources. Besides that, you can look the waterfall in your browser. To do so, right-click>>Inspect> Network tab as you load a page.

Starting Connections

The representation of the time taken to start a connection to a website is through colors. These includes purple, green, and orange, each representing something.

• SSL (Purple)
• Connect(Orange)
• DNS(Green)

NB: Device, Network, and Location are Essential in page speed.

Download and Processing of the HTML

The first thing for a browser to download is the HTML code of any page. Whenever you right-click on a site and visit “View Page Source, “you will see this information. After a connection establishes, and the browser receives the first bit of information from the server, we attain the Time to First Byte (TTFB). The standard measure for the start response time. In short, the duration the HTML takes to start downloading. Time from the initial HTML request to start download.

In case the TTFB delays, this may be because of things that are vital in building powerful content. For example, waiting an SSR to complete, server resources, database queries, and others. Nevertheless, the download time depends on things such as file size and connection.

At this point, the browser starts building a page. After downloading the HTML, the browser computes it into the DOM (Document Object Model). It is how a computer interprets the structure of content.

If the CPU is processing the HTML to create the DOM, then a gap exists from HTML to the other request. However, you can if the gap is there using a powerful device, as the CPU depends on the device used.

You can reduce the time for some file types like JavaScript, CSS, and HTML through use of less code. A minification process whose aim is to delete unimportant characters. For example, white space caused by the code, and comments. Likewise, to minimize the file sizes through compression. The aim is ensuring the files download is smaller for faster loading. In most cases, the server or the CDN handles the compression and minification.

Handling of Extra Connections

After the HTML download, there is processing of other files and servers for references. As a result, there is start of new connections. At this point, other files like Fonts, Images, CSS, and JavaScript become part of the mix. Here, things might get crazy because some files reference other files, leading to file downloads and chaining connections.

Make Requests Using the Same Server

Hosting resources on domains without cookies, which were different from the main domain, was the best practice. Sometimes, you would enjoy the benefit of using many domains due to connection request limits that the browser set.

However, this practice ceased to be the best when HTTP was established. For this reason, you should make requests using the same server where possible.

Self-hosting multiple files such as fonts may result to benefits, but there might be disadvantages such as caching. Browsers might cache similar resources.

Use DNS-Prefetch or Preconnect When Using another Server

When using a different server, ensure your pre-connect to servers that has files you require first in the page load. This makes the connection to the other server faster than normal.

For example. <link rel= “preconnect” href= https://site.com>If you want to deal with the connection early enough, you can use DNS prefetch. In such a case, the DNS connection will happen before the other connections. Although the DNS prefetch offers better support than preconnect, their usage statistics is almost the same.

In fact, preconnect is better is you understand something from the server that require early loading for the page to work. Even so, the security and routing of preconnect needs more work, which means more resource use at the early stage.

For example, <link rel= “dns-prefetch” href=”//asset1.com”>

How Browsers Render a Page?

Apart from HTML, other files that come in include Fonts, Images, JavaScript, and CSS that the browser must change into something important. A powerful process that involves constant parsing, downloading, introducing, and re-arranging of new files to create a page. The common name for the process is Critical Rendering Path. It involves:

1. Processing of HTML into the DOM tree.
2. The parsing of CSS into the CSS Object Model (CSSOM) that informs the browser on the size, color, padding, style, and others about everything.
3. The DOM and CSSOM build a Render Tree.
4. Layout occurs. It involves processing where every element will appear in the browser viewport depending on the Render Tree.
5. Painting of pixels on the screen, to ensure you see images, text, shapes, and colors instead of white screen.

Filetype: CSS

In most cases, the WordPress page speed appears complicated because there is no specific ideal way of doing things. Actually, many methods have disadvantages, while some are difficult to actualize and maintain. You need to decide what is best, faster, and easier for you based on your needs.

By default, the CSS files render blocking. This means the CSS files require downloading and processing prior to a page showing its content. In addition, caching the file enables you to re-use it for other page loads. This means faster views because it does not require another download.

Many speed tools use the first view to test page speed. Thus, whatever you see in tools such as PageSpeed Insights represents a first time user who viewed one page. Rather than someone who comes to your site often or visits many pages. However, you should aim to optimize both subsequent and first time views.

Loading CSS Asynchronously

Apart from ensuring essential code load as fast as possible, you also want to ensure the CSS does not block the render. To do so, we need to load the stylesheets required like a different media type for use in all types. This involves tricking the browser by interfering on how they deal with loading of particular link element attributes. In turn, the browser loads the CSS without blocking the render, and then use it to all media types.

For example, <link rel= “stylesheet” href= “/my.css”> Changes to: <link rel= “stylesheet” href= “/my.css” media= “print” onload= “this. Media= ‘all’ “>

All your CSS references can use the above code. The only disadvantage is that users can encounter re-styling because there is painting of some page elements before using the CSS. Once you apply the CSS, the screen might change how and where it displays things.

Inline

The inline takes code required to render the content above the fold, and then gives it with the HTML response rather than a separate file. As a result, this quick method shortens the time taken to render the first view.

For easier understanding, it is like taking the vital parts of the CSS and JS files, and then put it direct in the HTML. While downloading and parsing of the start HTML takes longer, the page rendering occurs before downloading of all other files.

Inlining might give you the quickest render on the start page load, although the disadvantage with it is caching. You can combine both caching and inlining, to make the other CSS asynchronous. A better state.

It is possible to inline all images, fonts, JS, and CSS, giving you a huge HTML download with many unused code. However, this makes your site slower. The smaller files are ideal to inline.

Preload

Using preload is the best alternative if you are not ready to inline the important CSS. Preload get requests earlier in the load, thus receiving vital resources required to show the page faster than normal. The preload sets high browser preference for preloaded assets, and then loads them asynchronously to avoid block rendering. Further, it works across domains.

In turn, the browser gives every file request a preference. The objective is getting files required to show above the fold content first, and suspend those required later in the procedure. To see the preference files, go to Chrome Dev Tools>>Network>> Right-click on the bar>> Choose Priority>>Add it like a column.

In turn, the browser gives every file request a preference. The objective is getting files required to show above the fold content first, and suspend those required later in the procedure. To see the preference files, go to Chrome Dev Tools>>Network>> Right-click on the bar>> Choose Priority>>Add it like a column.

Selecting the Files to Preload

Normally, the primary theme file has many of the CSS for the site. Often, the developers name it after the theme, the website, or sometimes “styles”. If you cannot identify this file or want to preload even other files, the best solution is to use the request-blocking feature in Chrome Dev Tools.

To do so, open the Network tab, and then load any page to look at the requested files. To add any file on the block list, right click on them and then go to block request URL. After that, reload the page to check if it was blocked. If the page stills appears normal, then you did not block the file required for above the fold content.

If you come across a file that breaks the appearance of a page, it means the file is essential to render content above the fold. You need to preload the file.

Tools to Measure Page Speed

Google Tools

• PageSpeed Insights- it runs lighthouse and offer suggestions. Many things affect the running of lighthouse in your browser. For example, your browser extensions, network, and computer. Furthermore, the PageSpeed Insights provides a fair stable test environment, which does not utilize your server resources.
• Chrome Dev Tools- offers many important features to show how and what a page loads, such as Performance and Network tabs.
• TestMySite- it has a speed scorecard that you can use to test your speed and that of your competitors. In addition, it features and influence calculator to enable you estimate the effect speed has on your business. It allows you to make a report with these and suggestions on things you need to focus on for better page speed.
• Lighthouse- it is in Chrome Dev Tools, and enables you to test the performance of apps and pages.
• Web.dev-a Google testing tool that Lighthouse supports. Besides that, it features an area for learning more on page speed.

Apart from the above tools, there exist other popular speed tools. For example, Pingdom, WebPageTest, SpeedMonitor.io, Sitespeed.io, and others.

How to Estimate Effect of Changes?

The best solution to estimate effect is making a static copy of a page. After that, copy that code to your server. Now, test the page to have a baseline metric. Implement changes on that page and then run the test again. As a result, you will get the approximate effect of the changes. Therefore, as you implement changes on your live website, you are sure of the approximate effect.

Helpbot is a WordPress support agency which provides proactive WordPress website maintenance and professional WordPress support services to website owners belonging to different business niche. Get 24×7 WordPress support for fixing common WordPress errors.

Conclusion

Ensure your website is as fast as possible for better user experience. Select representative metrics of how a user encounters the interactivity and load of a page, and enhance them. Because there is no a specific threshold on where to stop improving WordPress page speed, try to make your site faster than of your competitors.

If you have any question, suggestion, or comment on how to improve page speed, use our comments section below.