Ultimate Guide To Website Page Speed SEO

As users from Mobile Device has a significant increase over the last couple of years; Google is very strict these days on the page speed issue. They even officially announced that Page Speed is one of the top ranking factors from the other 200 ranking factors Google consider to rank a website.

Besides the ranking stuff, the faster website has direct relations with more page views and a low bounce rate. Google has found that a 60% increase in pageview & 35% lower bounce rate for the websites that load within 5 seconds or less.

Following that, your website must be responsive (mobile friendly) and faster while loading to do better in SEO.

See! If there ever was low hanging fruit, it’s page speed. TY @maileohye. #StateOfSearch pic.twitter.com/pmfav0FhYh

— John Peterson (@johnpetersontx) November 14, 2016

But, how would we know whether our website is loading faster in Mobile?

Luckily there are some free tools available, using which we can check the page speed of our websites. Even they are giving us suggestions of which particular files to tweak our website and what’s affecting the most while loading a website. Here you go:

Tools To Check The Page Speed Of a Website

All the Tools are free to use and I have tested the most personally. So move on –

1. Google Page Speed Tool for Desktop

2. Google Page Speed Tool for Mobile

3. YSlow – A Plugin/Extensions for Chrome/FF/Safari & Opera.

4. WebPageTest – To test your website’s speed & performance from multiple locations of this world.

5. GTMetrix – Get Site Speed Score & Suggestions to improve them.

6. Pingdom Page Speed Test – Monitor your page speed for free.

7. Google Analytics – Get Average Page Loading Time for all the top URLs of your website along with Suggestions.

Besides, WP Rocket (Premium) – which I personally use these days a lot, has been very effective for me. You can try this plugin to fasten your website as well.

Though, the score is slightly different on each tool as each tool test the site using their own algorithm. But, use al least 3 page speed tools mentioned above to have the best conclusion about your page speed.

Pro Tip: 

I would recommend using Google Analytics (I will show you, how to, later in this article), Google Page Speed Tool and GTMetrix to analyze your Score & Page Loading Time and understanding what to optimize for better performance.
So, what is the recommended speed score to target? What should be the least out of 100? Lets talk about this and find the best score as our goal.

What Is The Ideal Page Load Time or Score?

In the SEO world; there are some contradictions about the Page Speed Score and Page Loading Time. Some are asking to follow the score and some are asking us to focus on the average page loading time than the score.

To me, leveraging your Page Speed Score & Page Loading Time both will improve your website for better ranking, low bounce rate and more conversions at the end of the day.

Usually, Score and time are co-related. I mean, if you have faster loading site; apparently your speed score will be higher.

According to Doubleclick; 3 seconds are probably the best benchmark to target. Check the image below:

5 seconds are the highest benchmark and your website’s homepage shouldn’t be taking more than this. Period. Usually, a homepage have more data, widget and scripts than the other pages of your website. So, optimizing for homepage will eventually effect on our internal pages too.

Pro Tip: 

Make sure your website’s homepage loads within 3 seconds and internal pages loads within 2 seconds or less.

So, how to optimize website page speed & get a good score and ultimately get a faster loading site ( that loads within just 3 seconds)?

How To Speed Up Your Site & Have a Good Page Speed Score?

Lets optimize our official site and learn the step by step guidelines on how to make it faster than ever. Start from here –

1. Check your existing score & get suggestions about where to improve (as most tools are offering it free).

Login to your Google Analytics Account, go to the “Behavior” Tab, then switch to “Site Speed” and then click on the “Speed Suggestions” tab. Here is the data based on “Day” –

What I love the most of Page Speed analysis by Google Analytics is – it analyzes all the top pages of your site and show you which particular pages are taking long time to load and what are their scores. But you are welcome to analyze it using GTmetrix or Pingdom as well.

You see (in the image above), my homepage is taking more time to load than the other pages. It’s because, homepage has more data, scripts, content blocks and images than other pages. The page speed score of my home page is 58, and taking 4.25 seconds to load and Google is giving me 7 suggestions to optimize my homepage to increase the page score.

What else you need?

