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?

Web page growth

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

MEDIAN DESKTOP

2038.4 KB
Created by potrace 1.15, written by Peter Selinger 2001-2017

335.8%

MEDIAN MOBILE

1879.1 KB
Created by potrace 1.15, written by Peter Selinger 2001-2017

1197.7%

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.

Response delay,
milliseconds
User perception
0-100
Instant response
100-300
A small but noticeable delay
300-1000
The system works, but it is overloaded
1000-10000
Likely switching thoughts to other tasks
10000 and more
The task is cancelled (the system does not work)
For example:
  • If your system responds in a time window of up to 100 milliseconds, a user will not notice a delay.
  • Users start noticing delays at up to 300 milliseconds. When this limit is exceeded, they may become distracted and switch to another task.
  • If the delay exceeds 10 seconds, a user may discard the task, forget about it, or do something else. This means that he or she will close the website tab.

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 Boomq.io 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:

  • Web analytics systems, like Google Analytics or Yandex Metric:
  • Standard metrics;
  • Custom metrics.
  • Specialized systems, such as Akamai mPulse.

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.

  • WebPageTest is an old system that became open source in 2008. It is now actively maintained and developed. The system is very big and contains many features.
  • Lighthouse is not a separate system but a subsystem of the Chrome browser that executes performance testing in the browser. That is, it loads and collects metrics and then generates reports. The system is much newer than WebPageTest; it was created only a few years ago and is being actively developed. Both systems work with the Chrome browser.
Each system has two types of applications:
  • WebPageTest
  • Public: This is suitable for those who want to learn about the product and try it out.
  • Personal: You install the system on your device.
  • Lighthouse
  • Public: Chrome DevTools plug-in.
  • Personal CLI: You use the command-line interface that performs tasks automatically.

WebPageTest

The system has the following capabilities:
  • Distributed architecture
  • Servers;
  • Agents.
  • OS support for agents: Windows, Linux, iOS, and Android
  • Ability to test on real devices
  • Channel shaping (line, delays, losses)
  • TCPdump, a UNIX utility, collections
  • Screenshot collection (video)

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

The diagram showing the 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

A screenshot of the WebPageTest web interface

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

WebPageTest results

A screenshot showing the 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

A screenshot of the 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

A report showing the results of a WebPageTest

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:

  • Start the server and at least one agent.
  • Send requests via REST API.
  • Get the results in JSON, XML, or CSV or return to the web interface and retrieve the reports.
  • Integrate WebPageTest with the process of Continuous Integration (CI).
For more information about your website you can use our testing service Boomq.io. You will get high quality and fast performance testing in just 4 days. We have created quick and easy steps to get comprehensive analytics with key load metrics.

Lighthouse

Lighthouse interface

A screenshot of the 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.

Local start of Lighthouse in the Chrome browser

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

Results of the load test by Lighthouse

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.

  • Performance is the marker of the overall metrics used in the report.
  • Best Practices reflect how well we used site performance optimization.

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.

A screenshot of the Lighthouse architecture

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:
  • Install CLI via npm install.
  • Run (example.com).
  • You will get a JSON and HTML report.
  • The service can also be integrated into various automation systems.

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.

01

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.

02

First contentful paint (LH)

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

03

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.

04

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.

05

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

Results of the speed index metric

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

Results of the speed index metric
Results of the speed index metric
Results of the 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 Boomq.io, 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/span>
  • ZopfliPNG
  • SVGo
  • SVGomg
  • Squoosh

06

Use web fonts

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

07

Shorten JS blocks

  • Asynchronous JS: <script src=“1.js” async></script>
  • Deferred JS: <script src=“1.js” defer></script>
  • 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.

Would you like to test your website?

Use our service Boomq.io for high quality and fast load tests in only 4 days

Latest posts from us

Performance Lab Receives Top Industry Award from Clutch
Performance Lab Receives Top Industry Award from Clutch
Speed up a WordPress Website
How to Speed Up a WordPress Website – Part 2
How to speed up a website preview
How to Speed Up a Website — Part 1
An Interview with Bank du Caire
Digital Transformation and Testing Features in the Financial Field in EMEA (Interview with Bank du Caire)
How to speed up jmeter part 2 preview
How to speed up JMeter. Part 2