How long should my page load

PageSpeed ​​Optimization: How can I improve the loading time of my website?

Our complete guide will tell you what PageSpeed ​​means, how to measure it, and why loading speed is so important to your website. Then we explain what can slow down the page speed and how you can optimize loading times through targeted measures.

Everything about the PageSpeed

Why is my website loading time important?

There are many different reasons for a fast loading time:

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 the loading takes more than three seconds, 40 percent of the visitors jump off. The shorter your loading time, the longer the user stays and the lower the bounce rate. Poor website performance can even put off visitors altogether. According to another survey, almost 80 percent said they would not 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. That is why the page speed was also raised by Google as a ranking factor. The faster your website loads, the higher the chances of good rankings.

3. Conversion rate optimization: Delaying the loading time by one second can reduce conversions by up to seven percent, according to a study. What doesn't sound like that much at first, can be illustrated with a simple calculation. If your online shop has a daily turnover of 1,000 euros, delaying the loading time by one second can result in losses of 70 euros per day. Calculated over the month, you lose 2,100 euros in sales. Calculated over the year, a slow website is a real revenue killer.

4. Crawling: Slowly loading websites are crawled more slowly and not as intensively by the Googlebot because it has only a limited budget available for crawling. With the loading speed you also determine how well your website is crawled and how up-to-date your content is in the Google index.

How is PageSpeed ​​measured?

In general, the loading time of a website is the period measured in seconds between the call and the complete display of the website in the browser. In addition to the term “loading time”, the term “loading speed” or “PageSpeed” is also used. Therefore, if you search for the topic on the web, you will find different names for the same phenomenon. The loading time of a website can also be divided into different measuring stations:

  • Time to First Byte (TTFB): The period of time between calling up the website and the first byte loaded by the web server.
  • First Contentful Paint (FCP): The time at which a representation element is displayed for the first time in the browser.
  • First Meaningful Paint (FMP): The time at which the user feels that the website is loaded.
  • Time to Interactive (TTI): The time when the website has finished rendering and ready for user input.

How can I measure the loading speed of my page?

There are numerous methods of determining the loading time of a web page. For example, you could read your server log files or stop them manually. In fact, slow page loading is often relative, as every user perceives time differently. However, if you use valid data, you can work better on optimizing the loading speed in the long term. In our article about various tools for website speed tests you will find a selection of aids for page speed measurement.

How fast does my website have to be?

In principle, a website less than two seconds should load in order to achieve a satisfactory user experience. The shorter the loading time the better. If it is less than a second, that's very good. How fast your website loads depends on many different factors. Some you can improve through OnPage optimization, others you have no influence.

You have no direct influence on these factors:

  • Bandwidth: The loading time of your website is influenced by the available internet bandwidth. With a 3G connection and a smartphone, the website will build up more slowly than with a fast DSL connection.
  • Browser cache: If a user uses a browser whose cache has not been cleared for a long time, the page loading can be significantly delayed because the main memory of the computer is no longer sufficient to process the amount of data.
  • Computing power of the client: On older desktop computers and smartphones there may be delays in the loading of the page, as the DOM's build-up and the execution of scripts are slowed down by insufficient memory and processor performance.

You can influence these factors:

  • File sizes: The size of your website determines how fast it can load. This includes not only the HTML code itself, but also stylesheet and script files as well as images. The smaller the size of these files, the faster the page can load.
  • Computing power of the server: If a website is called up, the web server processes the request. The same applies here: If less data has to be requested, processing is also faster. If many requests are made at the same time when the website is high traffic, the memory and processor performance can be used too much and thus become a bottleneck for the loading time. In this case, the capacities should be adjusted upwards.

Targeted optimization of page speed

Create fast connection times

The connection between the web server and the user must be established before the website can be accessed by the web server. The time used for this is known as connection time, latency or ping. This can be measured with Ryte's Website Success tool. Ideally, the latency is less than 100 milliseconds. If the establishment of the connection requires significantly more time, optimization measures can be taken.

Set up fast DNS connections

In order for the web server to be found with the website, the domain entered in the browser must be resolved into an IP address. Example.com becomes four numbers between 0 and 255, separated by dots. So-called DNS servers are responsible for resolving the domain. Usually a chain of DNS servers is needed before the IP address can be found.

This process can be optimized by using faster DNS servers. For example, the servers with the IP addresses “1.1.1.1” from Cloudflare and “8.8.8.8” from Google can be used freely. The conversion of the 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, then you will quickly find that the connection times can differ extremely from each other, depending on where the website is accessed from. This is because the nodes increase geographically up to the data center in which 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 and 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 the operator of a website that mainly addresses German-speaking countries.

In order to be able to use a CDN, you have to register with a provider. There are free CDNs on the web, but you should check carefully under which conditions the offer is free. The fee-based providers usually charge per data volume that is used over the network on a monthly basis.

