Marketers spend a huge amount of time generating traffic to their sites by opening up new channels of customer reach in order to attract as many people as possible to the site. However, they forget that most potential customers will leave the page if it doesn’t load fast enough.
How to speed up the site and attract more customers?
We live in the era of mobile devices, most of us search for information and consume content on our smartphones. As a website owner, you must ensure that it is quickly accessible to each of your potential customers or readers. Even if he is using an older (i.e. slower) phone model and using a slower network.
What affects page loading speed?
Let’s start with the basics: for a website to appear on your screen, two things have to happen.
First, the server hosting the site must prepare the HTML code and other necessary files and then send them to your browser.
Secondly, your browser (like Chrome) needs to get this data and then replace the code and files to make the page look the way it should.
What is happening on the server?
The task of the server is to store and transmit files and page code to the requested browsers. This happens as soon as you enter a website address into your browser or click on a link.
The time during which the browser receives the code from the server depends on its configuration and the quality of the code itself. Shared hosting (which is where most websites are hosted) doesn’t have many options related to setting them up. It is the administrators who ensure its correct and fast operation, and usually such servers work quickly.
However, as a site owner, you have an impact on the quality of the code. Most websites are based on CMS systems that allow you to edit content. The most numerous representative of these systems, of course, is WordPress, written in PHP. Somehow your WordPress code (actually the plugins and themes you use) has the biggest impact on server response speed.
Simply put, the job of the server is to generate HTML code based on the instructions contained in PHP. At the moment, the server processes the data containing the content on the site and all the functions responsible for creating simple HTML that the browser understands.
The more complex the PHP code, the longer it will take for the server to process it. This includes so installing multiple plugins in WordPress can cause your site to slow down. This is because each plugin adds new lines of code to process.
Most site owners don’t care what the server side code does, and optimizing this issue can reduce the time it takes for the browser to fetch data from the server. Read on to find out what you can do about it.
What happens on the browser side?
When the server finishes processing, the generated HTML code is sent to the user’s browser. Now its task is to display the page based on the data received from the server.
Apart from the HTML code, the browser needs two other types of data/files. They will
- CSS (Cascading Style Sheets) – they are responsible for the appearance of the page. CSS contains instructions on the appearance of a given element, such as shape, color, font size, etc.
The browser receives three types of source code that needs to be converted into the look and feel of the website (HTML, CSS, JS). Only when this is done will the page load in the browser. However, there is an important difference between what happens on the server. The browser interprets the code sequentially, which means that the code may be partially downloaded.
When it comes to page speed on the browser side, your goal is to deliver the most important part of the page to the user as soon as possible, the rest of the elements can be downloaded later. The most important thing is that the user does not wait for the first content by looking at a white tab or loading bar.
Does page speed really affect Google rankings?
It’s an indirect process, but yes. The speed of your site affects the overall ranking of the site, which leads to better visibility. Why not directly? The simple fact that a page loads quickly or slowly does not affect the position, however, page speed affects user behavior, which can already affect the algorithms.
Let’s say you have an article or product that ranks #1 for important queries. Suddenly your site slows down due to an implementation error. Users who discover it must wait more than 10 seconds for the page to load to see the details at all.
What will most of them do? It will return to the search results and click on the second, third, or next item. With the appropriate scale of such a phenomenon, Google will notice that your site is not suitable for people who are looking for this product, and may (because it is not necessary) reduce the position of your site.
Why is it worth investing in speeding up your website?
A fast site has many more advantages. Below are some of the most important:
Your customers are not nervous
Do you know that feeling when you visit a website and it takes a long time to load? Want to buy this product, but your shopping cart freezes or the page is not suitable for you due to slow loading?
This site action is very annoying and can upset anyone. It is worth taking care of the speed of the site so that your customers enjoy using your site or store. Associate a visit to your site with something pleasant, no one will return to a stress-related store.
You reduce your bounce rate
The bounce rate shows how many users leave your site without any interaction. The higher the ratio, the more traffic ends up without interaction. Now let’s look at the data provided by Google:
See how the risk of rollback (page exits without interaction) is distributed depending on the page load speed:
- 1s – 3s – bounce chance increases by 32%,
- 1s – 5s – bounce chance increases by 90%,
- 1s – 6s – bounce chance increases by 106%,
- 1s – 10s – bounce chance increases by 123%,
The numbers speak for themselves, the slower the site, the more people will leave it. What does it mean? Unfortunately, the loss of a potential buyer or reader.
You increase conversion / sales speed
The faster the site, the more satisfied users who are more likely to buy or fill out contact forms. In other words, your website speed translates into money.
Abroad, this fact is obvious. See how fast the Amazon site is, which is considered the fastest site in e-commerce.
How to check speed: services and their capabilities
The time for which the site is loaded is determined by different parameters. The first visit launches a whole range of operations: a DNS query for the site name, communication with the server, establishing a secure connection, downloading HTML code, processing the received document, and rendering the page by the browser. Re-visiting the site is faster. Previously received data is stored in the cache, i.e. the browser does not need to reload it. Therefore, it is impractical to visually check the speed of the site. It is almost impossible to get an accurate result. What services to use to check the site for speed?
Google PageSpeed Insights
One of the most used tools. The service allows you to determine the time of different stages of loading a particular page.
The main features of the tool:
demonstrates an assessment of speed on a hundred-point scale. The minimum indicator of a good load is 90%;
generates a report that shows the speed of loading content, displays the time between request and response of the page;
has a “Download Simulation” section. It checks the display speed under 3G connection;
provides recommendations for optimizing pages, indicating time that can be reduced.
Why is this tool one of the best? The search engine determines the position of a web resource in the search results. And you should listen to her recommendations if you plan to carry out search engine optimization and bring your site to the top.
A tool that gives detailed information on site loading. Analyzes by more than 70 factors. And page load speed is one of them. A feature of the service is the function of selecting the region in which it is planned to further promote the site on the Internet. The tool specifies the location of the server performing the check.
The report provides detailed information on each of the requests to the servers, the results of the analysis of the quality of work, performance, interaction with visitors. Using the tool allows you to determine what exactly slows down the display of data.
Web Page Performance Test
A functional service that allows you to select a region, browser and device to simulate an exact request and measure speed. It provides a report for two accesses to a web resource, shows detailed statistics for each. With the help of the test, you can detect errors in caching, collect data on each download. Users are provided with information about different types of content that affect the display of pages and require more time. Screenshots of the site are shown at each stage of loading. Of the benefits – the ability to test several sites at once. The downside is poor usability.
One of the most demanding services that checks and indicates the download speed depending on the number of users. The tool determines the maximum load. The service simulates dozens of requests and hundreds of active connections. Site speed assessment takes several minutes. The tool allows you to analyze during peak hours, test the operation of a web resource depending on the number of users.
This service compares the download speed of two sites. It clearly shows which web resource displays data faster and by how much. After verification, information is provided for each site. Testing is fast. The tool shows download data in a short time. Of the shortcomings, it does not give recommendations for optimizing the site.
A useful, understandable and convenient service that provides a complete picture of the performance of a web resource. Displays detailed information and stores the history of checks, which allows you to compare the dynamics of changes.
The main advantages of the GTmetrix tool:
- provides the ability to select a geographic location;
- shoots a video of the download process;
- includes Google PageSpeed Insights and YSlow analysis;
- shows recommendations on how to speed up the download process.
The free version has limited features. For a comprehensive, detailed check of the site speed, it is better to buy a tool with a large set of options. The disadvantage of the service is the English language, but at the same time it is simple and understandable to manage.
Performs speed checks by simulating requests from different countries (USA, Europe, Asia). After the test, the tool provides information on each download. In the report, users can see the following information: site volume, request source, amount of time required to connect and download.
Russian-language tool that uses more than 30 servers for analysis. It shows the results for each test, highlighting the best and worst performance. The report provides information about geolocation, web resource size, data display speed. This tool has only one function – verification. He does not give recommendations on how to optimize the site and improve the speed of the site.
A Russian-language service for analyzing a web resource with a free speed measurement function, the ability to analyze indexing parameters, check the site for viruses and search engine sanctions. You can study attendance statistics, social activity, mobile suitability and site usability.
The full version has a benchmarking feature (with 60 addresses). The service also checks internal pages. In the settings, you can set the analysis parameters: for desktop or mobile versions. After testing, the tool provides a number of recommendations on how to improve page loading speed.
The easy to use service provides a report on page load, scripts, images and styles. Information is presented as detailed as possible, verification takes a small amount of time. But this tool does not provide recommendations on how to optimize pages and improve the speed of displaying data on pages.
Using the presented services will allow you to determine how quickly the site loads on different devices, browsers and countries. Checking a web resource, following the presented recommendations for eliminating errors contribute to effective optimization for search engines and the formation of loyalty on the part of potential customers.
How to speed up the loading of the site: effective tricks
A website can be accelerated in two ways. On the server side, you can optimize the time the server sends data with page content. Several basic parameters can improve the TTFB (time to first byte) parameter. This is the setting that determines when the server starts sending swap files.
The second area is the browser, this is where you can do the most. Everything related to the page rendering process (transforming the code to the right page) will be optimized for speed.
What can be accelerated on the server side?
There is little you can do when it comes to server configuration, the hosts take care of it. The only thing you may notice is the PHP version. Make sure it’s higher than 7.1.
Using lower versions will result in much slower PHP code execution – the server will cause a delay. Therefore, if you influence the choice of hosting, choose the one with a PHP version higher than 7.1.
Apart from the PHP server version, there are a few more things you can do:
Use lossless compression
Lossless compression is a way of “packaging” data for the duration of the transfer between the server and the browser. The most popular tools that handle this are the Apache modules (server software): GZIP and deflate.
The principle of their action is simple. The server compresses the data during transmission. The browser received them – unpacks them. Data compression can even reach 75% of their volume, which significantly saves transfer – your website files will get into the potential client’s browser faster.
Optimize your PHP code
Code optimization is a task for advanced owners with their own implementations. It is impossible to optimize the code of plugins or WordPress templates – it is the work of their creators.
However, if you have your own WordPress template or have created a site using a different technology, you can optimize the code to make the server run more efficiently.
Optimization consists in rewriting the code taking into account the server response time. During the optimization process, you can limit the number of database queries or remove large cycles.
Most likely, server-side code optimization will be the last thing you decide to do. This is a difficult question and not always necessary or even possible.
Use server side cache
Server-side cache is a quick way to solve all code quantity and quality problems. The operation of the caching mechanism is simple. Do you remember what happens when a user visits the site?
The server performs all the functions and retrieves data from the database to generate HTML code that the browser understands. This usually happens every time someone visits your site. If your site is visited by 100 people per minute, the server will perform all the functions again every time.
The situation changes after the cache is started. Now, when 100 people visit your site in one minute, the server only runs all functions once (in first person). While the first person is viewing the page, the server saves the content of the generated HTML to its cache.
To show this page to the other 99 people, the server no longer performs all the necessary functions. It just takes the content of a static HTML file and makes it available to everyone.
This solution significantly reduces server resources and reduces server response time. This has one drawback: each subsequent person will see the same content on the page as the person who was responsible for creating the HTML code. Therefore, this will not work if the site is very dynamic and each user needs to see different content.
What can be accelerated in the browser?
Contrary to appearances, there is relatively little going on on the server side. When it comes to page speed, there’s a lot more to the browser itself. As the site owner, you have a huge say in this. Here is what you can do first:
Enable browser side caching
Do you remember the caching mechanism on the server side? Each browser has a very similar feature. It consists in saving the necessary files on the user’s disk and downloading them after re-entering the site.
When you visit a site for the first time, each CSS, JS or graphic file is downloaded from the server. However, as you navigate through different subpages, the browser does not request each file again. Those that were available on another subpage are stored on your hard drive, only new elements that were not previously used are loaded.
Loading a file from the user’s disk when using the page is much faster than downloading them every time from the server. The page loads much faster and the server glows. Therefore, I especially recommend using the cache on the browser side.
How to enable caching on the browser side?
To do this, you need to edit the .htaccess file on the server again. This file contains instructions not only for the server itself, but also for browsers that download data from this server. Add the following code to the end of the file:
The above code causes files with the given extensions to contain information about whether the browser can save them to disk. The max-age parameter is the amount of time the browser can hold the file, value in seconds. In this case, 31,536,000 is exactly one year.
Optimize your graphics
Graphics are one of the main loading factors. This is due to their size, unlike text files, graphic files can even take up a lot of space. It is worth taking the time to research the topic and optimize the graphics in terms of page loading speed.
First, the size of the graphics
Not many site owners pay attention to the size and resolution of the inserted photos. The developers also don’t make any effort to, for example, prohibit adding photos directly from the camera – a photo with a resolution of 4000 pixels and more than 20 mb is not needed on your site!
The average laptop screen is approximately 1300-1400 pixels wide. Typically pages should be 1200 or 1440 pixels wide. Why are the files larger? Even if you use 1080 (wide) resolution, such a photo will look very good on the site, there is no point in adding a larger graphic.
A 20 MB photo can be reduced to 0.5 MB without losing quality. Everyone wins, user, server and translation. Think about how your site can speed up if you now have more than a dozen of these photos. There are pages even tens of megabytes in size, just limiting the size of photos can reduce their size to several megabytes.
Secondly, the correct use of graphics
It happens that one image appears in several places on the page. Sometimes it will be a large banner, and sometimes it will be a small miniature. Each of these applications must have a dedicated graphic.
Downloading a high resolution file to create a small thumbnail is a waste of resources. First the browser has to download a large file and then scale it – this also takes time and CPU resources.
Instead of using one drawing, it is better to prepare several depending on the destination or where they will be located. Luckily, most CMS do this for you, just keep this feature in mind.
Third, the appropriate graphic format
There are many graphic formats, the most popular of which are JPG, PNG and SVG. Each of them is suitable for slightly different graphic elements.
JPG is optimized for photos. JPG files are lossy bitmap files, which means they lose a small amount of information each time a JPG file is saved. JPG files work with color compression, so they are great for photos. Reducing the file size reduces the quality of the image.
PNG was designed for use on the web and is the most widely used image compression format on the web. The PNG format is a raster graphic and was introduced as an enhancement to the GIF format. PNG files work well with graphics created for the web. Unfortunately, they can lead to very large file sizes. The big advantage of PNG is that it supports alpha channel, which means that their background can be transparent.
SVG is a vector graphic that also supports animation. Vector graphics are great for logos and other geometric shapes, for example. SVG files are not made up of pixels and can scale indefinitely without loss of quality or increase in file size. SVG files are the best option for creating icons and line art for high resolution displays.
It is worth sticking to the above usage, it will help you save more kilobytes of data. For example, a large photo saved in PNG format can take up several megabytes, while saving it in JPG format will reduce the size to 0.5 megabytes – keep that in mind!
Fourth, Lazy Load
Lazy loading is a technique that relies on loading graphics only when they are needed. It works like this: if the page requires scrolling, the graphics available under the first screen (view area) are not loaded immediately.
It’s only when the user starts scrolling down the page that the graphic is loaded a moment before it’s needed.
Optimizing CSS and JS files
Optimizing CSS and JS files is a big part of the page acceleration process. They are responsible for the look and feel (CSS) and various features (JS) of your website. Following a few basic rules when using them can make a big difference in the perceived speed of a website.
Both CSS and JS can be minified, which will greatly reduce their size. What does it mean? The simplest explanation is that the minification process removes unnecessary spaces and newlines. Both space and newline are normal code elements – in a word, they take up unnecessary kilobytes of data. Thus, removing them reduces the file size and makes such code easier to read by the browser.
Combine CSS and JS files
Your site probably uses multiple CSS files and multiple JS files. This can be caused, for example, by adding various plugins or modules that generate their own CSS or JS code.
It’s worth minimizing the number of CSS and JS files by merging them into one collective CSS file and one collective JS file. This will increase download speed (it’s easier to send one larger file than a dozen smaller ones) and limit the resources of the browser, which will only process one file.
The total number of files can be organized already at the stage of the implementation of the website (this should be done by the developer).
Load CSS/JS files as late as possible
On a large number of pages, all CSS and JS files are placed in the HEAD section of the HTML document. This means that the instructions contained in these files are loaded before the actual content of the page. This approach may cause a delay in the presentation of the page content.
The JS files should be loaded at the end of the HTML document, they are not needed until the page is up and running. Loading them early can only delay the display of user-relevant content.
Optimize the quality of your CSS/JS code
For CSS, you can check if you really need all the styling instructions for the page elements. Very often, the code is responsible for the appearance of elements that are not on the page. So why waste resources and add this code?
The JS code contains a lot of functionality for dynamic page features. It is possible that not all of these functions are used. It is worth taking this into account and getting rid of extra lines of code.
Code optimization is not an easy task, you will usually only get to this step if you need to maximize page speed.