As users from Mobile Device has significant increase over the last couple of years; Google is very strict these days on page speed issue. They even officially anounced 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, faster website has direct relations with more pageviews and low bounce rate. Google has found that 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.
— John Peterson (@johnpetersontx) November 14, 2016
But, how would we know whether our website are 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 of our website and whats affecting the most while loading a website. Here you go:
Jump To The Right Section
- 1 Tools To Check The Page Speed Of a Website
- 2 What Is The Ideal Page Load Time or Score?
- 3 How To Speed Up Your Site & Have a Good Page Speed Score?
- 4 Optimize Website Images
- 6 Reducing Server Response Time
- 8 Leverage Browser Caching
- 9 CSS Minifying
- 10 The Result
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.
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.
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 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.
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
- 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.
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://www.latenightbirds.com/…ads/2016/06/PPC-Campaign-For-Clients.png could save 106.3KiB (98% reduction).
- Compressing and resizing https://www.latenightbirds.com/…16/06/SEO-Traffic-for-LateNightBirds.png could save 51.9KiB (94% reduction).
- Compressing and resizing https://www.latenightbirds.com/…content/uploads/2016/06/seo-for-tech.png could save 46.3KiB (99% reduction).
- Compressing and resizing https://www.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.
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.
What Google Found on this section is as below –
So, how to fix this issue?
Use Autoptimize WordPress Plugin and it will fix the render blocking issue for you.
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.
– 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 Hosting/Server, all other three options mentioned above can be fixed by Autoptimize Plugin I mentioned earlier.
- Minifying https://www.latenightbirds.com/…ent/themes/salient/js/init.js?ver=7.5.02 could save 27.1KiB (27% reduction) after compression.
- Minifying https://www.latenightbirds.com/…emes/salient/js/prettyPhoto.js?ver=7.0.1 could save 3KiB (33% reduction) after compression.
- Minifying https://www.latenightbirds.com/…s/dist/js_composer_front.min.js?ver=4.12 could save 739B (13% reduction) after compression.
- Minifying https://www.latenightbirds.com/…themes/salient/js/superfish.js?ver=1.4.8 could save 564B (23% reduction) after compression.
How to solve this issue?
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://www.google-analytics.com/analytics.js (2 hours)
- https://www.latenightbirds.com/…css/fonts/fontawesome-webfont.woff?v=4.2 (2 days)
- https://www.latenightbirds.com/…nt/themes/salient/css/fonts/linecons.ttf (2 days)
- https://www.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 –
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://www.latenightbirds.com/…content/themes/salient/style.css?ver=7.5 could save 11.2KiB (13% reduction) after compression.
- Minifying https://www.latenightbirds.com/…hemes/salient/css/responsive.css?ver=7.5 could save 2.8KiB (15% reduction) after compression.
- Minifying https://www.latenightbirds.com/…/assets/css/js_composer.min.css?ver=4.12 could save 1.7KiB (13% reduction) after compression.
- Minifying https://www.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!
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. 🙂