How to Speed Up a Website — Part 1

Business owners strive to present their services and products in the best possible way. They invest a lot of time and money in website content, convenient authorization, and payment systems. However, if a potential customer clicks on a website link and the resource does not start loading within an acceptable 300 milliseconds, the owner risks losing a potential order.

Such losses are caused by a lack of website speed optimization, which could certainly have detected the long page response time in addition to other issues affecting customer response.

We have a lot of experience in the field of web performance optimization, so we would like to share with you our best practices for solving such problems. In this part of the article, we will cover how to test a website on the WordPress platform, give you useful tools and important metrics for website testing. Additionally, we will shed light on site performance optimization.

After reading the first part of this article, we suggest you enjoy the second part, which presents a real case of WordPress website speed optimization.

Why Do Websites Slow Down?

We recommend looking at the charts of the website httparchive.org to familiarize yourself with the growth of web page size. As you can see on the chart, the size of web pages is growing steadily. Both traffic and the complexity of the pages are increasing. As a result, pages are not getting faster even though devices and networks are. They are often overcrowded with non-optimized graphical and textual content. Another problem is errors in the code.

Page size growth during the last 10 years

According to data from httparchive.org

The data from HTTP Archive shows that over the last ten years, the median desktop page weight has increased threefold. In addition, the median mobile page weight has increased ten to eleven times. Mobile pages are now almost as large as the desktop versions. This means that users expect a mobile device with a mobile network to be able to handle the same amount of information as a desktop device. Unfortunately, that is not possible.

If this is your first time thinking about website loading speed and its impact on your business, we recommend you looking at Tammy Everts’s “Time Is Money: The Business Value of Web Performance”. The book does not contain any technical articles but explains the ins and outs of starting a business and the value you will find if you speed up a website. You will be introduced to a number of cases that demonstrate the importance of website performance to a business.

What Is a Fast Website?

Your first question might be, “What is a fast website or app?” The table below shows different levels of response to the system interface.

For example:

If your potential customers have e-commerce projects, they may have multiple tabs open at the same time with different contractors. Customers will just close the page that does not load quickly. They will not even care what offer was on the page. Content is secondary to loading speed. If customers do not see the offer, it simply does not exist for them.

Most sites fall into either the yellow or red categories when running performance testing. Only a handful of sites are in the green.

If you want to test your website and know the load status, we recommend our service PFLB Platform. It provides high quality and fast load testing in just 4 days.

Actual Website Loading Time

Finally, let us talk about how to test websites and what their speed is. Actual speed is a type of website speed. It is the speed that your users actually experience and can be captured by the following tools:

These systems collect metrics from all hits and send them to analytics. Free metrics are simpler than those from specialized systems that provide more detailed data.

If you want to get comfortable with analytics on your projects, be prepared to receive unstructured data. It will be difficult to draw conclusions from the data. Since your website is visited from both desktop and mobile devices, there will be a wide range of values in the data.

Synthetic Testing

In this article, we take a look at synthetic testing, which is testing done on our terms. It consists of the server testing part and complex metrics, which we will discuss in more detail.

We recommend using JMeter, a remarkable load testing tool, to test server performance.

Complex metrics measure how a website behaves in a real browser, which is exactly what a client sees, including network parameters, device type. We suggest you familiarize yourself with WebPageTest and Lighthouse.

Each system has two types of applications:

WebPageTest

The system has the following capabilities:

The system has a distributed architecture. It contains a server that sends responses and issues tasks and agents that execute the tasks.

Most importantly, WebPageTest supports all major browsers: Edge, IE, Firefox, Chrome, and Opera. This is the main advantage of WebPageTest, as your audience most likely uses different browsers.

Moreover, the agents have Windows and Linux versions. They can also connect to iOS and Android devices. Additionally, our team can customize various channel parameters, such as line, delay, and packet loss. You can also collect TCPdump and screenshots of different load levels, from which a video can be created.

WebPageTest architecture

In the WebPageTest architecture, a web server is mostly used by a PHP application.

Windows OS or Linux is an agent, so there is a complete virtual machine. This works in a way that suits us. There are even public cloud images. Mobile applications are connected to agents.

WebPageTest web interface

In the web interface, there are quality grades from A to F and text metrics.

WebPageTest results

An important feature of WebPageTest is the Waterfall loads. They show the loading speed for each page or application. At the top left is the load speed for HTML, then for CSS, Java Script, text, images, etc. After the seventh second, for example, you can see the overall state of the page. At this stage, it is interesting to look at problems that prevented the page from loading faster. This is how the basic website performance optimization happens.

Comparative WebPagetest report

The most important feature of WebPageTest is the screenshots. You can take two tests and compare their progress for each moment. At the bottom of the screenshot, you can see what percentage of the page content has been loaded.

Test result Data Plots

If you are interested in pure analytics, you can take two pre-made tests and compare them. You will see the metric values for each test, the calculated confidence interval and difference in means, and an indication of whether the event was significant. In our example, the event was significant.

WebPageTest can be automated. There is a special application programming interface (API) for this. We recommend using the personal version, as you will have to wait a long time for the public version. For automation, you need to do the following:

To stress test your site, use our website load testing tool, PFLB. It’s easy to use and helps you identify and fix bottlenecks with AI-powered performance insights.

Lighthouse

Lighthouse interface

