Optimising your WordPress site for Google PageSpeed

User behaviour and loyalty to the company, conversion rates, and web resource position in the search engine directly depend on the site loading speed. It is unacceptable to ignore this parameter. The first thing to do is to measure the performance and then answer the question of how to increase the site’s loading speed.

A popular online tool that measures and evaluates the index of page opening time is Google PageSpeed Insights. This service provides direct tips on how to speed up the loading of the site. Using a web resource on WordPress as an example, let’s understand how to achieve the highest scores in Page Speed, which will thus significantly increase the chances of higher positions in search and increase traffic and sales.

The main ways to optimize the loading speed of the site:

1. 1. Enabling browser-side cache.
   2. Optimization of HTML code.
   3. Reducing the size and optimizing JavaScript and CSS files.
   4. Removing CSS and JS code that blocks page display.
   5. Customizing font loading.
   6. Optimization of theme and images uploaded to WP.
   7. Activation of compression on the server side.
   8. Other work on the site to increase speed.

Let’s analyze the above methods of accelerating web resources in detail.

Useful to know: Example of a technical SEO audit of a website

Enabling browser cache

So that the site pages do not load every time and do not slow down the opening of the web resource on the user’s device, you need to set up caching. In this case, they are saved once and then “pulled up” during a certain loading period. The data is updated at a specified interval.

There are several ways to enable the browser cache in WordPress:

1. By customizing the .htaccess file. In the expires module <IfModule mod_expires.c>, values for caching different types of files – images, text, HTML code, scripts – are set. For all data, by default, the command to add to the browser cache is given, plus for certain types of content, you can specify a specific period, for example, for images: ExpiresByType image/gif “access plus 1 month”.
   Example:
   <IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
2. Using plugins. To enable caching there are both free solutions like W3 Total Cache, WP Super Cache, etc. and paid plugins (WP Rocket).

Sometimes, Google PageSpeed Insights recommends enabling caches for search engine statistics services or Google Analytics. These data are cached initially but with a small time interval, so they do not slow down the loading of the web resource. There is no direct access to these external site scripts, except that you can install the Complete Analytics Optimization Suite plugin. Then the Google web analytics service library will become local.

Optimize HTML code

Bulky and complex code slows down your site. Cleaning it out and compressing it makes pages load faster. For example, you can optimize HTML code manually by finding and removing unnecessary spaces and attributes.

The semi-automatic method of cleaning involves using Google PageSpeed Insights. After analyzing the speed in the service, click on the “Reduce HTML” button and then “View Content”. All that remains is to replace the used code variant with the proposed new one. However, this option is suitable only for very small sites with simple functionality.

But for sites on WordPress, there are simpler methods of code optimization in automatic mode. Effective free plugins are offered for these purposes, such as Better WordPress Minify and Autoptimize. To minimize HTML sizes and speed up pages, you just need to select the appropriate section and perform a simple configuration.

Reducing the size and optimizing JavaScript and CSS files

CSS and JavaScript are often a slowing factor in opening web pages. Reducing their size by removing hyphenation, spaces, and various comments is another important optimization task under Google PageSpeed Insights. CSS and JS files can be optimized similarly to HTML. Popular free plugins suitable for this are Autoptimize and WP Minify Fix.

The corresponding work in Autoptimize is reduced to checking two checkboxes – “Optimize CSS code?” and “Optimize JavaScript code?”.

If the resource is updated rarely enough, it is better to minimize the main CSS and JS files manually, using online minimization services, such as cssminifier.com for CSS files and jscompress.com for JS files. There are many such online services, and all of them can easily handle this task.

In addition, it is recommended that JavaScript and CSS be properly positioned in relation to other content. It is better to place CSS at the beginning and JS files at the end of the page. In this case, the web resource’s appearance and performance will elicit only a positive response from users.

Removing CSS and JS code that blocks page display

It is not uncommon for site performance to degrade due to CSS and/or JS files preventing the loading and normal display of the top portion of the site’s content.

