Above Fold Optimization and SEO matters
Checking details of my website, I was shocked to realize that my site (this one you are reading now) got a mere 30 / 30 in Google Developers’ Pagespeed Insights. Holy Peanuts!
Google Pagespeed Insights score 98 after above the fold optimization
Digging a little deeper, I realized I had been ignoring some things in my WordPress installation. I didn’t use cache for example or optimize my images. I’m running a Stockholm theme, a popular choice ready made themes that’s just joy to use even for a non-coder like me. Visual Composer rocks!.
Seeing the red numbers in Google Insights Pagespeed, I got discouraged. I thought maybe it’s impossible to optimize complicated ready made theme like Stockholm since it has so many complicated systems like Visual Composer. Seeing a raw dump of the whole CSS was so huge that my MacBook Pro almost crashed when opening it! Is it possible to optimize WordPress with relatively heavy theme to get proper score?
Well I found out that it is.
Again, as I am not a programmer or coder, doing this stuff is kind of like going out from my comfort zone. So I was surprised that even I could come up with such a huge improvement in Pagespeed numbers. After poking around one evening with Autoptimize forum and using a tool called “criticalcss.com”, now, my mobile is 84 while Desktop is a freaking 98!.
The most important and biggest improvement was above the fold optimization. Since I absolutely and completely suck in coding, I used a ready made tool https://criticalcss.com (£2.00 /month) and Autoptimize. (Free plugin)
I just went to criticalcss.com site and inserted my main URL to the window and it gave me, well, a critical css. I was then able to insert it to the “inline and defer” CSS window in Autoptimize settings. Bang! Instant huge increase in Pagespeed.
In simple terms, what above the fold optimization really means is to load the part that’s first visible to the user first, and rest of the stuff later.
You can do that by hand, it’s not a rocket science really, but a plugin will “Above the Fold Optimization” or Autoptimize will do that for you automatically. But getting the critical CSS code inserted was crucial, and criticalcss.org really helped me. I even got in touch with them by mail just to say thanks. They are really friendly people.
So I went on and used some parts of few plugins, Above the Fold Optimization plugin for example optimized google fonts and enabled Lazy Load Scripts and Localized Javascript. I was able to get the best result this way, but you can try what works for you. There is no problem using one plugin to do one thing. Experimentation really works.
I also optimized my images using WP Smush and removed the stock logos that Stockholm was loading in the background. This is really important, especially the logo image, as those tend to get loaded even if there’s nothing visible in the “dark background” and “white background” ones. Even having extra 10kb png being loaded as logo will be a performance hit as that is above the fold stuff.
I also installed free WP Fastest Cache plugin and enabled cache, and Minified my HTML. I also went a little further and ordered maxcdn CDN service. What this means is that I’m able to cache some parts of my site to be served from ultra-fast server.
Ahh, the hard work.. but the pleasure and self−satisfaction the green 98!!!
Really to be honest, I don’t think we should get too obsessed by these numbers. Will average user realize the difference between say 88/and 98 pagespeed?
And, although I know it’s one part of the Google’s algorithm, content and back links will always be way more important than just speed. So for example if there’s a site with 95 and another one with 98, it won’t mean that 98 would automatically be ranked higher. Content is the king.
Also the truth is that If we are anywhere between 70-100 we are already faster than most sites out there. Macworld.com for example, 46/61. And they do more than OK in search.
Optimization is such a thing; it’s good and helpful only to a certain point. Rather than obsess frantically about numbers, it’s better to use the time to create beautiful and valuable content.
But if you want to use ready made WordPress theme and get blazing 98 ranking Google Insights Pagespeed ranking, it can be done even without becoming a web coding guru.