The service interface is a tab within Chrome DevTools. There are also mobile and desktop versions. We recommend paying attention to the following modes in the interface: Performance and Best Practices.

If you want to start Lighthouse locally, you should push the F12 button in the Chrome browser, then choose Lighthouse in the panel and push the Report button.

In Lighthouse, there are fewer network limitation options than in WebPageTest. In the latter, there are various limitations, from 2G to a wired connection, while in the former, there are only three types of limitations. Also, Lighthouse slows down the downloading processes to imitate a real mobile device.

Lighthouse test results

In the report, you can see quality marks at the top. They are almost the same as the marks on the top right of WebPageTest.

That being said, a checklist in Lighthouse comes with the service. When we use it we get a lot of data. But the real metrics are much more important. Lighthouse also provides screenshots, but they are relatively impractical because they do not show the speed index.

The Lighthouse architecture looks like this: at the bottom, there is a Chrome tab that is connected to the Lighthouse module via the DevTools protocol. The Lighthouse collects the results of three test runs, calculates the metrics from them, and generates the report. The report can be in HTML or other formats.

Lighthouse CLI works in the command line as follows:

Speed metrics

It’s important to know which metrics to pay attention to for each device. It pays to look at multiple metrics rather than picking just one. In particular, we recommend taking a look at the following parameters:

01 Load time

• Load event: When the JavaScript has loaded.
• Full load time: When the entire page has loaded, including the relevant resources.

02 Rendering start time

This is a critically important parameter. A user only pays attention to the moment when the white screen changes to something new while a page is loading. Even if it just changes color, the user sees that the system has reacted and something is happening inside it. That is why some resources use handy spinner icons that rotate while the page loads.

03 Time to first byte (TTFB)

This metric collects all the server performance information. If there are problems on the back end, it’s not as important to run front-end website speed optimization at the beginning. It’s worth paying attention to the server because it will take longer to respond and to fix the issues.

With the growth of website performance optimization, new metrics have evolved.
They aim to find a solution to the problem when a metric is not showing the true picture.

04 Speed index (Lighthouse, WebPageTest)

This is an important parameter that shows not only the page loading speed but also how fast the content of a page is visibly populated.

05 First contentful paint (LH)

Measured by Lighthouse, this marks the time when the first text or image is painted.

06 First meaningful paint (LH)

This is the time when the primary content of a page becomes visible, such as a product description or text in a header.

07 Input latency (LH)

Measured by Lighthouse, this is the time between a click and the response of the interface. It is often very long because CSS selectors perform many calculations.

08 Time to interactive (LH)

This is the time that it takes for the page to become fully interactive. When a user clicks, all the buttons are working.

The speed index metric can be displayed as a graph with time and percentage of visibility as axes.

Speed index chart

The first example is the red test B, which loaded 18% of the content and stayed at that level until the 11th second, when it started loading the rest of the content. This is an example of a page that takes a long time to load but is fully displayed afterward. The second example is the blue test A, where 92% of the content loaded and the rest followed after the 11th second.

Speed index metric

In this case, the pages took the same time to load, but their behavior was completely different. Due to this, a formula that integrates the area above the graph up to 100% is perfect. It is the speed index. The smaller it is, the better.

For our testing service PFLB Platform, we have created many professional metrics that are easy to understand and useful to optimize your website. High quality performance testing is possible in just 4 days following quick and easy steps.

How to speed up front-end loading

We have listed measures and tools we recommend to help speed up the loading of content for users:

01 To configure the server

• Transport Layer Security (ТLS) optimization
• Compression
• HTTP/2
• Client caching
• TCP/IP optimization

02 Optimize text resources (CSS, JS, HTML)

• Minification
• Compression (gzip, zopfli, brotli)
• Connection order (we can modify this to optimize the page rendering)
• Collection

03 Use text instruments

• Zopfli
• Brotli
• Nginx brotli module

04 Optimize images

• Choose suitable formats
• Change image resolution
• Clean the meta-information
• JPEG
• PNG
• GIF
• SVG
• WebP

05 Use tools for images

• MozJPEG
• WebP
• OptiPNG
• ZopfliPNG
• SVGo
• SVGomg
• Squoosh

06 Use web fonts

• Formats (WOFF2)
• Collection (Font Squirrel)
• Preload
• Connection (Font display)

07 Shorten JS blocks

• Asynchronous JS:
• Deferred JS:
• Split a bundle into smaller bundles”

08 Avoid a front-end single point of failure (SPOF)

• Blocking CSS
• Blocking JS

Conclusions

Your website load speed is an important asset for your business. Our experience shows that the ability to maintain smooth website performance determines 80% of acompany’s success. It greatly improves the likelihood of selling a product or service.

Right now, most businesses have websites that are in either the yellow or the red zone when it comes to page load speed. Performance testing and website speed optimization will give your business a huge advantage over the competition. At a time when other businesses are investing a lot of resources in expanding their website content and additional services, you can optimize WordPress performance
in the foreseeable future and become a preferred choice for your customers.

When managing your website front-end on WordPress to optimize speed, we recommend paying attention to the key components covered in this article that affect loading:

• Metrics;
• Testing tools;
• Optimization tools;
• New technologies.

Recently, as most businesses have gone online, companies of all sizes have had to run performance testing of their websites. You can read a real testing case and more tips in our article “How to Speed Up a WordPress Website”. Your website should be available to your customers at all times, especially when there are sales and discounts, and provide maximum suitable loading speed.