Resources

What is Page Loading Time?

javascriptGzip compressionSEOLoading speedbandwidthpage load timecachingbounce ratejavascript and cssPage redirectshow to check page load timehow to improve page load timereduce page load timeslow page load timew3c recommends
Updated November 2, 2020 Christine Afandi

Page loading time is the amount of time measured in seconds that it takes for a browser to request, fetch, and display a web-page from the server(s).

 

One should not be surprised when different pages on the same website have different loading times. Page load time differs also depending on what browser one is using, the content of the page, the size of the media used, server location and server power, and so on.

 

Why is page loading time important?

A fast page loading time means a good user experience, which in turn improves your SEO. This is because Google favors sites that have faster page load times and awards them with a higher ranking. The faster your speed score, the better your user experience, thus the higher your Google Rank.

 

For desktop, Google recommends 3 seconds as the maximum page loading time for a website. But on mobile devices, the time that Google recommends is less than a second.

 

Also, a decreased page loading time can lead to a lower bounce rate and improved sales, as users stay longer on the page. And faster page loading time and helps with the number of pages Google can crawl and index on a website in one session.

 

How to check for page load time

There is a multitude of online tools for page speed testing, like the Wiredelta Website Analysis tool, Google Lighthouse, or GTmetrix, and they are all free. So, one should then use the these results as a starting point in improving their performance and user experience.

 

page loading time test

 

But, remember that each of these tools uses different methods to check your page loading time, and the scores might differ. So, remember to use more than one tool and also check regularly during your optimization process. However, if you think you are doing everything right, yet your page loading time still didn’t improve, you might want to check your hosting servers.

 

Can hosting servers affect page load time?

In general, server speed and location are significant factors when it comes to page load time. One can spend time and resources optimizing their website but if the servers are slow, it is a waste of time. Therefore, before you choose a hosting service, make sure it can support your amount of traffic first.

 

Other times, when everything was optimized on a website, and the servers are powerful enough the loading speed results are still bad. And this can be because of the location of the server that hosts the site. The further the user is from the server location, the slower the page load time.

 

How to improve page load time

1. Use caching

Whenever a page loads, the browser had to download the various resources within the page, such as source code files like CSS, Javascript, as well as media files like images. Use caching to save some of these files in the browser and reduce the amount of downloading necessary when loading the page. Caching thus enables one to decrease not only page load time but also bandwidth.

 

2. Optimize your images and other media

The more images and media you have on a page, the more the browser takes to load them. So, the smaller the image, the faster your page will load. But, how do you do that without compromising your media quality or your responsiveness? Simple, use compression tools such as TinyPNG and the right format, that supports scalability.

 

In other words, choose your format wisely. For example, PNG and JPEG are lightweight image formats. But neither are great for logos, that need to be pristine no matter their size or screen resolution. So, instead, use SVG for logos, PGN for transparent images, and JPEG for regular photos.

 

3. Avoid using too many page redirects

In normal situations, when we access a link, the browser sends the request to the server, the server confirms the URL and then the browser fetches and displays it. However, in case of a page redirect, the server will direct the browser to the new URL location where the browser will again request a fetching response from the server.

 

This means that because of the redirect, the response time takes twice as much, thus slowing down the overall page loading time. So, one should try to avoid redirects as much as possible or use them sparingly.

 

4. Enable GZIP compression on your site

Similar to image optimization, we can decrease the page loading time by using GZIP compression and reducing the size of the file or overall page size. This way, the browser has less to downoad, thus reducing the loading time. In fact, through GZIP compression, one can save up to 80% bandwidth.

 

5. Optimize your Javascript and CSS files

First and foremost, always minify your Javascript and CSS code to save space (bandwidth) and reduce page load time and avoid inline Javascript and CSS files. Place your CSS and Javascript files in external files as inline Javascript and CSS are loaded every time a browser makes a request, overriding caching directives.

 

This means that every time the HTML document loads, your CSS and JavaScript files are downloaded increasing your bandwidth consumption and loading time.

 

Also, script references for Javascript or any other language should be at the bottom of the HTML document, before the </body> tag. Script code placed in the header section of the Html document will stop everything else below it from loading, thus increasing page load time.

 

Finally, W3C recommends that we place style sheet references in the Html document <head> as it helps decrease page load time, by making style rendering progressive. In other words, by establishing the styling rules from the start, the browser needs to read and understand them only once.

 

Then, when it encounters an element, all it has to do is identify it’s time – f.ex. Heading 1 – and it already knows how to display it. Otherwise, each time the browser encounters an element, it will have to identify the element, then is styling, and only then it can display it.






Leave a Reply

Your email address will not be published. Required fields are marked *