Google PageSpeed is a required tool for the modern website. If your PageSpeed scores are too low, Google ranks you lower. If your site performs badly, Google ranks you lower. If you do not use SSL, Google ranks you lower. So, a good Google PageSpeed score is crucial but not easy to achieve out of the box with the WordPress Twenty Fourteen theme. Actually, its out-of-the-box score for mobile is around sixty and for desktop around seventy. These scores are not bad, but they are not very good, either. Average ranks you lower.
The key to PageSpeed is to solve all the little problems that show up. Four are harder to resolve:
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Prioritize visible content
- Reduce server response time
- Leverage browser caching
And six are fairly easy:
- Enable compression
- Minify CSS
- Minify HTML
- Minify JavaScript
- Optimize images
- Avoid landing-page redirects
Another known fact is that Google will lower your rank if your mobile user experience is poor. So be careful with your plugins: you may adversely impact user experience. Out of the box, the Twenty Fourteen theme does a good job, with a score of 94/100 or so.
My site score currently is 93/100 on mobile and 91/100 on desktop. That is a pretty impressive score, actually, and it requires an immense amount of work to achieve.
So, what should you do to improve your scores?
- Install the mod_pagespeed module for Apache or NGINX. This will aid in minification of some aspects of your site, defer JavaScript, and otherwise reorganize the header and footer for better PageSpeed scores. I used the default settings for mod_pagespeed but also added the following near the end of the /etc/httpd/conf.d/pagespeed.conf just before the final </IfModule>, since I use Apache.
ModPageSpeedEnableFilters inline_javascript, prioritize_critical_css, inline_preview_images, insert_dns_prefetch, move_css_above_scripts, defer_javascript ModPagespeedUserExperimentalJsMinifier on
- Install the EWWW Image Optimizer plugin and have it scan your entire image repository and properly optimize your images. Now, as new images are added, they will also be optimized. I ran the Image Optimizer against specific plugin directories that contain images I use.
- Install the W3 Total Cache plugin to minimize JavaScript and HTML. I do not use this plugin for CSS, as I also want to defer my CSS. There is a way to defer CSS in W3 Total Cache, but it does not work well if you also optimize HTML. Optimizing HTML can be disabled if your CDN already does this. The most important item is to configure W3 Total Cache to load JavaScript asynchronously.
- Install Better WordPress Minify as well as the Defer CSS Addon for BWP Minify. Configure Better WordPress Minify to only minify CSS as well as to have a cache life of seven days. The seven days is the minimum requirement for PageSpeed scoring for cached elements.
- Install the Declutter WordPress plugin and set it up to remove all but the needed items. I kept the following items enabled, as required by the Twenty Fourteen theme, other plugins, or PageSpeed. Here is a list of what I left checked in each section:
- Head Section: A canonical link for single post/pages
- HTTP Headers: Etag
- HTTP Headers: Expires
- Body: admin-bar
- Body: logged-in
- Posts: hentry
- Menus: current-menu-ancestor
- Menus: current-menu-item
- Menus: current-menu-parent
- Menus: menu-item
- Menus: Remove ID attributes from Menu items
- Install my AAC Scoring plugin, which does the following:
- Removes the Open Sans and Lato fonts
- Embeds the TwentyFourteen style page above the fold
- Embeds the Simple Custom CSS styles above the fold
- Embeds the WP Bootstrap Tabs styles above the fold
- Embeds the WP Columna styles above the fold
- Replaces Genericons with Font Awesome if the Icon Fonts plugin is available (and font-awesome is enabled) or if the Font Awesome 4 Menus plugin is available
- Substitutes H2 tags for H1 tags with sidebar titles to help with SEMrush scores
- Replace small icons and images with Font Awesome font implementations as necessary, which reduces round trips taken by the client. I did this for all social media and document type icons used throughout my site. In many instances, this is a case of finding the proper plugin that supports your chosen font—in my case, Font Awesome.
- Reduce the number of WordPress “the_content” filters you use, as they tend to scan the entire content. The more filters you have, the more scanning occurs. In essence, fewer plugins is often better than many plugins.
- Install the Broken Links Checker plugin to ensure your site has no broken links, thus improving SEMrush scores.
- I modified the SEO Friendly Image plugin code to go through each post and ensure that all images contain an ALT tag. This improves GTmetrix, YSlow, and SEMrush scores. More will be coming on this a bit later.
- Use a CDN to reduce server response time.
There you have it: a recipe for improving your GTmetrix, PageSpeed, YSlow, WooRank, and SEMrush scores. As I find more ways to optimize for Google, Yahoo, and others, I will document those changes.