Use HTTPS

For a long time it was believed that an SSL certificate would slow down the loading speed of the website. This is explained by the fact that the SSL handshake creates another hurdle when establishing a connection with 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 for security, user experience and the SEO ranking factor have established themselves as the standard. So if you are not yet using an SSL certificate, you should definitely do so. The certificate issuer Let’s Encrypt even offers this free of charge.

Optimize the web server for PageSpeed

When the connection to the web server is established, it processes this request and provides the requested files. Server-side scripts are also called, for example, to read out content from databases and make them available for output.

Recognize bottlenecks in the infrastructure

If a web page loads slowly, it could be because the web server and its underlying infrastructure are overloaded. This can have several causes, for example because there is an error at the hoster or because the web server has to answer too many requests at once.

It is important to recognize these bottlenecks in order to be able to react quickly. Many hosting solutions offer metrics that can be used to monitor server utilization. Of the measured values ​​presented above, the “Time to First Byte”, which can be measured with the Ryte Website Success tool, can also be helpful. If it increases significantly, there may well be a problem with the web server.

Use server-side caching

So that frequently requested content, for example database queries, does not have to be repeated over and over again, these can be temporarily stored on the server. This is particularly important for users who want to read several articles or look at products - i.e. call up several pages in their session. The loading times after the first page view can be reduced in this way.

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 do not have the necessary knowledge, you can ask your hosting provider about it or have caching and other PageSpeed ​​measures carried out by an automated cloud service (see below).

Use browser caching

With the help of browser caching, elements of your website are not cached by the web server as is the case with server caching, but by a web browser. This means that when you access a new URL on your website, you do not have to reload all elements. This increases the loading speed.

Browser caching can be activated with many CMS via plugins or extensions. So-called cache buster can prevent the old versions of the website from continuing to run when the content is updated.

The manual activation of browser caching is done by adjusting the web server configuration (see above). To do this, you can switch on one of two modules of the Apache server: mod_headers and mod_expires.

If you use mod_headers, the .htaccess must be supplemented with the following code (source GitHub):

<FilesMatch “\.(css|js|gif|pdf|jpg|jpeg|png)$“>

Header set Cache-Control "max-age = 2592000, public"

</FilesMatch>

The round brackets refer to the file formats that are to be placed in the cache. At the same time, the duration of the cache is specified with "age". The unit is seconds. In this example, that's the equivalent of 30 days that the browser should keep the cache.

If you want to use mod_expires for browser caching, the configuration will be extended by the following lines (source GitHub):

ExpiresActive On

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 text / x-javascript "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"

With this method, an expiration time can be determined separately for each file type.

Use GZip compression

As already described, the fastest way to process and send files is when they are as small as possible. This also applies to the code that is supposed 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 extracted in the browser.

For a long time, this method was viewed with skepticism among the load time optimization, because the computing power of the web server is necessary to compress files. Each computing power of the web server in turn costs loading time. The benefit outweighs the effort by far, so you should fall back on it.

How can I compress files with GZip?

Using the example of the most widely used web server software Apache, we will show you how you can activate GZip compression. The modules mod_deflate and mod_gzip are used for this.

1. The module mod_deflate is mostly pre-installed. With the following console command you can check whether it is already available:

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 hoster.

2. Now open “httpd.conf”, the Apache configuration file. You can usually find this in the folder “/ etc / httpd / conf /”. There you add the following line:

AddOutputFilterByType DEFLATE text / text text / html text / plain text / xml text / css application / x-javascript
application / javascript

With this you indicate that the text as well as the HTML, CSS and JavaScript code will be compressed with GZip. Save the file and restart the Apache web server. From now on the data will be compressed by Apache.

Enable HTTP / 2

By default, all files on the website (e.g. images and scripts) are loaded using the HTTP / 1.1 protocol. These are downloaded one after the other via their own connection. You can imagine it as if you wanted to order several pizzas and the delivery man would deliver each pizza individually.

This is of course inconvenient and slows down the loading process. The web server can be converted to the HTTP / 2 protocol with an SSL certificate. Over HTTP / 2, all files are downloaded over a single connection. They are also prioritized. All common browsers now support the protocol, so you can work with it without hesitation.

Compress images

The proportionally largest part of a website's download volume is made up of images. This is all the more true for online shops with many products and portfolio websites, especially for photographers. So 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. So here is a summary.

Optimize all images

Images are important so that a website is clear and attractive to your users. But images in particular carry the risk that the file size of your website will increase enormously and thus the loading time will be delayed. Therefore, you should only use images that have been optimized for web use. In general, photos and high-quality graphics should be JPEG files and smaller graphics and graphics with few colors or transparencies should be PNG files.