2. Click on the “7 Total” suggestions on the “Page Speed Suggestions” column and check what Google suggests you to do.

3. Here I found a list of crucial elements that are causing the slow load time. Just click on the “Show how to fix” tab (collapsible) and you will find everything to work on. Whats Google is suggesting me to tweak included –

• Optimize Images
• Eliminate render-blocking JavaScript & CSS
• Reduce server response time
• Minify JavaSript
• Leverage browser caching
• Minify CSS

It is worth mentioning that; every website is different and your website’s suggestion might be slightly different from this. But to my experience, 80% of the website’s loading time is affected by the reasons figured out on the list above. So keep following this guide ahead.

Note:

I am going to cover all the suggestions from the list above and try to solve one by one. Will focus mostly on WordPress CMS based websites and solutions here. But the technology behind of each steps might be useful for other CMS/Codes too.

Optimize Website Images

Lets check what are the sets of images Google found un-optimized. Here are some samples of Google Suggestions:

• Compressing and resizing https://latenightbirds.com/…ads/2016/06/PPC-Campaign-For-Clients.png could save 106.3KiB (98% reduction).
• Compressing and resizing https://latenightbirds.com/…16/06/SEO-Traffic-for-LateNightBirds.png could save 51.9KiB (94% reduction).
• Compressing and resizing https://latenightbirds.com/…content/uploads/2016/06/seo-for-tech.png could save 46.3KiB (99% reduction).
• Compressing and resizing https://latenightbirds.com/…ntent/uploads/2016/06/seo-for-travel.png could save 43.1KiB (98% reduction).

What we can do is – compress and resize those images using Photoshop  or using any online image resizer tool or using any WordPress plugin which will automatically compress and resize your website images.

To do this with Photoshop, just open your image with Photoshop, then go to File menu and from the dropdown menu click on “Save For Web” option. a new window will be opened where you will set the “Preset” (On the right upper corner). Set your image preset as “JPEG Medium” always and save the image. Re-upload that processed image again on your Website.

To Do this with a Image resizer Tool, just go to TinyPNG and upload your images. Download the processed image and reupload on your website. Here are some images I have resized with TinyPNG and the final images were 72% compressed and became half the size of original image (with any quality deteriorated).

To Do this with a Plugin, use Smush WordPress Plugin. One of the best Image resizer plugin I have ever used for WordPress. On the free version, you can compress 50 images by just one click. So, every after 50 images are processed you have to run the smashing again.

Pro Tip: 

From now on, when you have to publish any image on your website, go to TinyPNG, resize/compress the image and upload that processed image on your website. Understand the size required on your website and make your image so; rather than uploading way bigger image and letting your theme auto resize that.

Fix Render-blocking JavaScript & CSS

What Google Found on this section is as below –

• https://latenightbirds.com/…-includes/js/jquery/jquery.js?ver=1.12.4
• https://latenightbirds.com/…s/jquery/jquery-migrate.min.js?ver=1.4.1
• https://latenightbirds.com/…s/frontend/add-to-cart.min.js?ver=2.6.14
• https://latenightbirds.com/…dors/woocommerce-add-to-cart.js?ver=4.12
• https://latenightbirds.com/…themes/salient/js/modernizr.js?ver=2.6.2
• https://latenightbirds.com/…udes/js/jquery/ui/core.min.js?ver=1.11.4
• https://latenightbirds.com/…es/js/jquery/ui/widget.min.js?ver=1.11.4

Let me first that what is render-blocking JavaScript and CSS? 

Well, JavaScript and CSS are essential part of our website’s coding structure. Without JavaScript, we won’t get the right funcionality in many cases. And except CSS, we can’t expect the awesome designed and styled website. But, sometimes, our developers put some conditions on code and thats why above the fold contents will also need to load JavaScript and CSS first always and then to load themselves (contents), where this is not actually necessary all the time.

This kind of conditional JavaScript and CSS actually be called Render Blocking JS and CSS.

So, how to fix this issue? 

Use Autoptimize WordPress Plugin and it will fix the render blocking issue for you.

Install this plugin, go to the Autoptimize Settings and select the three options they showed you on dashboard named HTML Option, JavaScript Option and CSS Option.

