How to Boost Your Website Loading Time.[Advance Technique That Google Love]


Mangesh Supe

by Mangesh Supe · Updated August 11 2021

How to Boost Your Website Loading Time.[Advance Technique That Google Love]

Nothing can be more annoying when surfing the web than a website that loads very slowly.

Slow PageSpeed is not a good sign for Google either, and for store operators, every millisecond, more loading time means lost sales.

In our complete guide, you'll learn what PageSpeed means, how to measure it, and why loading speed is so essential for your website.

We then explain what can slow down page speed and how you can optimize loading times through targeted measures.

All about PageSpeed

Why is the load time of my website important?

How is PageSpeed measured?

How can I measure the loading speed of my page?

How fast does my website need to be?

Optimize PageSpeed specifically

Create fast connection times

Optimize the webserver for PageSpeed

Compress images

OnPage measures for a fast website

Automated PageSpeed Optimization

All about PageSpeed

Why is the load time of my website important?

Many different reasons speak 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 it takes more than three seconds to load, 40 per cent of visitors bounce. So the shorter your loading time, the longer users stay and the lower the bounce rate. Poor website performance can even deter visitors altogether. According to another survey, almost 80 percent said they would not visit slow websites a second time.

2nd SEO ranking factor: For Google and other search engines, a positive user experience is an important factor in determining a website's quality. That's why Google has elevated page speed to a ranking factor. The faster your website loads, the higher the chances of good rankings.

3. conversion rate optimization: according to one study, delaying the loading time by one second can reduce conversions by up to seven percent. What doesn't sound like much at first can be illustrated with a simple calculation. If your online store makes 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 sales killer.

Crawling: Slow-loading web pages are crawled more slowly and less intensively by the Googlebot, as it only has 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, a web page's loading time refers to the time measured in seconds between the call-up and the complete display of the browser's web page.

In addition to the term "loading time," the term "loading speed" or "PageSpeed" is also used. Therefore, if you search the web for the topic, you will find different names for the same phenomenon. The loading time of a website can also be divided into different measurement positions:

Time to First Byte (TTFB): The time between the website being called and the first byte loaded by the webserver.

First Contentful Paint (FCP): The time when a display element is first shown in the browser.

First Meaningful Paint (FMP): The point at which the user feels that the website has loaded.

Time to Interactive (TTI): When the website is finished rendering and ready for user input.

How can I measure the loading speed of my page?

There are numerous methods to determine the loading time of a website. For example, you could read your server log files or stop it manually. A slow page load is often relative, as every user perceives time differently. However, if you use valid data, you can better work on optimizing loading speed in the long run. In our article about different tools for website speed tests, you will find help for page speed measurement.

How fast does my website need to be?

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

You have no direct influence on these factors:

Bandwidth: The available internet bandwidth influences the loading time of your website. With a 3G connection and a smartphone, the website will build slower than a fast DSL connection.

Browser cache: If a user uses a browser whose cache has not been cleared for a long time, this may severely delay page loading because the computer's RAM is no longer sufficient to process the amount of data.

Client processing power: On older desktop computers and smartphones, page load delays can occur because building the DOM and executing scripts is slowed by insufficient memory and processor power.

You can influence these factors:

File sizes: The size of your web page 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.

Server processing power: When a web page is called up, the webserver processes the request. Here, the following applies: If less data has to be requested, the processing is also faster.

Suppose the website has a lot of traffic, and many requests are made simultaneously.

In that case, the main memory and processor performance can be overloaded and become a bottleneck for the loading time. In this case, you should adjust the capacities upwards.

Optimize page speed in a targeted manner

Create fast connection times

Before the webserver can process the web page call, you must establish the connection between the server and the user.

The time spent on this is called connection time, latency, or ping.

This can be measured with the Website Success tool from Ryte. Ideally, the latency is less than 100 milliseconds. If the connection setup takes significantly more time, measures can be taken to optimize it.

Setting up fast DNS connections for

the webserver to be found with the web page, the domain entered in the browser must be resolved into an IP address. Example.com thus becomes four numbers between 0 and 255 separated by dots.

So-called DNS servers are responsible for determining the domain. As a rule, a chain of DNS servers is required until the IP address is found out.

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

The domain provider or hoster can take over the change of the DNS entries.

CDN for Global ReachIf

it's important for your online business to have a global presence, you'll quickly find that connection times can vary dramatically depending on where the website is accessed from. This is because 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 are always a small number of nodes between the user's computer and the next server 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 region.

To use a CDN, you need to register with a provider. Although there are free CDNs on the web, you should carefully check the conditions under which the offer is free. Paid providers usually charge per volume of data that is used via the network every month.

