Patch my site to 94/100 score on page insights

When you build a website, you want it to reach as many people as possible. The quality of your content will naturally engage more visitors and a good presence on the social media channels will help you spread the word.

But most of your users will reach you through search engines — that’s why it’s important to be in a good relationship with Google’s indexing algorithms.

One of the factors that are influencing the results is related to the speed of your site which can be measured using the Google PageSpeed Insights tool.

 Give your website a shot and check back the results — you may get a great score or you may get some suggestions that can help you improve your site.

What are the reasons that my WordPress-based site doesn’t score well on PageSpeed?Client

If you’re using a premium WordPress theme, you may be entitled to think that the theme is responsible for all the errors. Though, some of them might be influenced by its features (eg. the User Experience which is part of the design), most of the notices are not in the hands of the theme itself.

The problem here is that a WordPress theme cannot do, by itself, miracles! The score is based on a lot more factors than the theme’s best practices or coding quality.

Pick a WordPress theme — Why Patch?

What better example could I give than my own website? Well, the page you are reading is based on PATCH, a beautiful theme, made by PixelGrade, a beautiful design boutique where I currently work.

The main reason I chose this theme is because I love its layout proposals. There are some more points that made me go with it:

  • Responsiveness — Patch comes with by default with a 100% scoring in PageSpeed Insights at User Experience without moving a finger. You just install the theme and your website gets responsive and user-friendlyScreen Shot 2016-05-29 at 4.49.59 PM
  • Clean and solid code-base — being built for WordPress.com platform, the theme it’s backed by an external review team that took around 2 months to inspect every piece of code — so they made sure that it checks every coding and design standards.
  • Light — It is a pretty light theme (the zip archive barely touches 1mb) and it uses few assets — so it doesn’t have many caveats to prevent me getting a high score.
  • Personal preferences — I’ve also worked on it, I know that it was built with quality in mind, and my colleagues spent a lot of time to design an innovative way of displaying posts.

Picking your WordPress theme is very important when we talk about optimizing your site: you need a good design, a light library of assets and a good balance and mix between image sizes and their display.

Starting with the Hosting and prepare the server.

Here I am gonna be rough — I see a lot of people picking up “cheap and awesome” hostings solutions and after that, they complain about heavy loading of their site on forums, comments or StackOverflow.

The website is a very important asset for their business, so they need a blazing-fast website. Then, seriously… why would you pick a $1 hosting when your website is so important?

If you really want your business to have a strong and clear presentation online, you better invest in a serious hosting package. And if your boss is pressing you with project budget limits or reasonable choices you can quote me on this:

Hosting packages between $0—$10 are made for testing sites, secondary sites, students or some obscure sect made by 6 guys and their website is their meeting place. If you are above them, stop picking cheap hosting options or stop complaining about “site response time”.

For my website, I made my own server at DigitalOcean. Bought an empty VPS there with $15 per month for 1GB RAM, 30GB SSD, lost some nights installing CentminMod from scratch and made a clean server only for this purpose: to host my website only, not other 10 domains and 30 MySQL custom databases.

So I’ve made it to a point where I had a server with the latest versions of PHP, Nginx, MariaDB and a clean WordPress installation ready to get any theme I want.

*Oh wait, I just love to brag … if you’re not a geek, you can achieve something similar by getting a host already prepared for this like Pantheon, WPEngine or others hosts proposed by Matt Mullenweg himself.

I know that some solutions may seem expensive but you have to be prepared for what is coming to you, your business will grow, avoid a heart attack when you will be forced to move your website to a top notch hosting service like Pagely.

There are some details that need to be checked when we talk about the hosting like Gzip compression, Cache-Control,E-tag or expiring cache times and there are a lot of articles around the web that can help you with them, I’m not gonna reiterate them.

Again, these configurations can be easily set by your hosting provider, but one can configure himself if he has access to Apache/Nginx files. Some of them can be forced via plugins, but again — we have to keep things as simple as we can.

Picking a good hosting that can serve things right is much better than trying to force a mediocre hosting to be good.

