When you’re on the internet, nothing is more annoying than a website that loads slowly. A slow loading website also gives negative indicators to Google, and for online shops in particular, every extra second of loading means losses in sales.
In this guide, you will learn what page speed is, how to measure it, and why loading time is so important for your website. We also explain what can cause slow page speed, and how you can optimize your loading times.
There are multiple reasons demonstrating why a fast load time is very important:
1. Positive user experience: According to a study by kissmetrics, almost half of all Internet users expect a loading time of less than two seconds. If your website takes more than 3 seconds to load, 40% of visitors will bounce. A fast page speed therefore means a higher conversion rate and lower bounce rate. Slow sites can completely deter visitors. According to a survey, almost 80 percent said they wouldn't visit slow websites a second time.
2. SEO ranking factor: For Google and other search engines, a positive user experience is an important factor in determining the quality of a website. This is why Google now uses page speed as a ranking factor. Therefore, the faster your site loads, the better your chances are of ranking highly.
3. Conversion Rate Optimization: A delay of one second in the loading time can reduce conversions by up to seven percent, according to this study. This might not sound so significant at first, but if your online shop generates a daily turnover of 1,000 euros, a delay of one second in loading time can result in a loss of 70 euros per day, around 2,100 per month. If you calculate this on a yearly basis, a slow page speed is a real turnover killer.
4. Crawling: Websites that load slowly are crawled slower and are not crawled so intensively, because the Googlebot only has a limited budget for crawling. A faster loading time can therefore mean your site is crawled more often, meaning your content in Google’s index will also be more relevant.
In general, the loading time of a website is the time, in seconds, from when the website is called up until it is completely displayed in the browser. The terms "loading time" and "page speed" are used interchangeably. If you search the web for the topic, you will find both variants. The loading time of a website can also be divided into 4 different measurements:
There are many tools available for analyzing and optimizing loading times. There are also other ways to determine the loading time of your website, for example with log file analysis.
This Google tool for measuring loading times is constantly being updated and improved. The fifth version of Pagespeed Insights is based on Lighthouse, a website optimization tool that is also available as an extension in the Chrome browser. It uses data from CrUX, the Chrome User Experience Report.
After entering your domain, the tool calculates a speed score between 0 and 100. PageSpeed Insights distinguishes between a score for mobile devices and a score for desktop. The mobile score is used as standard, and is often very low, as Google would like to motivate website operators to optimize their websites specifically for mobile versions. Below the speed score, individual measurements are displayed. Their color coding can be used to determine the seriousness of issues.
Figure 1: Start page of Google PageSpeed Insights
If you analyze your website with Google Analytics, you will find statistics about loading time in the "Performance" area. Click on "website speed." If you have installed e-commerce tracking, you can directly evaluate how the loading speed affects conversions.
In the Google Search Console, you will find loading times under the menu point “Crawling”. There you will be shown how many kilobytes are downloaded per day and how long the Googlebot requires for downloading one of your sites in milliseconds. This helps you to easily discover problems with your website loading times.
Ryte’s Website Success tool displays the time to first byte and the total load time in the performance report. Ryte also displays an additional value separately, which is regarded as part of the TTFB: The connection time between the user’s computer and the web server. The report also classifies how good the respective load time is.
Yslow was developed by Yahoo!. You can use it as a bookmarklet, a tool for the command center, or as a browser extension. The rules for speed are based on the specifications of Yahoo!. The tool is also interesting for advanced users because of the command-line functions. Note that the plugin, Firebug, must also be installed to use the plugin via Firefox.
Figure 2: Yslow
You must register to use Pingdom.com. It shows you your loading times with diagrams and statistics, which simplifies the evaluation. You can easily see which elements.
Figure 3: Pingdom
With WebPageTest.org, you can simulate the loading time with various browsers. You can also test from various locations to test how quickly a site loads for visitors from other countries.
In general, a website should load in less than two seconds for a satisfactory user experience. The shorter the loading time, the better. Ideally it should take less than one second to load. How fast your website loads depends on various factors. Some, you can improve with OnPage optimization; others you cannot influence.
You have no influence over these factors:
You can influence these factors:
The connection between the web server and the user must be established before the web page request can be processed by the web server. The time spent on this is called connection time, latency or ping. Ryte's Website Success tool can be used to measure this. Ideally, the latency is less than 100 milliseconds. If the connection setup requires significantly more time, optimization measures can be taken.
Set up fast DNS connections
For the web server to be found with the website, the domain entered in the browser must be resolved into an IP address. The domain, example.com, becomes four numbers between 0 and 255 separated by dots. DNS servers are responsible for the resolution of the domain. As a rule, a chain of DNS servers is required until the IP address is found.
This process can be optimized by using faster DNS servers. For example, the servers with the IP addresses "126.96.36.199" from Cloudflare and "188.8.131.52" from Google can be used free of charge. The conversion of DNS entries can be done by the domain provider or hoster.
CDN for global reach
If it is important for your online business to have a global presence, you will quickly notice that connection times can vary greatly depending on where the website is accessed from. This is due to the fact that the nodes increase geographically up to the data center where your web server is located.
A Content Delivery Network, CDN for short, can help here. The CDN ensures that your website is cached in a global server network, so that there is always a small number of nodes between the user's computer and the next server in the CDN. This service is associated with high costs, which do not necessarily pay off for operators of a website that mainly addresses the German-speaking area.
In order to use a CDN, you have to register with a provider. There is a free CDN on the web, but you should check exactly with which conditions the offer is free. The fee-based providers usually charge per data volume that is used monthly over the network.
For a long time, it was thought that an SSL certificate would slow down the loading speed of the website. This can be explained by the fact that the SSL handshake creates another hurdle when connecting to the web server. The SSL certificate is verified and the encrypted connection is established.
In the meantime, however, the situation has changed. Many PageSpeed and security measures for the website (e.g. HTTP/2, see below) are only possible with an SSL certificate. In addition, SSL certificates have established themselves as the standard for security, user experience and the SEO ranking factor. So if you don't use an SSL certificate yet, you should definitely do so. The certificate issuer Let's Encrypt even offers this free of charge.
When the connection to the web server is established, this request processes and provides the requested files. Server-side scripts are also called, which, for example, read content from databases and make it available for output.
Detect bottlenecks in the infrastructure
When a web page loads slowly, it may be because the web server and its underlying infrastructure are overloaded. This can have several causes, for example if the hoster has an error or because the web server has to answer too many requests at once.
It is important to recognize these bottlenecks to be able to react quickly. Many hosting solutions offer metrics to monitor server utilization. Of the measurements presented above, the "Time to First Byte", which can be measured with Ryte's Website Success tool, can also be helpful. If it increases significantly, there may be a problem with the web server.
Use server-side caching
Content that is frequently requested, for example database queries, can be cached on the server so that the requests do not have to be executed again and again. This is particularly important for users who want to read several articles or view products - i.e. call up several pages in their session. The loading times after calling up the first page can therefore be reduced.
In the settings of the web server software - Apache HTTP Server and Nginx are most frequently used - server-side caching can be activated and set up. If you don't have the necessary knowledge, you can ask your hosting provider or have caching and other PageSpeed measures performed by an automated cloud service (see below).
Use browser caching
With browser caching, elements of your website are cached by a web browser, rather than server caching of the web server. Therefore, not all elements need to be loaded anew when accessing a new URL on your website. This increases the loading speed.
Browser caching can be activated by many CMS via plugins or extensions.
The manual activation of browser caching occurs via an adjustment of the .htaccess file. Thus, you can turn on two modules of the Apache server: mod_headers and mod_expires.
If you use mod_headers, the .htaccess must be completed with the following code (Source - GitHub):
Header set Cache-Control "max-age=2592000, public"
The rounded brackets relate to the file format that is to be placed in the cache. At the same time, the duration of the cache is to be given with "age". The unit is in seconds. In this example, the cache is saved by the browser for 30 days.
If you would like to use mod_expires for browser caching, the .htaccess file is expanded with the following lines:
## Cache Expiration ##
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
## Cache Expiration
This method allows a unique time frame to be separately determined for each file type.
Files can be processed and sent fastest if they are as small as possible. This also applies to the code that is to display the website in the user's browser. Like a zip file, this code can be compressed and thus reduced in size. The compressed data is then unpacked in the browser.
This method was viewed with skepticism for a long time, because computing power of the web server has is necessary, and this also takes time. However, the benefit outweighs the disadvantages, so you should definitely use it.
How can I compress files with gzip?
The Apache server is the most frequently used for websites, so the following example is for Apache.
Two different modules are used: mod_deflate and mod_gzip.
1. The mod_deflate module is usually pre-installed. With the following console command you can check if it already exists:
sudo apachectl -t -D DUMP_MODULES | grep deflate
If you get the output "deflate_module (shared)", then mod_deflate is already installed. Otherwise contact your host.
2. Now open "httpd.conf", the Apache configuration file. You can usually find it in the folder "/etc/httpd/conf/". There you add the following line:
By default, all web page files (e.g. images and scripts) are loaded using the HTTP/1.1 protocol. These files are downloaded one after the other via a separate connection.
This slows down the loading process. With an SSL certificate, the web server can be switched to the HTTP/2 protocol. Via HTTP/2, all files are downloaded via a single connection. They are also prioritized. All common browsers support the protocol, so you can work with it without hesitation. Find out more in this article: How to improve webpage load speed with HTTP/2: a beginner's guide.
The proportionally largest part of the download volume of a website is made up of images. This is all the more true for online shops with many products and portfolio websites, especially those of photographers. If you manage to significantly reduce the file size of your images, you can significantly increase your page speed. We have already written an extensive article on image compression on Ryte. Here is a summary.
Images are important for making a website clear and attractive for your users. But images also threaten to substantially increase your website’s file size and slow the loading time. Therefore, you should only use images that are optimized for web use. Generally, photos and high-quality graphics should be considered JPEG files and smaller graphics and graphics with few colors or transparencies should be considered PNG files.
With WebP, Google has created a new image format that can compress images both lossless (similar to PNG) and lossy (similar to JPEG). It is even more efficient than the old formats. Not all browsers yet support WebP. Therefore, it makes sense to store alternatives for WebP files in the source code and to install a switch, for example:
<source srcset="img/testbild.webp" type="image/webp">
<source srcset="img/testbild2.jpg" type="image/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
In the future, more than half of all users will access websites via a mobile device instead of a desktop computer. The demands on images are very different on both output media. On desktop, there is usually a good Internet connection, and on large HD monitors, the user wants correspondingly high-resolution images in the best quality.
On mobile end devices, on the other hand, websites are often accessed on the move and thus not with the highest bandwidth. The small display also means that the quality requirements are lower. Furthermore, due to the screen format, images are displayed in a different resolution than on the desktop. It therefore makes sense to distinguish between the output media and to create two variants of an image.
Similar to the previous example for WebP, switches can also be stored in the code of the website for this purpose. With CSS, for example, the screen resolution can be queried and thus the display can be adapted to the output medium.
In product overviews and photo galleries many pictures are displayed at once - this slows down the loading time a great deal. This is particularly a problem for shop operators and photographers, and particularly annoying for online shops because it is often the home page or the first page of product categories. However, many of the images loaded in this way are only visible to the user when he scrolls down the page. So it is not necessary that they are already loaded when the user looks at the part "above the fold". With a method called "lazy loading", you can make sure that the images below the folder are only loaded when they actually appear on the viewport.
When a website URL is called up, a client or a browser follows the source code of the HTML document line by line. All empty characters or line breaks are read. One superfluous empty character will not negatively influence the performance of your website. But because a website, depending on its size, can consist of more than a hundred lines of source code, lots of superfluous empty characters or commentary can clearly impact loading time. Therefore, you should minimize your source code:
To avoid superfluous source code, you should either always insert the text formatted as HTML in the website, use the CMS editor, or insert and then format the text as plain text. If you integrate the text from Word or another Office program directly into the CMS, this will result in superfluous source code.
In addition, there are programs that can remove all spaces and comments from the source code. If you want to use these programs, you should always keep a copy for editing, because the minified file is hardly readable.
Whether sharebuttons or tracking codes, external scripts can be integrated into your website in different ways and for different purposes. This makes you dependent on the availability of these scripts from another source. If the web server from which the script is retrieved is particularly slow, this will also slow down the loading time of your website. So check if you really need these scripts.
Have your website’s source code displayed with an editor. Next, cut out all JS files and create a new text file into which you insert all code snippets. Save the file as main.js and store it on your server in the folder where all other HTML files are found.
In the HTML code of the website, remove the following commands:
Exchange the deleted command with this command:
Code snippet with available empty characters:
CSS code and empty characters:
A possible integration of the files can appear as:
Each image that is used on your website requires several lines of code. This code is read line by line when the website is called up. If you store buttons, icons, or backgrounds as graphics, a browser will require a lot of time to load your website.
The solution lies in generating all graphic elements apart from photos through CSS3. In this way, you will reduce the source code. At the same time, the files are displayed in the same high quality on all end devices.
You must adjust the source code to allow a file to be pre-fetched. In this case, the desired element is prefaced with the attribute rel="prefetch".
<link rel="prefetch" href="//mysite.com/example-image.jpg">
Here, the example is reloaded even before another site is loaded. The loading time in the new site view is thus shortened.
If you use the pre-rendering method, a complete website is downloaded from the browser in advance and is temporarily stored in the cache. Contained in this are all files that are necessary for the complete rendering. The website rendered in advance can be loaded almost without delay when called. The loading time is therefore reduced to fewer than 50 milliseconds.
In order to implement the pre-rendering, you must insert the following line into the source code of the website to be visited:
<link rel="prerender" href="//prerendering-site.com/index">
301 redirects are great for avoiding duplicate content or to redirect old URLs to new URLs after a re-launch. However, each redirect increases the loading time - not significantly, but every time a browser encounters a redirect, a new URL must be retrieved, and the browser has to wait until an http request is returned.
If several 310 redirects follow each other, the loading time can be significantly increased.
To avoid too many redirects, you should document the URL structure or the development of new URLs. The same goes for established 301 redirects. If in the analysis of your website you find several forwardings, you should guide the first forwarding directly to the actual link goal without a detour to one or more redirects.
Google offers webmasters with Accelerated Mobile Pages the opportunity to load mobile websites with almost no delay. For this purpose, the sites must fulfill certain requirements so that they can be displayed on mobile devices.
Many CMS such as WordPress allow for the use of AMP with the help of plugins. Until now, AMP could not be used for online shops. However, this is envisaged by the developers.
In this guide you have learned many measures to improve page speed. However, most of these measures require that you have the technical knowledge and the time to implement them. If one of these two things should be a hurdle for you, you can leave the PageSpeed optimization to an automated service.
The cloud service for automated PageSpeed optimization wao.io works like this: Like a content delivery network, wao.io stores the website temporarily and carries out the measures that you can define via a menu. In addition to intelligent image compression and code minimization, this also includes advanced measures such as lazy loading.
wao.io also protects against security attacks and offers metrics for website monitoring and user numbers.
A website has many possible adjustment screws that you can use to improve the loading time of the page. In this article you have got to know a few possibilities. Some methods are also very easy for beginners and SEO novices to implement. Thus everyone can make his website faster and provide for happier users and search engines.
Analyze and optimize your page speed with Ryte FREE
Published on 07/09/2019 by Roland Guelle.
As CTO of Sevenval Technologies GmbH, founded in 1999, Roland Guelle is responsible for research and development. With around 170 employees in Cologne and Berlin, Sevenval has specialized in frontend solutions that enable a modern, fast and, above all, secure user experience based on historically grown IT system landscapes. Roland still develops himself today and likes to speak at developer conferences.