Well-known CDN providers are:

Amazon Cloudfront

Cloudflare

Stackpath

wao.io

Use HTTPS along

time it was considered 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 webserver. In this process, 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 at all with an SSL certificate.

Also, SSL certificates have become the standard for security, user experience, and SEO ranking factor. So if you don't use an SSL certificate yet, you should do so. The certificate issuer Let's Encrypt even offers them for free.

Optimize the webserver for PageSpeed

When the connection to the webserver is established, it processes the request and provides the requested files.

This also calls server-side scripts that, for example, read content from databases and make it available for output.

Detecting bottlenecks in the infrastructure

a website loads slowly, it may be because the web server and its underlying infrastructure are overloaded.

This can have several causes, such as an error at the hoster or because the webserver 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 be measured with Ryte's Website Success tool, can also be helpful. If it increases significantly, there may well be a problem with the webserver.

Use server-side caching 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 several articles or view several products - i.e., call up several pages in their session. You can reduce loading times after the first-page load in this way.

In the settings of the webserver software - the most commonly used are Apache HTTP Server and Nginx - server-side caching can be activated and set up. If you don't have the necessary knowledge, you can ask your hosting provider about it or have caching and other PageSpeed measures performed by an automated cloud service (see below).

Use browser caching with the

the webserver does not cache help of browser caching, elements of your website as with server caching, but by a web browser.

Thus, when a new URL of your website is requested, all elements do not have to be loaded again.

This increases the loading speed.

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

Plugins for browser caching with WordPress

WP Rocket

W3 Total Cache

WP Fastest Cache

Manual activation of browser caching is done by adjusting the web server configuration (see above). You can enable one of two modules of the Apache server: mod_headers and mod_expires.

If you use mod_headers, you must add the following code to the .htaccess (source GitHub):

Header

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

The round brackets refer to the file formats that are to be cached. At the same time, the duration of the cache is specified with "age." The unit is seconds.

This example is the equivalent of 30 days that the cache should remain stored by the browser.

If you want to use mod_expires for browser caching, the following lines are added to the configuration (source GitHub):

ExpiresActive

OnExpiresByType 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."

This method allows you to specify an expiration time for each file type separately.

Use GZip compression

As described earlier, files can be processed and sent fastest when they are as small as possible.

This also applies to the code that is to display the web page in the user's browser. Like a zip file, this code can be compressed and thus made smaller. The compressed data is then unpacked in the browser.

For a long time, this method was viewed skeptically among load-time optimizers, because compressing files requires computing power from the webserver. Each processing power of the webserver in turn costs loading time. However, the benefit far outweighs the effort, so you should use it.

How can I compress files with GZip?

Using the most widely used web server software Apache as an example, we will show you how to enable GZip compression. The modules mod_deflate and mod_gzip are used for this.

1. the module mod_deflate is mostly preinstalled. With the following console command, you can check if it is already present:

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.

Now open "httpd.conf", the configuration file of Apache. You can usually find it 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

This specifies that the text, HTML, CSS, and JavaScript code will be compressed using GZip. Save the file and restart the Apache webserver. From now on, the data will be compressed by Apache.

Enable HTTP/2

By default, all files of the website (e.g. images and scripts) are loaded via the HTTP/1.1 protocol. They are downloaded one after the other over a separate connection. You can imagine this as if you wanted to order several pizzas and the delivery man would deliver each pizza individually.

This is of course impractical and slows down the loading process. With an SSL certificate, the webserver can be switched to the HTTP/2 protocol. Using HTTP/2, all files are downloaded over a single connection. In addition, they are prioritized in the process. Meanwhile, all popular browsers support the protocol, so you can work with it without hesitation.

Compress images

Images make up the proportionally largest part of the download volume of a website.

This is all the more true for online stores with many products and portfolio websites, especially those of photographers. So if you manage to reduce your images' file sizes significantly, you can dramatically increase page speed. On Ryte, we have already written an extensive article on image compression. Here is a summary.

Optimize all images

Images are important to make a website vivid and attractive for your users.

However, in particular, images bear the risk that your website's file size will increase enormously, and thus the loading time will be delayed. Therefore, you should only use images that are optimized for web use. In general: Photos and high-quality graphics should be saved as JPEG files and smaller graphics and graphics with few colors or transparencies as PNG files.

Further steps:

Compress your images before using them on the web page with an image editing program such as Gimp or Adobe Photoshop. Both programs offer a "save for web" feature for beginners.

This will automatically optimize the file size. Tools such as PNGGauntlet can further reduce file sizes by removing extra information.

