PageSpeed Optimization: How can I improve my website loading time?
Facebook
Twitter
LinkedIn
Nothing can be more annoying when surfing the web than a website that loads very slowly. This is not a good sign for Google either, and for website operators every millisecond more loading time means a loss in sales.
In our guide, you will learn what PageSpeed means, how to measure it and why loading speed is so important for your website. We then explain what can slow down page speed and how you can optimize loading times through targeted measures.
Why is the loading time of my website important?
The faster the loading time of your website, the more positively users experience your pages, which in turn has a positive effect on your conversion rate and your SEO rankings. So there are several good reasons to care about the loading speed of your website:
Positive user experience:
According to a study by Kissmetrics, almost half of all internet users expect a website to load within two seconds. If loading takes more than three seconds, 40% of visitors jump off. The shorter your loading time, the longer the user stays and the lower the bounce rate. Poor website performance can even deter visitors altogether. According to another survey, almost 80% stated that they would not visit slow websites a second time.
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’s why Google also made page speed a ranking factor. The faster your website loads, the higher the chances of good rankings.
Conversion Rate Optimization:
According to a study, if the loading of a URL is delayed by one second, conversions can drop by up to 7%. What doesn’t sound like much at first glance 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 on a monthly basis, you lose 2,100 euros in sales. As calculated over the year, a slow website is a real sales killer.
Crawling:
Slowly loading websites are crawled more slowly and less intensively by Googlebot because it only has a limited budget 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 “page speed” is also used. Therefore, if you search the web for the subject, you will find different names for the same phenomenon. How long a website takes to load a page can also be divided into different measuring stations:
Time to First Byte (TTFB):
The time between when the website is accessed and the first byte loaded by the web server.
First Contentful Paint (FCP):
The point in time when a drawing element is first displayed in the browser.
First Meaningful Paint (FMP):
The moment when the user feels that the website is loaded.
Time to Interactive (TTI):
The time when the website is fully rendered and ready for user input.
In order to be able to measure the loading performance of websites even better, Google also introduced the Core Web Vitals in the summer of 2021. The three new metrics Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shifts (CLS) are part of the Page Experience Ranking signal and measure loading speed, interactivity and visual stability when viewing a page:
Measures the time from the user’s first interaction with your page until the browser responds to that interaction.
Cumulative Layout Shifts (CLS):Gives the sum total of the individual values for all unexpected layout shifts that occur during a page’s lifetime. This metric does not directly measure speed, but it is also an important factor in optimizing your web performance.
How to best measure page speed is described in detail in a separate article in Ryte Magazine. Have a look if you need more information about it.
How fast does my website need to be?
In principle, a website should load in less than two seconds in order to achieve a satisfactory user experience. The shorter the loading time, the better. If it’s less than a second, that’s very good. How fast your website loads depends on many different factors. You can improve some with on-page optimization, others you have no influence on others.
You have no direct influence on these website performance 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 load more slowly than with a fast DSL connection.
Browser cache:
If a user uses a browser whose cache has not been emptied for a long time, the page can be opened with a significant delay because the computer’s memory is no longer sufficient to process the amount of data.
The computing power of the client:
On older desktop computers and smartphones, there may be delays in page construction, since the construction of the DOM and the execution of scripts are slowed down by insufficient memory and processor power.
You can influence these website performance factors directly:
File Sizes:
The size of your website determines how fast it can load. This includes not only the HTML code itself but also the style sheet and script files as well as images. The smaller the size of these files, the faster the page can load.
The computing power of the server: If a website is called up, the web server processes the request. The same applies here: If fewer data have to be requested, the processing is also faster. If there are many requests at the same time with high traffic on the website, the main memory and processor performance can be overloaded and thus become a bottleneck for the loading time. In this case, the capacities should be adjusted upwards.
Optimize page speed – how it works
Page speed can be improved by various measures including creating faster connection times, web server optimization, code and image compression and other on-page optimizations. Let’s take a closer look at these points:
Fast connection times through CDN
Before the web server can process the website call, the connection between the server and the user must be established. If your website is global, you’ve probably already noticed that connection times can vary greatly depending on where the website is accessed from. This is because hubs are increasing geographically up to the data centre where your web server resides.
A content delivery network, or CDN for short, offers one way to ensure faster connection times. 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 nearest 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. Although there are free CDNs on the web, you should check carefully under what conditions the offer is free. The fee-based providers usually bill per data volume that is used monthly via the network.
When the connection to the web server is established, it processes the request and provides the requested files. Server-side scripts are also called up, which, for example, read content from databases and make it available for output.
Recognizing bottlenecks in the infrastructure
If 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, because there is an error with the host 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 metrics presented above, the “Time to First Byte”, which can also be measured with the Ryte “Load Times” report under Performance, 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, such as database queries, does not have to be executed again and again, it can be cached on the server. This is particularly important for users who want to read multiple articles or look at products – i.e. call up multiple pages in their session. The loading times after the first-page call can be reduced in this way.
Server-side caching can be activated and set up in the settings of the web server software – Apache HTTP Server and Nginx are used most frequently. 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 with server caching, but by a web browser. This means that when you call up a new URL on your website, all elements do not have to be loaded again. This increases the loading speed.
Browser caching can be activated with many CMS via plugins or extensions. So-called cache busters can be used to prevent users from continuing to run the old versions of the website when the content is updated.
Browser caching is activated manually by adjusting the web server configuration (see above). To do this, you can turn on one of two Apache server modules: mod_headers and mod_expires.
If you use mod_headers, the .htaccess must be supplemented with the following code (source GitHub):
Header set Cache-Control “max-age=2592000, public“
The round brackets refer to the file formats to be cached. At the same time, the duration of the cache is specified with “age”. The units are seconds. In this example, that is the equivalent of 30 days that the browser cache should remain stored.
If you want to use mod_expires for browser caching, the configuration is 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, files can be processed and sent fastest 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. This code can be compressed and thus reduced in size like a zip file. The compressed data is then unpacked in the browser.
This method was viewed with scepticism under load time optimization for a long time because the web server’s computing power is required to compress files. Each computing power of the web server in turn costs time. However, the benefit far outweighs the effort here, so you should use 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 to activate GZip compression. The modules mod_deflate and mod_gzip are used for this.
1. The mod_deflate module is usually pre-installed. You can use the following console command to check whether 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 hoster.
2. Now open httpd.conf, Apache’s configuration file. You can usually find this in the “/etc/httpd/conf/” folder. There you add the following line:
This indicates 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.
Compress images for faster loading times
Images make up the proportionally largest part of the download volume of a website. 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 increase your page speed significantly. We have already written an extensive article on image compression in Ryte Magazine. So here is a summary.
Optimize all images
Images are important to make a website clear and attractive to your users. However, images in particular harbour the risk that the file size of your website will increase enormously and the loading time will be delayed as a result. Therefore, you should only use images that are optimized for web use. In general, photos and high-quality graphics should be JPEG files and smaller graphics and graphics with few colors or transparency should be PNG files.
Further steps:
Compress your images before using them on the website using an image editing program such as Gimp or Adobe Photoshop. Both programs offer a “save for web” function for beginners. So that we automatically optimize the file size. With tools like PNGGauntlet, the file sizes can be further reduced by removing additional information.
Specify the appropriate image size in the source code: If a browser has to calculate the dimensions of the graphics itself, this can take up loading time. 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 the location, camera used and other data. With a tool like tinypng you can remove them and save disk space.
use WebP
With WebP, Google has created a new image format that can compress images either losslessly (similar to PNG) or lossy (similar to JPEG). It is even more efficient than the long-established 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 as in the following example:
Distinguish between desktop and mobile
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 in the two output media. There is usually a good internet connection on the desktop and the user wants correspondingly high-resolution images of the best quality on large HD monitors.
On mobile devices, on the other hand, websites are often called up on the go 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 in the code of the website. 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 operators and photographers in particular are familiar with the problem: Many images are displayed at once in product overviews and photo galleries, which slows down the loading time of the website. This is particularly annoying for online shops because it is often the main homepage or the homepages of the product categories.
However, 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 “above the fold” part. With a method called “lazy loading”, you can 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 retrieving a web page, 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. A superfluous 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 greater impact on the loading time.
This is how you start the “minification” of the source code:
Eliminate all unnecessary comments in the source code
Remove all extra spaces
Delete unnecessary formatting, for example, if there is formatting without content in the source code like “”
In order to avoid superfluous source code, you should always insert texts already formatted as HTML into the website, use the editor of the CMS or insert the texts as plain text and then format them. If you embed texts directly from Word or other Office programs directly into the CMS, they are full of superfluous source code.
In addition, there are programs that are 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 processing, since the file minified in this way is hardly readable.
Minimize 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 retrieved is particularly slow, this also slows down the loading time of your website. Therefore, check whether you really need these scripts.
More tips:
Only use asynchronous tracking codes. They only load after the page has been rendered and do not hinder the page layout.
For example, use tools like Google Tag Manager. In this case, only one code snippet for many different tracking variants has to be integrated into the page’s source code. This will affect the loading time even less.
If possible, you should store the scripts on your web server and not integrate them from the outside.
Reduce 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. CSS (Cascading Style Sheets) can be used to define formats and presentations for the website. A lot of source code is required for these elements, which has to be read out again with each page call. That takes time.
To reduce the source code, you can outsource CSS and JavaScript files. They will then be merged into one document. All that is then required is a call-up. If the browser loads the file into the intermediate memory (cache), the loading time can be further reduced.
How to outsource JavaScript:
View the source code of your website with an editor. Then cut out all JS files and create a new text file into which you paste all code snippets. Save the file as main.js and store it on your server in the folder where all other HTML files are located.
In the HTML code of the website, you remove the following commands:
and
Replace the deleted commands with this command:
Minify 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 spaces and newlines present:
CSS code without line breaks:
Here, too, it should be noted that the readability is greatly reduced by the removal of spaces and comments. Ideally, you should work with two versions: a version with all spaces and comments that you can edit, and a version for display on the website. So that you don’t have to do double work for every change, you can also use programs for “minification”, e.g.:
Your website will not be fully displayed until all JavaScript and CSS files have been loaded. To speed up the loading process, you can add 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, install JavaScript in the footer of the website.
A possible integration of the files can look like this:
Use CSS3 for backgrounds
Each image 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 will need 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 on all end devices in the same high quality.
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 been fully loaded. Images, graphics or JavaScript and CSS can thus be loaded without impeding the rendering of the website. In order to prefetch a file, you have to adapt the source code. In this case, the attribute rel=” prefetch” is set in front of the desired element.
An example:
Here the example is loaded before another page is called up. This shortens the loading time when the page is called up again. If you use the prerendering method, a complete website is downloaded from the browser in advance and stored in the cache. This includes all files that are required for the complete rendering.
The web page rendered in advance can be loaded with almost no delay when called up. The loading time is reduced to less than 50 milliseconds. To implement the prerendering, you must insert the following line in the source code of the website in question:
You can find even more details and insights on the subject of prerendering and prefetching in this article.
Reduce 301 redirects
301 redirects make sense to avoid duplicate content or to redirect URLs that are no longer needed to new URLs after a relaunch, but each redirect 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 must first wait until an http request has been returned.
To avoid many redirects, you should document the URL structure or the structure of new URLs. The same applies to setting up 301 redirects. If you find several redirects in a row when analyzing your website, you should direct the first redirect to the actual link target, without going through one or more redirects.
Avoid bad requests
When a client like a web browser accesses your site, requests are made for each resource in order to be able to display the file. However, if these resources in the form of images or JavaScript files are not found, this leads to a reaction chain that wastes loading time. You can easily avoid bad requests by correcting faulty files and specifying the correct path or forwarding to a new file.
Use AMP
With Accelerated Mobile Pages, Google offers webmasters the opportunity to load mobile websites with almost no delay. For this purpose, the pages must meet certain requirements so that they can be viewed on mobile devices.
Many CMS like WordPress enable the use of AMP with the help of plugins. A detailed description of the technology and implementation can be found here in Ryte Magazine. To date, AMP cannot be used for online shops. However, the developers are considering it.
In this guide, you have learned many measures to improve page speed. However, most of these measures require you to have the technical knowledge and time to implement them. If one of these two things is a hurdle for you, you can also leave the PageSpeed optimization to an automated service.
The cloud service for automated page speed optimization wao.io works like this: like a content delivery network, wao.io saves the website temporarily and carries out the measures that you can define 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
In addition, wao.io also protects against security attacks and offers metrics for website monitoring and user numbers.
We work a lot on wao’s security features with which we want to protect wao customers from unwanted/evil attackers by detecting them early and blocking further requests from them. A challenge here is to distinguish unwanted/evil attackers from desired/good users. To help us with this classification, we trained some AI models. The basic idea is that attackers have a different request profile than legitimate users and that an AI can distinguish that much better than humans. You can read the background to this here.
Conclusion: Optimizing page speed is not that difficult
A website has many possible adjustment screws 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.
it is essential to acknowledge that the term “crazy” can also stigmatize those who live with mental health conditions. It is crucial to approach mental health discussions with sensitivity, respect, and understanding, avoiding the casual use of the term “crazy” to describe someone’s mental state. Mental health issues are complex and deserving of empathy and support, rather than casual labeling.