The solution may be to set up asynchronous loading, where the “heaviest” JavaScript files are launched last instead of displaying the page content sequentially. Google ExtSrcJs script is used for acceleration (the code <script src=”…”> is changed to <script extsrc=”…”>, and the extsrc.js file is connected.

It is also possible to set up the loading of secondary CSS files after page loading, but you need to remove the CSS responsible for loading the top part of the screen and place it in the HTML code.

It’s even easier to eliminate blocking or slowing down the page display with the Autoptimize plugin mentioned earlier. In the Javascript options section, uncheck the “Force JavaScript in?” option. In CSS options, you should make the “Inline all CSS?” item active.

Customize font loading

Page display is negatively affected by “heavy” JavaScript and CSS files, as well as Google and Font Awesome fonts. These slow down the site and can also block content from displaying.

The main way to customize fonts is to use asynchronous loading with Google Font Loader and insert additional code into the footer.

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

An alternative option to speed up the download of Google fonts is to install a special plugin, Disable Google Fonts.

But you should not forget about the “grandfather” method of connecting Google fonts directly, for this you should download the web version of the required font, add it to the server and connect it in the css file.

Also, Font Awesome and Google Fonts can be downloaded faster by moving to a Content Delivery Network (CDN). CDNs are remote servers that facilitate lightning-fast data transfer.

It is not uncommon to transfer JS scripts and heavy graphics to CDNs, leaving only the HTML code on the main hosting of the web resource. An example of a link to Font Awesome fonts on the Content Delivery Network:

<link href="https://cdn.simple.com/css/font-awesome-4.4.0.min.css" rel="stylesheet">.

Optimizing the theme and images uploaded to WP

For the WordPress engine, a web resource’s “lightness” or “heaviness” is largely determined by the chosen design theme. If you feel that the page loading speed is low (as assessed by Google PageSpeed), it is advisable to choose a faster alternative.

An abundance of uploaded image files can also slow down your site. Here are the main recommendations for optimizing images on WP:

1. Remove all unnecessary graphic files from the server. If graphics weigh a lot but are not very informative, they should be replaced with text.
2. If possible, use JPEG images. Their compression does not imply deterioration of picture quality. Even a file that is reduced by 25-40% on the source’s background will have a pleasant appearance.
3. Do not apply PNG too often to get a transparent effect. You will have to compress these files almost manually, using graphic editors such as Photoshop, Compresspng or PNGout. You can also use online compression services such as TinyPNG / TinyJPG.
4. You can also use plugins such as WP Smush to compress graphic files in WordPress.
5. Get rid of various “garbage” in your graphic material – comments from designers, redundant palettes, etc. The Smush.it service can help you with this.
6. Do not scale image sizes by applying width and height or CSS. One resizing graphic file weighs a lot and takes a long time to load. Adding several images adapted for different devices (desktop computer, smartphone, tablet) is better. Especially since WordPress functionality includes using images with different resolutions depending on the screen resolution. To automate the loading of the desired image, use the plugin for WordPress – Imager.

Activating compression on the server side

You can speed up the loading of site pages at the stage of data transfer from the server. For this purpose, compressing files using Gzip is recommended. The use of this method of acceleration is very effective but slightly increases the load on the server, which is also worth considering.

You can enable Gzip by contacting your hosting provider’s technical support. It is also possible to activate it yourself: if your server runs on Apache, you can write the following lines in the .htaccess file:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser errors (only required for very old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

An alternative way to fix server-side issues is to switch to a newer and faster hosting service with advanced customization options.

Other work on the site to increase speed

Increasing the site’s loading speed can also be done in other ways. First, it is worth highlighting a number of works that are not directly related to the WordPress engine and are performed on the server side:

• Nginx/Apache configuration;
• active use of CDN;
• database optimization (removing revisions, unnecessary tables, spam, etc.);
• configuration of data transfer protocols, including HTTP/2 and TCP;
• reducing the number of redirects (301 redirects).

Other customizations to the content management system itself include the following:

• removing unused WordPress plugins that can slow down loading;
• getting rid of query strings;
• manual script execution settings, etc.
• loading of CSS and JS libraries only on pages where they are used.

Once the optimization is done, you should retest in Google PageSpeed Insights to find out the new speed score and rule out other errors or issues.

To summarize

If your WordPress site has a Google PageSpeed score of 85 or higher, then the pages load fast enough. If the score is lower, you should work on acceleration. Optimization according to the recommendations of the service should be started in the order in which they are listed. The topmost items on the list will be most useful for improving performance.

If you want to speed up your site, but you are not sure you can do it yourself or you are short of time, contact the experts at Around Web.