A picture is worth a thousand words … and some kilobytes

After you install your theme, you should set your priorities and add your website’s content, this should not interfere with the page insights score.

Put up your content first, then you can worry about performance because if you start optimizing with only the default “Hello word” as content, you will surely lose things out of sight.

Sure, you really need to take care about the images you use, how many of them and their sizes. I’m not talking about copyright, I state that you always need optimized images — I know how beautiful are those full-screen images but think about how many you have and how this will influence the loading time. Any image bigger than 1mb will ruin your user experience on a mobile device(and maybe his mobile internet cost also).

If you don’t like to compress your images before uploading them, there are solutions that can automatically do this for you. Some of them, for a good price, can bring great results like Imagify or Kraken but you can also try some free WordPress plugins like EWWW Image OptimizerWP Smush or you can grab the command line or go to the bash way.

Pick up plugins

The WordPress theme isn’t the only one delivering assets, plugins also do this, and sometimes it’s a devil that you can’t see.

For example, I’m using Crayon Syntax Highlighter to show you code samples in a fancy way, this plugin adds it’s own styles scripts into my website, and it isn’t a bad thing if it does the job.

You need to be careful with the number of this kind of plugins, because using a lot of them(like sliders. galleries, pop-ups, accordions etc) will add a lot of weight to your page, and at the end of the day, this weight could be impossible to optimize.

Minify and Cache — in this specific order.

This part is always a bummer, it is done before launching and you always mess something while doing it. Because the results are unpredictable, the caching technique might trick you with outdated results or your minify operation might move scripts or styles in an unwanted order.

Simply don’t give up, and try to understand what is going under, not just enable/disable options in your caching plugin panel.

Pick the W3 Total Cache plugin who also has a minifying tool or a stand-alone plugin like Better WordPress Minify.

You need to be careful as Google PageSpeed Insights will always ask you to minify scripts and styles and move them to the footer, but this can’t be done all the time.

A lot of the new WordPress themes on the web are based on cool animations or complicated scripts to work, and they will need to stay in the <header> and block your loading time for a little bit. But this is the compromise that you will have to take if you want that nice looking animated website.

$Cash for your cache

In this section, I would recommend you to use a premium plugin. I know it hurts our free world of doing things but this might be the best way of investing some cash in your website simply because a premium plugin will get things easier for you and save you a lot of time.

You can go with WP-Rocket or Hummingbird. Either way is much better than the free alternatives ( W3 Total Cache, WP Super Cache or WP Faster Cache) These free plugins do a good job but they require a lot of time in configuration, understanding, and testing.

They usually miss a one needed a feature or they are so heavy on the processing that they will give you the annoying “Reduce the server response time” error on page insights.

Deliver content well — use a CDN

We’ve established that we use a good host, we optimize the content as much as we can and we cache it. Now is time to deliver it, as fast as we can.

You need to imagine that your server is in one place, and your visitors may be closer to that server or far away, don’t let this be the impediment to their download speed, use a CDN which has data centers all around the world and delivers your assets from the closest data center available.

Jetpack has this addon named Photon which will help you deliver images — is free and I personally use it.

If you want to go premium, thank God there are options like MaxCDN, Amazon CloudFront and a lot more, but if you want to know that what and the who you can enjoy this article about CDN.

This is it, thank you for reading!

The results are more than good enough, and now we can start working at the next big mission.

Personal tip: don’t go mad trying to run for supreme 100, most of the time it doesn’t worth the effort or the struggle.

Keep in mind that Google made this tool help you improve your website performance. Therefore, it is not a contest to win, it doesn’t mean that this weapon is the God of the Internet. It’s just a way to walk you through some relevant directions on this path.

All in all, you can also try Gmetrix Pingdom tools or other options on the market. In the end, they’re just different approaches for analyzing your website and for suggesting certain improvements.

In my humble opinion, you should invest in quality content, write more original stories. This strategy will impress more the Google indexing algorithms than your page insights score.

Screen Shot 2016-06-10 at 3.45.00 PM

More readings on the subject that I’ve enjoyed and I want to share with you here: