Brand TrendWorld

How to Perfect Your Google PageSpeed Score

All our tests were done on a staging/development site and later migrated to our live website. Our website is built using WordPress, running the latest WordPress build with the Salient theme.

Google Page Speed Score

1. DNS

We use Cloudflare but not any of its speed optimization.

We found in our tests that it was slower.

If you’re on a shared hosting environment, then Cloudflare will probably help a lot.

But for us in particular, with a dedicated server, it was better with everything switched off.

2. Passing the Server Response Time

The benchmark is 0.2 seconds. Anything above that and Google marks you down.

Our website runs on a high spec dedicated server with a handful of accounts. Most of what you read online will suggest you switch to a faster WordPress host (with affiliate links) which is the easiest way, but I wasn’t ready to give up on our own environment without at least trying.

Having a lot of server admin experience I switched off any unnecessary services running on the server to help increase speed. However, that didn’t make a lot of difference.

The biggest difference we noticed to reduce server response time was to switch to PHP 7. Not all hosts support PHP 7, but luckily, since we host our own sites, we do.

Mixed reports online show a 20 to 50 percent speed increase in switching to PHP 7. Regardless of the actual percentage, we had the need for speed and wanted to test it out.

If you don’t know what version of PHP you are running, install this plugin and you will see it in your “At a Glance” on your Admin Dashboard.

Before you go further, you need to check the site is compatible. Luckily there is a PHP compatibility checker plugin you can download for WordPress which scans through your code and identifies any issues with switching to PHP 7.

The results showed a few things that needed addressing, which we quickly took care of. We were finally ready to switch to PHP 7.

In order to switch, from WHM you access the “Multi PHP Manager”, select the site you want and change the PHP Version. If you don’t have access to WHM, ask your server admins, but make sure you are doing it on a test/development environment – it’s not best practice to break your production website.

PHP Coding

3. Google Analytics & Google Fonts

Google Analytics kept coming up in things to fix, which is ironic since its Google’s own PageSpeed test.

I got around this by copying Analytics.js direct from Google’s server onto our site and referring to it locally. There is a plugin for this if you don’t want to do this manually.

As for Google Fonts, we self-hosted these on the site. This helped remove this mark from the Google PageSpeed Score results.

4. Minify

There are a lot of plugins that deal within minification of JS and CSS files. The ones we see the most are Autoptimize and Better WordPress Minify.

Using Autoptimize completely screwed up the site and contact forms. Hero sliders and general functionality on the site broke.

In short, we got a good PageSpeed score, but the site wasn’t usable.

So we opted for Better WordPress Minify, which allows greater control and enables you to pick and choose what to do with each JS and CSS file. Configuring this took the longest, having to move scripts around, checking that the site operates correctly, and then rerunning the test.

We kept a log of every change and reported back on each change and what the impact was on Google PageSpeed. With so many variables to tune, it’s best to log it to measure cause and effect. Every site will be different, so fine-tune for your specific website.

5. Don’t Be a Plugin Horder

You’ve probably inherited many sites where someone got plugin happy.

More plugins = a slower site.

Remove any fat. Delete or disable plugins that aren’t being used.

6. Enable Compression

We enabled this on the server and then made changes to our .htaccess file to enable compression. We didn’t use another plugin.

Below is an example of our htaccess file. You will notice a number of elements that are cached using GZIP:

############## CACHING-GZIP ############

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000

<FilesMatch "\.(txt|xml|js)$">
ExpiresDefault A2592000
</FilesMatch>

<FilesMatch "\.(css)$">
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
ExpiresDefault A2592000
</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
ExpiresDefault A2592000
</FilesMatch>

</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(txt|xml|js)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
<IfModule mod_mime.c>
AddEncoding gzip              svgz
</IfModule>
</IfModule>

You can see from the htaccess code, that it helps to deflate everything that the website renders. This includes JavaScript files, CSS, and even website icons.

Images are typically one of the main reasons for a low page speed score, so it is advised that on mobile views, you remove (or hide) any images that don’t add any value to the mobile experience.

Source
SEJ
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *