Page Loading Speed Matters to SEO

November 16, 2017//3,231 words

One of the elements of any website both good and bad is the loading speed of its webpages. Consider these facts:

I could go on. It’s easy to believe in these stats as well as imagine many more similar scenarios.

It doesn’t end with the users experience, however. In fact, consider this:

Google’s ranking algorithm will penalize sites that deliver a bad user experience due to long loading times.

That’s right, so if your website takes say 10 seconds to load, it probably won’t even display very high on a Google search but if someone were to still stumble upon it somehow they would leave anyway after waiting for up to 6 seconds. Maybe some individuals are extremely patient and stay for the 10 seconds it takes to load your page. For those that do, however, there is already a 70% deduction of a possibility of a conversion and a 100% reduction in sales (according to our numbers from above).

Now, I’m not saying this is your site. Hopefully it’s not, but if it is, you’re not alone – and you’re in the right place.

We are going to walk through some common issues found in slow websites, tricks to improve an already fast page, and at the end I’ll give you a couple tools that will help you measure your site and provide feedback.

 

COMMON ISSUES SLOWING DOWN WEBPAGES

There could be a multitude of issues affecting webpage speed. This might happen because of when the website was created, the platform or framework that the site was built on, or the web designer him or herself.

No reason to fear. If you have access to the back-end of your site, you will be able to correct every issue. The list of factors possibly effecting page speed is long, but I want to list just a few that I notice in most of the websites I consult.

 

DEFER PARSING OF JAVASCRIPT

Or in common words – delay the Javascript from being loaded until all HTML and CSS is loaded.

Throughout the years there have been some clever Javascript creations and I don’t know about you, but for me it’s tempting to want to outfit my site with all of it. A couple of popular websites that could benefit from this would be ESPN (over 800kb) and Hubspot (over 300kb). See their homepages below.

page-loading-speed-seo

page-loading-speed-seo

Now, I don’t know if you’re a sports fan but I tell you I have basically stopped visiting ESPN’s website because I’m tired of how long it takes to load. Why is that? Because of the incredible amount of Javascript due to the various graphics and ads. If they deferred that Javascript then at least I could get to the page quickly enough and begin reading content while the script continues to load.

So, how do we go about solving this problem? There are a few options including those for non-coders and coders alike.

 

REDUCE THE AMOUNT OF JAVASCRIPT ON PAGE

Ya, this hurts. And it’s the not-fun but most effective solution. I know, I know, the animations on your site are really cool. But what do they add to the user experience on your site anyway? Heck, I remember back in the day (not too long ago!) when it was cool for your mouse to have a tail following it everywhere around the screen:

page-loading-speed-seo

Yes, that mouse sparkle offered on Blogger was pretty dope.

In all seriousness though, give your pages a good evaluation as to whether or not the features or programs are beneficial to you reaching your goals. If they are, consider moving those features to non-landing pages. While you should try to get ALL of your pages onto the front page of Google, it’s not realistic or quite frankly, important, especially if you have designs that are beneficial to your website’s, product’s, or sales-funnel’s success.

Focus on those landing pages including your home page and blog posts. Those are the key. Keep them clear and direct. Save the mouse sparkles for another page.

 

DEFER LOADING OF JS FILES

Whether you have a lot of Javascript or not, it can and should be deferred. We touched on this a little bit earlier – simply, it is changing the order that the browser goes in to load the files. Ideally, the HTML will be loaded first, followed by the CSS files, and the JS should be loaded last.

A lot of this can be automated. If you are using WordPress, you can install a plugin such asWP Deferred Javascripts or if you are using Joomla, a good option might be Javascript Async and Defer. I have learned, however, that you can’t put your full dependency on these plug ins. You should know what is happening behind the scenes in case these plug ins miss something.

At the code level, you need to be sure that your Javascript is in a seperate file. Ideally, for the sake of coding best practices as well as site performance and speed, styling and scripts should not be done in-line but rather externally and then referred to in the header of the HTML page.

In this case, perform the Javascript like normal, however, when you link to the file in the header, it should be as so:

 

<script src=”example.js” defer></script>

 

Notice the only difference is the word “defer” added before the “>.” Refer to this guide.

Input code command before </body> tag

I have learned with coding that the first solution does not always work. Yes, that is because I would not consider myself a professional coder as of yet, but assuming you’re not as well, here is another solution for this problem and read this great guide by Patrick Sexton.

Instead of putting “defer” into your link to tag, input this code paragraph into your HTML file immediately before the closing body tag:

 

<script type=”text/javascript”>
function downloadJSAtOnload() {
var element = document.createElement(“script”);
element.src = “defer.js”;
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

 

Note: Replace the “defer.js” with the name of your Javascript file.

The code above tells the browser to not load the javascript right away but to wait until the entire document is loaded first.

Try the 3 scenarios above for deferring your Javascript loading and reducing your site’s styling to only what is beneficial to your end goal.

 

OPTIMIZE IMAGES

One of the heaviest components of a website is it’s images. This is tricky because I have first hand experience working with clients who just paid for a fancy photo shoot resulting in thousands of high definition photos. Naturally, you want to get these images on your site in all their high resolution and glory. However, high resolution is a direct enemy to speed because high resolution equals large file size.

This is another scenario where you need to consider the purpose of your site. There are plenty of sites out there that need high definition photos or video to display work. In those scenarios I would refer you to our Javascript example – keep your landing pages clean! Get people on your site and then lead them on the path to your artwork.

The general rule regarding image size is that no image should be over 100kb in size. We see so many images over 1,000kb (1 MB) now a days with our high resolution phones and cameras that 100kb sounds impossible. It’s not, and you can actually hardly even notice the difference when viewing the photos online. Look at this comparison of this beautiful landscape:

page-loading-speed-seo

page-loading-speed-seo

The image on the top is 1.45 Megabytes. The one below is 11 kilobytes (.75% of the size). Notice an incredible difference? Of course not, but I’ll tell you what, you’ll notice a major difference if you optimize your images like this all over your site. There are many tools online that can help you with making your image files smaller. I would recommend this onefrom jpeg-Optimizer. You will be able to choose what size to make the new photo, which leads me into my next important step for optimizing images on your website:

 

SERVE SCALED IMAGES

Stay on the jpeg-Optimizer tool, and when you choose which file size to make the new image, make it the exact size that you will need to serve it’s purpose on your site. Non-scaled images are those that are saved within the site’s file manager in their original size but are reduced or modified when displayed on the webpage. Using CSS code to reduce the file size of the image negatively affect the speed by

  1. Having to add CSS and increase that file size
  2. Having a larger image saved on the website when you could get away with a much smaller one

That’s all. This was an easy one – take the few minutes necessary to get this accurate. If you are taking the time to read this article, then you must care about SEO, so don’t overlook this easy tip!

 

MINIMIZE FILE SIZES

Minifying your HTML, CSS, and Javascript code is another simple and on many platforms automatic method to use when reducing the overall size of your page.

To illustrate the concept of “minifying” your code, check this paragraph of code out:

 

<body>

<h1>Website Speed: It Matters More than You Think</h1>

<p>One of the elements…</p>

<p>I could go on…</p>

<h2>Common Issues…</h2>

<p>No reason to fear…</p>

</body>

 

This code is “pretty.” It’s organized. It’s structured. It’s layed out nicely for the next coder to come along and be able to make changes.

But, it’s not minified. Take note of all the white space to the sides of the text. All of that, even though it’s white space, is still part of the loading process for the browser.

Now let’s like at the minified version:

 

<body><h1>Website Speed: It Matters More than

You Think</h1><p>One of the elements…</p><p>

I could go on…</p><h2>Common Issues…</h2>

<p>No reason to fear…</p></body>

 

Now, if I was more adventurous and decided to write 100+ lines of code for this example, you would see how it normally looks – going fully from side to side. You get the idea though… no white space.

See this snippet of code:

page-loading-speed-seo

Looks like a mess, right? Don’t worry coders, if you wander upon a file like this in a website that you’re working on, use this tool to “unminify.”

So how do you get your code minified without having to go line by line through your code yourself? Use the following tools depending on your platform:

Note: For CSS and Javascript, just Google those respective minifiers and you will see many results.

Even though you may be saving a mere 10-20 bytes by doing these steps, don’t overlook them. Every little bit gives you an edge over your competitors who aren’t taking the time!

 

MAKE FEWER HTTP REQUESTS

Having a lot of HTTP requests can be the result of simply having had a website for a long time and the natural updating and adding features to your site. It can also happen when you get carried away with plugins, features, and cool effects.

HTTP requests refer to how many different files need to be loaded in order for your page to function properly.

Each plugin typically comes with it’s own CSS and Javascript files.

Note: Coders beware of this as well, downloading and installing components or APIs for your site come with their own Javascript and CSS files as well in order for the component to run.

Ideally, what you should do is reduce your HTTP requests to the number of different files types you have on your site. For example, most sites have 3 (HTML, CSS, and JS). Go for 3.

Do NOT take this literally – to reduce the HTTP requests to 1. You should not seek to combine all of these different types into one page for 2 reasons:

  1. You should set different cache lengths for each file type
  2. Try parallel loading your bytes

For our purposes, we want to combine our CSS together and our Javascript together. Remember to link to the correct file name once you have this completed.

 

MAKE YOU FAVICON CACHEABLE

You know your Favicon – the cool little pixelated image that shows on the browser’s tab for your page.

page-loading-speed-seo

Don’t load a full-sized image into your favicon.ico file. In doing so your favicon could end up being say 400 kb in size or perhaps 1 mb or more! You should shoot for a file size of 1 kb for your favicon. Yes, you heard me right!

This is a simple step. There are many free tools online that will help you with this. Tryfavicon.cc or Dynamic Drive. These services will help you to create a new image or allow you to upload and edit a current image that you have on file. Easy. And fun!

I trust that you feel ready now to make some improvements to your site. If you have a large site, it could be daunting thinking about having to go through and optimize all of your images. Or if you have a new website and you thought of a really cool feature to add to your landing page, it could be discouraging thinking about having to go back to the drawing board.

Stay focused. What is the goal of your website? Keep that in mind. And don’t pick and choose or overlook certain elements that should be optimized – be better than your competition.