{"id":1741,"date":"2020-12-15T11:06:19","date_gmt":"2020-12-15T03:06:19","guid":{"rendered":"https:\/\/improvise.solutions\/?p=1741"},"modified":"2020-12-15T13:00:50","modified_gmt":"2020-12-15T05:00:50","slug":"google-pagespeed-insights-how-i-fixed-my-slow-website","status":"publish","type":"post","link":"https:\/\/improvise.solutions\/ch\/blog\/website-management\/google-pagespeed-insights-how-i-fixed-my-slow-website\/","title":{"rendered":"Google PageSpeed Insights: How I fixed My Slow Website"},"content":{"rendered":"

The speed of a website is a very important thing to care about, especially since it\u2019s a known fact that Google is incorporating website speed as a factor of how the site will rank. Google has developed a tool called PageSpeed Insights, which allows you to check the speed of your website based on several factors. I checked mine, and it ranked poorly, so I fixed it. Here\u2019s the detailed process of what I\u2019ve done.<\/p>\n\n\n\n

So\u2026 I headed to\u00a0Google PageSpeed Insights<\/a>\u00a0and decided to check my website. The result wasn\u2019t very pleasant, as you can see below. A grade of 58\/100 and a red color, indicating poor speed optimization. Well, I had to do something!<\/p>\n\n\n\n

OPTIMIZING IMAGES<\/h2>\n\n\n\n

Images are a very important part of every website. Consequently, a website can be slowed down by too many, too big or mostly, badly optimized images. The first thing PageSpeed Insights gave me a warning about was that most of the images used on Cats Who Code were too big and poorly optimized.<\/p>\n\n\n\n

How I fixed the problem:<\/strong>\u00a0I used a free WordPress plugin called\u00a0WP Smush<\/a>. It has a super useful option which allows you to optimize all your attached images (There\u2019s over 800 of them on the blog) in bulk of 50. It takes a while, but it\u2019s worth it: I reduced my images of an average 20% while preserving a sufficient quality on all my pictures.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To do so, install\u00a0WP Smush<\/a>, then go to Media \u2192 WP Smush. Scroll down a little, and you\u2019ll see \u201cSmush in Bulk\u201d. Click on the \u201cBulk Smush 50 attachments\u201d button and wait. You\u2019ll need to click again on the button every 50 images if you\u2019re using the free version of the plugin. Once every image on your site has been optimized by WP Smush, you can rest assured that you have saved a lot of loading time. Check the difference on Google PageSpeed Insights!<\/p>\n\n\n\n

Further reading:\u00a0The definitive guide to optimize images for the web<\/a><\/p>\n\n\n\n

MINIMIZING HTTP REQUESTS<\/h2>\n\n\n\n

The next problem I was facing was the fact that my site was requesting way to much files. When using WordPress, the most convenient way to enhance your blog functionality is to add plugins. Plugins are cool, but many of them have to do extra HTTP requests (mostly css and js files) in order to work properly.<\/p>\n\n\n\n

How I fixed the problem:<\/strong>\u00a0I used the best ever caching\/minify WordPress plugin, the mighty\u00a0W3 Total Cache<\/a>. The plugin offers a lot of possibilities in order to cache your website and make it faster. For instance, a super useful thing in your quest for speed is the Minify options:\u00a0You can easily merge 3 css files in one, which will ultimately result in a single HTTP request instead of three.<\/strong>\u00a0I turned on all caching options (besides those requiring paid third parties services) and minified my JavaScript, CSS and HTML.<\/p>\n\n\n\n

The\u00a0Monarch<\/a>\u00a0plugin I\u2019m using was adding The Open Sans font to my blog, which caused an unnecessary HTTP request. To remove the font and the consequent warning issued by PageSpeed Insights, I added the following to my\u00a0WordPress theme<\/a>\u00a0functions.php<\/code>\u00a0file. This little chunk of code simply removes the font added by the plugin.<\/p>\n\n\n\n

\/\/Remove Open Sans font added by Monarch\nwp_dequeue_style( 'et-open-sans-700' );\n<\/pre>\n\n\n\n
Also, the little form provided by MailChimp for my mailing list was importing a small css file. I just removed the call to that stylesheet and pasted the css rules in my main .css<\/code> file.<\/p>\n\n\n\n
Another important thing, I removed the Facebook \u201cLikebox\u201d widget which was loading a ton of stuff such as css and JavaScript files. I plan of using a simple icon on my site header instead of that bloated widget.<\/p>\n\n\n\n
ADDITIONAL FIXES<\/h2>\n\n\n\n
As all websites are different, here\u2019s a list of additional tips that might be useful to help you fix the problems you\u2019re facing.<\/p>\n\n\n\n
There\u2019s a somewhat little-known, but very efficient WordPress plugin that you might want to try:<\/strong>\u00a0Speed Booster Pack<\/a>. It is specially designed in order to make your site faster and rank higher on major speed testing tools. It has a few very interesting options that you should check and experiment with. <\/p>\n\n\n\n
Clean code! It might seem obvious, but yet a ton of sites are using poorly optimized code, whether php or html\/css.\u00a0A clean and optimized code loads faster than a bad one.<\/strong>\u00a0So if you\u2019re looking for speed, make sure that your code is properly optimized.<\/p>\n\n\n\n
Use a CDN: A CDN (Content delivery network) is a network of servers which are spread throughout the world. Each of those servers keep a copy of your static content. With a CDN, when a user visits your site he is being redirected to the closest server to their location.<\/p>\n\n\n\n
Can\u2019t fix your site?\u00a0Get help from someone with experience.<\/strong>\u00a0Fixing speed of a website isn\u2019t easy and there\u2019s little 100% out of the box solutions, as all websites are different. Getting help from a speed expert could be the best way to speed up your site. Want me to help? I can do so at a reasonable rate,\u00a0feel free to contact Us.<\/p>","protected":false},"excerpt":{"rendered":"
The speed of a website is a very important thing to care about, especially since it\u2019s a known fact that Google is incorporating website speed as a factor of how the site will rank. Google has developed a tool called PageSpeed Insights, which allows you to check the speed of your website based on several …<\/p>\n
  Google PageSpeed Insights: How I fixed My Slow Website<\/span> \u67e5\u770b\u5168\u6587 »<\/a><\/p>","protected":false},"author":4,"featured_media":1745,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[14],"tags":[17,22],"_links":{"self":[{"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/posts\/1741"}],"collection":[{"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/comments?post=1741"}],"version-history":[{"count":3,"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/posts\/1741\/revisions"}],"predecessor-version":[{"id":1746,"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/posts\/1741\/revisions\/1746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/media\/1745"}],"wp:attachment":[{"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/media?parent=1741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/categories?post=1741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/improvise.solutions\/ch\/wp-json\/wp\/v2\/tags?post=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}