Each of these tools measures your page speed differently. However, for the most part, they factor in similar factors while evaluating your page speed.<\/p>\n
You should aim at getting a green mark (safe zone) in all of these tools rather than obsessive over the elusive perfect 100.<\/p>\n
With that in mind, let\u2019s delve a little deeper into the Page Speed Insights.<\/p>\n
Optimize Images: Reduce Your Page Size by 80%<\/h2>\n
Many content creators upload full-size images regardless of the actual size displayed in their articles.<\/p>\n
This affects the page speed to a great extent.<\/p>\n
If you\u2019re testing your site speed on Pingdom, you will see that images can take up a sizable portion of your page size. In the screenshot below, you can see the images account for more than 80% of the overall page size. I can certainly take care of the page speed simply by optimizing the existing images on my homepage.<\/p>\n
![\"\"](\"http:\/\/susanta.org\/wp-content\/uploads\/2017\/12\/Content-Types-on-Pingdom.jpg\")
<\/p>\n
In fact, most often, websites with a score of 80 (or more) on Google PageSpeed Insights will have a lighter page size (e.g less than 400kb). At least, that\u2019s true for most of my blogs.<\/p>\n
It\u2019s a good practice to resize your current images with a tool before optimizing your website for page speed.<\/p>\n
NOTE<\/strong>: When you test your website on Google PageSpeed Insights, it only factors in the images displayed on your homepage. For example, if the homepage of your website has 10 different images of which 5 are not optimized, Google will recommend compressing them. If your aim to focus only on improving page speed of your homepage, you might want to compress them manually with the use of this free image compression tool<\/a>.<\/p>\n I use ezgif.com for compressing images before uploading them to my website. Apart from image compression, this free tool also helps you resize, crop and convert images in different formats.<\/p>\n Pro Tip<\/strong>: You can reduce the size of your images simply by converting the .png files into .jpg files with a tool like ezgif.com.<\/p>\n Popular Image Plugins for Image Optimization<\/strong><\/p>\n There are many plugins that can help you with optimizing your current images. However, most of them are available with the usage limit.<\/p>\n EWWW Image Optimizer<\/a><\/strong>: I highly recommend this free image compression plugin that allows you to compress image size individually as well as in bulk. It also supports .png to .jpg conversion.<\/p>\n WP Smush<\/strong><\/a>: WP Smush is a popular plugin for image compression. However, in many cases, it won’t compress an image beyond 100kb. However, if you’re a premium member, it allows you to override this limitation and compress it further.<\/p>\n Tiny PNG<\/a><\/strong>: This plugin is one of the best when it comes to optimizing images on your WordPress site. For free users, it only compresses 500 images every month.<\/p>\n Optimum Image Optimizer<\/a><\/strong>: While this plugin doesn\u2019t have any limitations with regards to the number of images, it doesn\u2019t compress your images beyond 100kb. Also, it doesn\u2019t support some specific image formats such as .gif.<\/p>\n NOTE<\/strong>: There are many other plugins for image compression. Be sure to preview their installation count and popularity before installing them.<\/p>\n I recommend uninstalling (and deleting) third-party plugins from your WordPress site after using them unless you plan to use them on a daily basis. There\u2019s no point in keeping a third-party plugin idle if you\u2019re not going to use it very regularly.<\/p>\n In order to improve your page speed, you need to eliminate render-blocking javascript and CSS in above-the-fold content.<\/p>\n In plain English, this essentially means when someone visits your website on a mobile or desktop device, the priority content (e.g. text and images) in the above-the-fold area should load quickly.<\/p>\n Usually, most websites are built such that the javascript and CSS files load first before other content gets a chance to appear.<\/p>\n Needless to say, this negatively affects the user experience especially when your visitors view your website on a slow internet.<\/p>\n If you\u2019re seeing this warning on Google Pagespeed Insights, you need must be using one or all of the following:<\/p>\n NOTE<\/strong>: Usually, many people enqueue scripts (e.g Google Fonts, Font Awesome) via functions.php file, which results in getting you a warning in Google Pagespeed Insights.<\/p>\n So, let\u2019s see how to deal with these issues\/warnings.<\/p>\n Remove Render-blocking Javascript:<\/strong><\/p>\n In order to remove your render-blocking javascript, install, activate and configure the Autoptimize plugin<\/a>.<\/p>\n Configure the plugin in the following ways:<\/p>\n Don\u2019t forget to click on the save changes button.<\/p>\n Remove Render-blocking CSS:<\/strong><\/p>\n First of all, comment out or delete the code snippets for Google fonts, Font Awesome and Dashicon in your functions.php file.<\/p>\n Then try to install them in the following ways:<\/p>\n Google Fonts<\/strong>: To install Google Fonts asynchronously<\/a>, add the following code to the footer section of your theme. To change font family, refer to Google Fonts.<\/p>\nEliminate Render-Blocking Javascript and CSS in Above-the-fold Content<\/h2>\n
![\"Render](\"http:\/\/susanta.org\/wp-content\/uploads\/2017\/12\/Render-Blocking-Scripts-and-CSS-Resources.jpg\")
<\/p>\n\n
\n