Specify the appropriate image size in the source code: If a browser has to calculate the dimensions of the graphics itself, it may cost 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 camera or smartphone, they have a lot of additional information such as the place where you took the picture, the 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 both losslessly (similar to PNG) or lossy (similar to JPEG). It is even more efficient than the old formats and could therefore become established in the future. Not all browsers support WebP yet. Therefore it makes sense to store alternatives for WebP files in the source code and to include a switch. This works in the following example:

srcset="img/testimage.webp" type="image/webp">

img/testimage2.jpg" type="image/jpeg">

.jpg" alt="fallback image">

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 placed 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 high-resolution images of the best quality.

On the other hand, on mobile devices, websites are often accessed on the move and therefore not at the highest bandwidth. Due to the small display, the quality requirements are also lower.

Also, images are displayed in a different resolution than on the desktop due to the screen format. It, therefore, makes sense to differentiate between the output media and to create two variants of an image.

Similar to the previous example for WebP, you can also define switches in the website's code.

For example, CSS can be used to query the screen resolution and thus adapt the display to the output medium.

Set up lazy loading

Especially store operators and photographers 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 stores, because these are often the main start page or the start pages of the product categories.

However, many images are loaded in this way are only visible to the user when he scrolls down the page.

So it is not even necessary they 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 not loaded until 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 HTML document's source code line by line. All spaces or line breaks are read out as well. A superfluous blank space will certainly not negatively affect the performance of your website. Since a web page 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 all unnecessary comments in the source code

Remove all superfluous spaces.

Delete unneeded formatting, for example, if there is formatting without content in the source code like "

To avoid superfluous source code, you should always either insert texts into the website already formatted as HTML, use the CMS editor or insert the texts as plain text and then format them. If you insert texts directly from Word or other office programs into the CMS, they will be full of unnecessary source code.

Furthermore, some programs are called via the command line to remove all spaces and comments from the source code. If you want to use these programs, you should keep a copy for editing in any case, because the so minified file is hardly readable.

Reduce external scripts

Whether to share buttons or tracking codes, external scripts can be included on your website is very different versions and for different purposes. However, this makes you dependent on the availability of these scripts from another source.

If the webserver from which the script is retrieved is particularly slow, this will also slow down your website's loading time. Therefore, check whether you really need these scripts.

More tips:

Use only asynchronous tracking codes. They load after the page is rendered and do not interfere with page loading.

For example, use tools like Google Tag Manager.

In this case, you only need to include a code snippet for many different tracking variants in the page's source code.

This will affect the loading time even less.

If it is possible, you should store the scripts on your web server and not include them from outside.

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. CSS (Cascading Style Sheets) can be used to define formats and representations for the web page. A lot of source code is needed for these elements, which must be read out again with each page call. This costs time.

To reduce source code, you can offload CSS and JavaScript files. They will then be merged into one document. Only one call is then necessary for this. If the browser loads the file into the cache, the loading time can be reduced again.

This is how you can outsource JavaScript:

Display the source code of your website with an editor. Then cut out all the JS files and create a new text file where you paste all the code snippets. Save the file as main.js and put it on your server in the folder where all the other HTML files are located.

In the HTML code of the web page, remove the following commands:

and

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 by removing unnecessary whitespace, for example. These are also called "whitespaces". In this way, the source code can be reduced to only one line, for example.

Code snippet with spaces and line breaks present:

CSS code without line breaks:

CSS code without line breaks:

Again, keep in mind that removing spaces and comments will significantly reduce readability. Ideally, you should work with two versions: One version with all spaces and words that you can edit, and one version for display on the web page. So that you do not have to do double work with every change, you can also use programs for "minification", e.g.:

YUI Compressor or cssmin.js for CSS files

Closure compiler for JavaScript.

JavaScript and CSS loading at the end

Your web page is not fully displayed until all JavaScript and CSS files are loaded. To speed up the loading process, you can insert JavaScript and CSS only at the HTML code end. Even if the server is slow, the page load will not be affected for the time being. The ideal position for CSS files is, therefore, in the area of the web page. JavaScript, on the other hand, should be placed in the footer of the web page.

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 during page fetch.

Now, if you put buttons, icons, or backgrounds as graphics, a browser needs a lot of time to load your web page. The solution is to create all graphical elements except photos using CSS3.

This way, you reduce the source code. At the same time, the files can be displayed on all devices in the same high quality.

Use prefetching and prerendering.

When you use the prefetching technique, your browser caches certain web page elements before the page is fully loaded.

This allows images, graphics, or JavaScript, and CSS to be loaded without interfering with the rendering web page.

To prefetch a file, you have to adjust the source code. In this case, the attribute rel="prefetch" is set in front of the desired element.

Example:

