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. 🙂
Many Many Thanks For infomation
You welcome. Keep reading. 🙂
## thanks, again. you have given us some awesome tips.##
Glad it helps.
Appreciate you Brother, i have applied your trick and found a good result.
Share the page speed tips with your friends who are struggling with page loading time.
You are always awesome bhaiya <3
He he…Thanks for the complement. 🙂
important information. we expect more like this article
Dear Nasir Vai,
It is nice post. Very much helpful.
After applying all mentioned procedure my site speed increase to 81/100 according to page speed insight. But, still some problem like “Your page has 1 blocking script resources and 5 blocking CSS resources. This causes a delay in rendering your page.”
Although I already install your mentioned two plugin to resolve the mentioned problem.
How,I improve the problem?
Waiting for your kind suggestion.
81 out 100 is good to go with. Over optimization is not recommended.
Thanks for giving us such a good article. I implement it to my site and my site is now doing better.
why are you minifying CSS twice in both plugins? this will cause conflicts for sure no?
Each plugin does their stuff in minifying…and in combined; it results the best 😀
This was a lifesaver! By far the most simple yet comprehensive guide for load times I’ve found. I’ve spent hours researching each individual component which is overwhelming for someone non-technical! Love how clear and actionable this is so thank you
Hope it helped. 🙂
Thanks for this article help Nasir. I have a question, with the Autoptimize plugin, how do you get the javascript and CSS into a single file? Will it auto do this or do I have to select an option?
Also, I noticed on the plugin that there are a few additional options such as ‘Aggregate ‘, what does this actually mean an do?
Thank you for your help 🙂
1. Select “inline and defer CSS” to make it happen on the settings.
2. Aggregate means in Autoptimize is to save the aggregated files as .css and .js-files. That means your PHP (back-end Code) is no loner need to serve the CSS and JS files every time a user lands.