Further steps:

  • Compress your images with an image editing program such as Gimp or Adobe Photoshop before using them on the website. Both programs offer a “save for web” function for beginners. So that we automatically optimize the file size. With tools such as PNGGauntlet, the file sizes can be further reduced by removing additional information.
  • Specify the corresponding image size in the source code: If a browser has to calculate the dimensions of graphics itself, it can cost time to load. The specified size should correspond to the original size of the image stored on the server. You can also define the output of the image size via CSS.
  • Remove meta tags and EXIF ​​data: If you use pictures from your own camera or smartphone, for example, they have a lot of additional information such as location, camera used and other data. With a tool like tinypng you can remove these and save space.
  • Use WebP

    With WebP, Google has created a new image format that can compress images losslessly (similar to PNG) or lossy (similar to JPEG). At the same time, it is even more efficient than the long-standing formats and could therefore prevail in the future. Not all browsers support WebP yet. It therefore makes sense to store alternatives for WebP files in the source code and to install a switch. This works like the following example:

    <picture>

    <source srcset=“img/testbild.webp“ type=“image/webp“>

    <source srcset=“img/testbild2.jpg“ type=“image/jpeg“>

    <img src=“img/testbild2.jpg“ alt=“Fallback-Bild“>

    </picture>

    Differentiate between desktop and mobile

    In the future, more than half of all users will access websites using a mobile device instead of a desktop computer. The demands on images are very different on the two output media. There is usually a good internet connection on the desktop and on large HD monitors the user wants correspondingly high-resolution images in the best quality.

    On the other hand, websites are often accessed on mobile devices while on the move and therefore not with the highest bandwidth. Due to the small display, the demands on quality are also lower. In addition, due to the screen format, images are displayed in a different resolution than on the desktop. So it makes sense to differentiate between the output media and to create two variants of an image.

    Similar to the previous example for WebP, switches can also be stored for this in the website code. With CSS, for example, the screen resolution can be queried and thus the display can be adapted to the output medium.

    Set up lazy loading

    Shop owners and photographers in particular will know the problem: In product overviews and photo galleries, many images are displayed at once, which brings the loading time of the website to its knees. This is particularly annoying for online shops because it is often the main home page or the home pages of the product categories.

    Many of the images that are loaded in this way are only visible to the user when he scrolls down the page. So it is not necessary that these are already loaded when the user looks at the part “above the fold”. A method called “lazy loading” can be used to ensure that the images below the fold are only loaded when they actually appear on the viewport.

    OnPage measures for a fast website

    "Clean up" source code

    When a website is called up, a client or a browser follows the source code of the HTML document line by line. All spaces or line breaks are also read out. An unnecessary space will certainly not negatively affect the performance of your website. Since a website can consist of several hundred lines of source code, depending on its size, superfluous spaces or comments have a more significant effect on the loading time.

    This is how you start the “Minification” of the source code:

    • Eliminate any unnecessary comments in the source code
    • Remove any superfluous spaces
    • Delete unneeded formatting, if for example a formatting without content is in the source code like “

    In order to avoid superfluous source code, you should always either insert texts into the website already formatted as HTML, use the editor of the CMS or insert the texts as plain text and then format. If you integrate texts directly from Word or other office programs into the CMS, they are bursting with superfluous source code.

    There are also programs that can be called from the command line to remove all spaces and comments from the source code. If you want to use these programs, you should definitely keep a copy for editing, as the minified file is hardly readable.

    Decrease external scripts

    Whether share buttons or tracking codes, external scripts can be integrated into your website in very different designs and for different purposes. However, this makes you dependent on the availability of these scripts from another source. If the web server from which the script is accessed is particularly slow, this will also slow down the loading time of your website. So check whether you really need these scripts.

    More tips:

    • Use only asynchronous tracking codes. They only load after the page has been rendered and do not interfere with the page loading.
    • Use tools like Google Tag Manager, for example. In this case, only one code snippet for many different tracking variants has to be integrated into the source code of the page. This affects the charging time even less.
    • If possible, you should store the scripts on your web server and not integrate them externally.
    • Decrease the number of iframes.

    Outsource JavaScript and CSS

    JavaScript is a scripting language that can be used to execute functions in the browser and thus on the client computer. With CSS (Cascading Style Sheets) formats and presentations for the website can be defined. A lot of source code is required for these elements, which has to be read out again with every page view. That takes time.

    To reduce the source code, you can outsource CSS and JavaScript files. They are then merged into one document. For this only one request is necessary. When the browser loads the file into the cache, the loading time can be reduced again.

    This is how you can outsource JavaScript:

    View the source code of your website with an editor. Then cut out all the JS files and create a new text file in which you paste all the code snippets. Save the file as main.js and store it on your server in the folder where all other HTML files can be found.

    In the HTML code of the website, remove the following commands:

    and

    You replace the deleted commands with this command:

    Minimize CSS and JavaScript files

    As with HTML code, you can reduce the size of CSS and JavaScript, for example by removing unnecessary spaces. These are also called “whitespaces”. In this way, the source code can be reduced to just one line, for example.

    Code snippet with existing spaces and line breaks:

    CSS code without line breaks:

    CSS code without line breaks:

    Here, too, it should be noted that the readability is greatly reduced by removing spaces and comments. Ideally, you should work with two versions: One version with all spaces and comments that you can edit and one version for display on the website. So that you do not have to do double work with every change, you can also use programs for "minification", e.g .:

    Load JavaScript and CSS at the end

    Your website will not be fully displayed until all JavaScript and CSS files have been loaded. To speed up the loading process, you can only insert JavaScript and CSS at the end of the HTML code. Even if the server is slow, the page loading is not affected at first. The ideal position for CSS files is therefore in the area of ​​the website. You should, however, incorporate JavaScript in the footer of the website.

    A possible integration of the files can look like this:

    Use CSS3 for backgrounds

    Every image that is used on your website requires several lines of code. This code is read out line by line when the page is called up. If you now store buttons, icons or backgrounds as graphics, a browser needs a lot of time to load your website. The solution is to generate all graphic elements except photos using CSS3. In this way you reduce the source code. At the same time, the files can be displayed in the same high quality on all end devices.

    Use prefetching and prerendering

    If you use the prefetching technique, your browser saves certain elements of the website in the cache even before the page has completely loaded. This means that images, graphics or JavaScript and CSS can be loaded without hindering the rendering of the website. To prefetch a file, you have to adapt the source code. In this case, the rel = ”prefetch” attribute is placed in front of the required element.

    An example:

    <link rel="prefetch" href="//meineseite.de/beispielbild.jpg">

    Here the example is loaded before another page is called up. This shortens the loading time when the page is viewed again. If you use the prerendering method, a complete website is downloaded from the browser in advance and cached. This includes all files that are required for the complete rendering.

    The pre-rendered web page can be loaded almost without delay when viewed. The loading time is reduced to less than 50 milliseconds. To implement the prerendering, you have to insert the following line in the source code of the website concerned:

    <link rel=“prerender" href="//prerendering-seite.de/verzeichnis">

    You can find even more details and insights on the subject of prerendering and prefetching in this post.

    Reduce 301 redirects

    301 redirects are useful to avoid duplicate content or to redirect URLs that are no longer required to new URLs after a relaunch, but each redirection increases the loading speed. Although the delay per forwarding is not very long, it is noticeable. Because every time a browser encounters a redirect, it has to call up a new URL. After that, he first has to wait until an http request has been returned.

    If there are several 301 redirects in a row, the loading time can increase significantly. In addition, the Googlebot only follows a maximum of three redirects, so that a chain of redirects is also a disadvantage for crawling.

    To avoid a lot of redirects, you should document the URL structure or the structure of new URLs. The same applies to established 301 redirects. If you find several redirects in a row when analyzing your website, you should lead the first redirect directly to the actual link target, without the detour via one or more redirects.

    Avoid bad requests

    If a client accesses your site like a web browser, requests are made for each resource in order to be able to display the file. However, if these resources cannot be found in the form of images or JavaScript files, this leads to a chain of reactions that wastes loading time. You can easily avoid bad requests by correcting incorrect files and specifying the correct path or by forwarding to a new file.

    Use AMP

    With Accelerated Mobile Pages, Google offers webmasters the option of loading mobile websites with almost no delay. To do this, the pages must meet certain requirements so that they can be viewed on mobile devices.

    Many CMS such as WordPress enable the use of AMP with the help of plugins. You can find a detailed description of the technology and implementation here in the Ryte Magazine. To date, AMP cannot be used for online shops. However, it is intended by the developers.

    Automated PageSpeed ​​optimization

    In this guide you got to know many measures to improve the page speed. Most of these measures, however, require that you have the technical knowledge and the time to implement them. If one of these two things is 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, for example: Like a content delivery network, wao.io temporarily stores the website and carries out the measures that you can specify via a menu. In addition to intelligent image compression and code minification, this also includes advanced measures such as lazy loading.

    Figure 3: Lazy loading and other optimizations in wao.io

    Wao.io also protects against security attacks and offers metrics for website monitoring and user numbers.

      Provider overview:
    • wao.io
    • Akamai
    • kraken.io

    Conclusion

    A website has many possible levers that you can turn to improve the loading time of the page. In this article you got to know a few possibilities better. Some methods are very easy to implement even for beginners and SEO newbies. So everyone can make their website faster and ensure happier users and search engines.

    In this sense: Happy Optimizing!

    Theory is good - practice is better! Analyze and optimize page speed now with Ryte FREE!

    Here we go!