Beginner’s Guide to Page Load Speed Optimization: Best Tips&Practices

Get a great insight into page load speed optimization process. You will learn how to increase page load speed and get a higher search ranking.

Chances are you’ve noticed this before: some website pages load pretty quickly, while others take forever to do so. Sometimes it gets on our nerves and… bam! We snap, close the page and promise ourselves to never ever go back there again.

Whether you’re opening a mailbox (Gmail.com), a web search (Bing.com) or a social network (Facebook.com), your browser needs some time (mere seconds) to load the website components: images, text and other content. The time a web page needs to load all the website components is called page load speed.

Page load speed is a very important metric, it affects not only website usability (the ease of use), but also SEO. Bounce rate, page depth, and time spent on site depend on the page load speed as well. Let’s define these key metrics.

Page depth (or pageviews per session) is an average amount of pages, viewed by a site visitor during a single visit. It is usually calculated for a certain period of time (e.g. month, week, or day) by dividing the amount of pageviews by the site visits.

For example, there were 50 visits and 514 pageviews on a website during the course of a week. Therefore, the average page depth on the website is 514/50=10.3.

Bounce rate is the percentage of visitors who viewed only one page on a website, or left it from the same page they entered. Learn more about bounce rate from Google Analytics Help.

Time spent on site may indicate the quality of the information presented on the website. Before making a purchase, customers browse through different offers from various companies. They will probably choose the one that has its website organized well, with all the products and prices in the right place.

All these metrics are usually considered behavioral factors. The faster your website page load speed is, the better these metrics will grow.

Average website or page load speed shouldn’t exceed 4 seconds (depending on the actual page and its content). Ideally, it should be under 2 seconds. The rule of thumb is “the faster the better.” Of course, your website can load slower than that – 20 seconds or even more, which is not a problem by itself. If the page loads the most important content during the first 2 seconds, the rest of it can be loaded gradually (unnoticeable to your visitors, while they read into the main content).

The main factors affecting your website page load speed are as follows.

Speed of Internet Connection

Users with slow Internet connection tend to suffer more than their happy counterparts with high-speed connection. They often have to wait for their browser to load the pages.

There is nothing webmaster can really do here. Making your pages load faster by getting rid of certain “heavy” content is not always a good tactic too. This way you’re risking the quality of your content too much. There’s a solution after all – load your page asynchronously, element by element. Give your visitors what they came for in the first place, plain and simple, and then load all the fancy images, scripts, and libraries.

Internet connection speed is getting faster each year, therefore people who load pages for 20-30 seconds constitute a soon-to-be-extinct minority.

Website Hosting Properties

It’s not uncommon that the workload of the website hosting and the equipment used affect the page load speed. For example, if the equipment used by a hosting service was designed to host a limited number of websites, anything above that number will decrease overall page load speed for the hosted websites.

Additionally, the Internet channel bandwidth can be not high enough, which will again result in the lower page load speed, thus affecting all the hosted websites.

Regular users cannot do anything about the hosting – neither change their characteristics, nor increase the page load speed. Website owner is the person who chooses where to host a website. Users will simply close the forever loading website and go back to Google or Bing for all they care. Probably to find a site which loads faster.

Bad hosting is a rare thing these days. More often, the problem is in optimization and choosing the right hosting service for your needs. It doesn’t require a lot of knowledge to realize that a small-scale hosting can’t host a social network properly. Often a CMS is set up the wrong way, eating up a lot of resources. The good news is that you can fix both cases: in the first, you need to choose the right hosting service, the second requires some code optimization.

Web Page Weight

It’s pretty obvious – the heavier your page is (in kilobytes), the longer it will load in user’s browser. If a webmaster wants to optimize page load speed, the first thing to do would be decrease the page weight (in kilobytes).

What are the heaviest elements of the page? These are usually graphics: high-resolution images can be very heavy and therefore load slower.

Page load speed is usually calculated based on the speed of the longest1oading element. Until all these elements are downloaded by browser, the page won’t fully load. That’s why any website performance optimization process should start from graphics. More precisely, webmasters should render images with lower resolution and size. Sometimes they can even go as far as changing the image or picture format, all for the sake of faster page load speed. In addition, you can always use the “important content first” method of loading, described above.

Other tricks include swapping the image (graphics) with a colored background and load the image on demand (only when it’s clicked on).

Media players (audio or video) can also increase page load speed, even if they’re embedded from the other resources outside of the website hosting. Various flash animations and fancy scripts may also slow down your page, so watch out. Whenever you embed or enable a script/style through “iframe” and “widgets”, ALWAYS check your page for consistency. Provide links only for those third-party resources, which are already optimized and can be loaded asynchronously.

Flash animation is considered obsolete nowadays, it’s hardly used anywhere and there’s not really much to say about it.

That brings us to an important conclusion: the less stuff your page has (high-res images, pictures, screenshots, videos etc.), the faster it will load. Ideally, it should have just plain text.

Google search engine prefers “lighter” websites and often ranks them higher, as they allow visitors to get more information in less time (time is money, and Google is no exception to this rule).

For its page ranking algorithm, Google takes a few parameters into consideration:

• how useful a page is for visitors;
• spam and hidden insecurities;
• how it renders in various browsers.