Reducing Server Response Time

Google are showing a message here for me that, our official website’s server response time is 1 second. Here are the message –

But Google Developers are recommending us to keep the Server Response Time under 200ms. 

So, how to reduce Server Response Time? 

There are three steps to make it happen.

– Combine all of your external CSS file into one file.

– Combine all of your JavaScript File.

– Enable Lazy Loading for image file so that content loads quickly and image loads slowly.

– Check with your Web Hosting. Upgrade to SSD/Dedicated server if possible.

Except for Hosting/Server, all other three options mentioned above can be fixed by Autoptimize Plugin I mentioned earlier.

JavaScript Minifying

Google Page Speed tool is showing me following JavaScript Files/links to tweak –

• Minifying https://latenightbirds.com/…ent/themes/salient/js/init.js?ver=7.5.02 could save 27.1KiB (27% reduction) after compression.
• Minifying https://latenightbirds.com/…emes/salient/js/prettyPhoto.js?ver=7.0.1 could save 3KiB (33% reduction) after compression.
• Minifying https://latenightbirds.com/…s/dist/js_composer_front.min.js?ver=4.12 could save 739B (13% reduction) after compression.
• Minifying https://latenightbirds.com/…themes/salient/js/superfish.js?ver=1.4.8 could save 564B (23% reduction) after compression.

How to solve this issue?

Like the other solutions above, Autoptimize WordPress plugin will help you Minify the JavaScripts file for you.

Leverage Browser Caching

Some date do not need to be load every time a visitor visit your website. The logo, CSS files, Fonts, Google Analytics JS and third party scripts can easily be loaded from the previous data stored on the visitor’s browser. Our site didn’t enable this feature and thus, the following browser caching absense found –

• https://sumo.com/api/load/ (expiration not specified)
• https://load.sumome.com/ (10 minutes)
• https://google-analytics.com/analytics.js (2 hours)
• https://latenightbirds.com/…css/fonts/fontawesome-webfont.woff?v=4.2 (2 days)
• https://latenightbirds.com/…nt/themes/salient/css/fonts/linecons.ttf (2 days)
• https://latenightbirds.com/…/themes/salient/css/fonts/steadysets.ttf (2 days)

You can leverage and enable browser caching using htaccess but that has some limitations and website can be break down if not done right.

So, how to leverage browser cache easily?

Use Wp Fastest Cache WordPress plugin to do this job. Just activate and the default settings will do the trick for you.

I have bit tweaked the settings..see the settings below on the image –

CSS Minifying

Like other stuffs, Google Tool are so annoying to tell you lots of stuffs to tweak. 😛 But, you know, we have the magic of WordPress Plugins for free. Anyways, lets see what the freaking CSS is doing wrong here –

• Minifying https://latenightbirds.com/…content/themes/salient/style.css?ver=7.5 could save 11.2KiB (13% reduction) after compression.
• Minifying https://latenightbirds.com/…hemes/salient/css/responsive.css?ver=7.5 could save 2.8KiB (15% reduction) after compression.
• Minifying https://latenightbirds.com/…/assets/css/js_composer.min.css?ver=4.12 could save 1.7KiB (13% reduction) after compression.
• Minifying https://latenightbirds.com/…emes/salient/css/woocommerce.css?ver=7.5 could save 1.2KiB (11% reduction) after compression.

How To Minify the CSS stuffs mentioned above? 

Let our previously installed Autoptimize and WP Fastest Cache Plugin fight with this naughty boy and save us and improve our speed. Please.

Note: WPRocket (A Premium Plugin) seems good and working like charm these days. You can buy this plugin too to optimize your website for better speed and good performance score!

The Result

Wanna see the result I have implemented here on this article?

According to GTMetrix, My Home Page Speed Score was 58 and YSlow score was 75. Now, my Page Speed score is 70 and Yslow score is 84. My website was sending 83 requests and now it’s sending only 51.

According to Pingdom, my pages are taking less than 2 seconds to load.

That is awesome 🙂

Now implement the tips given on this article on your own website and let me know the output by commenting below. Looking forward to this. 🙂