Here the example is already loaded before another page is called. This shortens the loading time for the new page call. If you use the prerendering method, a complete web page is downloaded in advance by the browser and cached. This includes all files that are needed for the complete rendering.

The web page rendered in advance can be loaded almost without delay when it is called up. The loading time is reduced to less than 50 milliseconds. To implement prerendering, you need to add the following line to the source code of the web page in question:

For more details and insights on prerendering and prefetching, check out this post.

Reduce 301 redirects

301 redirects are useful 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. While the delay per redirect is not very long, it is noticeable. Every time a browser encounters a redirect, it has to call up a new URL. After that, it must first wait until an http request is returned.

If several 301 redirects are then made in succession, the loading time can increase significantly. Also, the Googlebot only follows a maximum of three redirects, so chaining redirects is also disadvantageous for crawling.

To avoid many redirects, you should document the URL structure or the construction of new URLs. The same applies to 301 redirects.

If you find several redirects, one after the other, you should lead the first redirect directly to the actual link target without the detour via one or more redirects when analyzing your website.

Avoid bad requests

When a client web browser accesses your page, requests are made for each resource to display the file. However, if these resources in the form of images or JavaScript files are not found, this leads to a chain of reactions that wastes loading time.

You can avoid bad requests simply by correcting incorrect files, specifying the correct path, or redirecting it to a new file.

Use AMP

Google offers webmasters with Accelerated Mobile Pages the possibility to load mobile websites almost without delay. For this purpose, the pages must meet certain requirements to be displayed on mobile devices.

Many CMS, like WordPress, allow the use of AMP with the help of plugins. You can find a detailed description of the technology and the implementation on the google website.

To date, online stores can not yet AMP. However, it is planned by the developers.

Further notes:

Homepage of the AMP project

WordPress AMP Plugins

Automated PageSpeed Optimization

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 is a hurdle for you, you can also 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 caches the web page while performing the measures 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 provides metrics for website monitoring and user numbers.

Provider Overview:

wao.io

Akamai

octopus.io

5 tools to measure the speed of the website

Google iscommitted to making the Internet faster. The search giant understands users' behavior very well and knows what experience they expect.

It's no coincidence that in 2010 the search engine included loading speed as one of the positioning factors and in 2018 extended this criterion to mobile searches.

A few months ago, the world's largest search engine announced that the user's experience on the pagewould be one of the leading classification factors from this year onwards.

To help sites that want to improve their speed, Google has created some tools that help diagnose the pages and point out the corrections that can be made.

We will show you some of them below.

1. PageSpeed Insights

This is the most popular page speed test tool. PageSpeedInsights is a free developer-driven resource offered by Google.

Using it, it's straightforward, enter the URL you want to test (it can be any website, including the competition).

The platform then performs an analysis and presents a score from 0 to 100 for desktop and mobile device performance.

The diagnosis also shows how long it took to load the website's elements and what measures you can take to improve the speed. The closer to 100, the better. It means you have to fix fewer items.

2. Lighthouse

Lighthouse is an open-source software offered by Google and used to audit websites.

It can be run as a command-line tool or a Google Chrome extension (with a more user-friendly interface).

It analyses not only the speed but also all aspects of the quality of the website. To do this, you must enter the URL you want to audit so that the platform will present a score and improvement tips for each of these requirements:

  • performance;
  • accessibility;
  • best practices;
  • progressive web applications.

3. Chrome User Experience Report

The Chrome User Experience Report is also a Google tool for developers to evaluate the site's user experience.

Unlike the other tools, this one requires a little more technical knowledge to work with the codes.

The tool collects actual data from Google Chrome users and displays average website data, including site speed.

Therefore, developers can compare their performance with the average and evaluate which points need improvement.

4. GTmetrix

GTmetrix is a well-known tool to measure the speed of websites.

After analyzing the page, it indicates, the platform presents a percentage score for speed, load time, and total page size, in addition to displaying market averages as a comparison.

Then you can see the recommended settings to improve the loading speed.

5. Pingdom

Pingdomis also one of the most popular website testing tools, especially within the WordPress community. The disadvantage is that it is paid, although it offers a 14-day free trial period.

The platform is exciting.

Analyses are carried out in different parts of the world and report on the availability, page loading speed, and performance of the main websitetransactions.

Also, the tool points out opportunities for improvement and sends alerts when problems arise.

Conclusion

A website has many possible settings that you can turn to improve the loading time of the page. In this article, you have learned about a few possibilities. Some methods are straightforward to implement even by beginners and SEO novices. Thus, everyone can make his website faster and provide for happier users and search engines.

Use the online HTML editor to maximize your web content composing efficiency.

Share