However, one of the main factors is page load speed. From Google point of view, slow websites are pure evil, and it easily tanks them in search ranking. For that purpose, Google even created a special tool, which measures your website load speed. This tool is called PageSpeed Insights, check it out here.

How Google PageSpeed Insights works

In order to check your website load speed, just paste your website URL into the box and hit “Analyze”. The service will instantly show you the results, in two versions – mobile and desktop. Next to the score, you can see the image of how your website actually looks like on PC or smartphone screen. You will also get an overall performance score for each version, on a scale from 0 to 100 (higher score means faster page load speed).

Below the score, you can see the issues with page load speed and useful tips on how to fix them. There are three groups of issues, each has different color:

• red – critical issues. These elements are essential to optimal page performance, and you should fix them first;
• orange – less important issues. You may want to consider fixing them, although not right away. Orange issues are more like warnings, which indicate that there are some problems with page load speed;
• green – these elements have passed the rules and do not require any attention.

The overall score is displayed in one of the colors: if the result is more than 90 points, your site is considered fast; between 70 and 90 – average; anything below 70 points is slow, which means you need to optimize your page immediately.

How to Optimize Page Load Speed

The very fact that you’ve just analyzed your website using PageSpeed Insights means that you’re on your way to improving your page load speed. Yet, Google recommendations are not always useful. Every website optimization process starts from the validation of the website itself.

Why is it so? Because the code (especially if it was written a long time ago) tends to carry a lot of mistakes in it, which a browser needs to process. More mistakes means slower page load speed. The same can be said about outdated HTML elements. To find out if your website has such problems, check it with validator.w3.org and fix whatever needs to be fixed. When it comes to slowing down website performance, outdated CSS elements can be even worse than HTML.

Now, when your site is validated, we can move on to something more interesting, as page load speed issues can be caused by many things, such as:

• server settings and configuration;
• hardware;
• software;
• CMS (content management system).

What’s even more complicating is that many different things can cause the same problem. Let’s take a look at some of the most common website problems:

Slow Server Response

I’ve already described this one before, but it’s too important to ignore. The problem can come from both server itself and the software. However, a simple check can point you in the right direction: if the main website loads slowly, but at the same time single PHP files load quickly, the reason is slow engine scripts. The heavier your CMS is, the more chances that the problem is in it. However, you may also want to check the plugins that you are using, especially if it’s an unknown or custom plugin. To do so, try to test your website twice – first time with a standard template, and then with all plugins disabled.

In order to get a higher score in PageSpeed Insights, you should shrink the size of each file on the fly. You can also set an expiration date for each file, which means it won’t be requested twice and a cached copy will be used instead. In order to fix this, enable deflate and expires modules on your server (if it’s Apache), modify .htaccess file.

Using Heavy Images

Despite the fact that I’ve already mentioned this issue a few paragraphs above, it requires more explanation. Many people tend to ignore this fact, but you’ve got to face the truth – most page load speed issues come from heavy images. When analyzing a page, Google algorithm uses special libraries which check how well an image is compressed and if it can be further optimized. Don’t wait for PageSpeed Insights to pinpoint the problem for you, run all your website images through optiPNG(offline software), or online services like tinypng.com or other similar tools, which are there to help you optimize your images.

Slow JavaScript

Even if you’re not a developer, you can still improve the code and make Google feel happy about your scripts. To do so, open the script in any text editor and delete any commentaries, excessive tabulation, line breaks etc. The code might not look too pretty on the outside, but here we’re primarily concerned with the simplicity and page load speed.

Enabled Scripts and Styles, Which Slow Down the Loading of Main Content

This is rather debatable, but all we know is what Google wants. It wants content first and CSS and scripts second. Therefore, try to move the scripts to the bottom of the page except for jQuery library, which should always precede any other JavaScript code, as well as any code that should be executed before the main content is loaded. You may move down the CSS too, but I wouldn’t recommend that, because this way you’ll have your <head> tag styles enabled. Still, you can try to make them load faster by splitting the heavy CSS file into a few smaller ones, around 100 Kb each. Additionally, you should ensure that browser loads them all asynchronously. These tips are mainly for desktop version of your website.

If we’re talking mobile version, there are a few differences, since mobile browsers aren’t the same as desktop. You can get more points for your mobile performance if you create a mobile-ready version of your website. Mobile-ready version is not a recommendation anymore, it’s a requirement. Google will easily derank your page in search results if it doesn’t have a mobile-ready version yet.

Page Load Speed Optimization: Conclusion

If you consider all these tips and fix most issues suggested by PageSpeed Insights, you can get up to 100 points. It’s not all that impossible. Still, even a perfect 100/100 score in PageSpeed Insights doesn’t mean that your website will climb to Top-3 search results. But anyway page load speed optimization is really IMPORTANT!

What’s more important is that your visitors will have a nice experience and are more likely to enjoy your website, even on slow devices. It’s all people after all, isn’t it?

Even if Google doesn’t give you a higher ranking, it can lower the ranking of your competitors, which will automatically place your higher. How cool is that?

The right thing to do would be share this article with your friends on the social networks – just click on one of the icons of social media, it’s that easy.

If you have further questions on the subject, please write them in comments – I’ll be glad to answer.