WordPress

WordPress Website Optimization for Google PageSpeed Insights

Pinterest LinkedIn Tumblr

The user’s behaviour, conversion rates, and the position of the web resource in the search results directly depend on the loading speed of the site. Leaving this parameter aside is unacceptable. First of all, you need to measure performance, and then answer the question of how to increase the loading time of a WordPress website.

A popular online tool that measures and measures the time it takes to open pages is Google PageSpeed ​​Insights. This tool also provides direct tips on how to speed up the loading of the site. Using an example of our official website, let’s figure out how to achieve the highest ratings in Page Speed, which means significantly increasing the chances of higher places in the search, increased traffic and sales.

NOTE: None of the tools available on the internet, Google PageSpeed Insights, Pingdom Tools or GTMetrix is 100% accurate. So do not get disappointed, you will never be able to 100% optimize a WordPress website. If you want your website to be 100% optimized, we recommend you build your website using custom coding.

Website Optimization for Google PageSpeed Insights: Summary

  1. Enabling the browser-side cache.
  2. HTML code optimization.
  3. Size reduction and optimization of JavaScript and CSS files.
  4. Removing CSS and JS code that blocks page display.
  5. Configure font downloads.
  6. Optimization of themes and images uploaded to WP.
  7. Enabling server-side compression.
  8. Some Additional methods.

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

1. Enabling Browser Cache

To prevent the pages of the site from loading every time and not slow down the opening of the web resource on the user’s device, you need to configure caching. In this case, they are saved once and then “tightened” during loading for a certain period of time. Data is updated at a specified interval.

There are several ways to enable browser cache in WordPress:

  1. By setting the .htaccess file. The expires <IfModule mod_expires.c> the module sets values ​​for caching various types of files – pictures, text, HTML-code, scripts. For all data, by default, a command is given to add to the browser cache, 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, such as W3 Total Cache, WP Super Cache, etc. and paid modules (WP Rocket). We would highly recommend using LiteSpeed Cache, which is a free plugin.

Before working with LiteSpeed Cache, you need to understand that you are dealing with a number of technical aspects of your website. You might end up breaking up your website’s CSS, HTML or DOM elements. We recommend activating only the following elements.


Sometimes Google PageSpeed ​​Insights recommends turning on the cache for search engine statistics services (J. Market) or Google Analytics. This data is cached initially, but with a short time interval, so it doesn’t particularly slow down the loading of a web resource. There is no direct access to these external site scripts unless you can install the Complete Analytics Optimization Suite plugin and then the Google web analytics service library will become local.

2. HTML Optimization

Bulky and complex code slows down the site. Its cleansing and compression provide faster page loading. You can optimize the HTML code manually, for example, by finding and removing extra spaces and attributes.

The semi-automatic cleaning method involves using Google PageSpeed ​​Insights. After conducting a performance analysis in the service, click on the “Cut HTML” button, and then “View Content”. It remains only to replace the used version of the code with the proposed new one. But this option is suitable only for very small sites with simple functionality.

But for WordPress sites, there are simpler methods for optimizing your code automatically. For these purposes, effective free plugins are offered, for example, Better WordPress Minify, Autoptimize, and others. In them, to minimize the size of HTML and speed up pages, just select the appropriate section and perform a simple setup. You can also use the previously mentioned plugin, LiteSpeed Cache for doing the same.

3. Downsizing and Optimizing Javascript and CSS Files

CSS and JavaScript are often a slowing factor in opening web pages. Reducing their size by removing hyphens, spaces and various comments is another important optimization task for Google PageSpeed ​​Insights. You can optimize CSS and JS files by analogy with HTML. Popular free plugins suitable for this are Autoptimize and WP Minify Fix.

The corresponding work in Autoptimize comes down to setting checkboxes opposite the two items – “Optimize CSS code?” And “Optimize JavaScript code?”.

If the resource is rarely updated, it is better to minimize the main CSS and js files manually using online minimization services, for example, cssminifier.com for CSS files and jscompress.com for js files. There is a lot of such plan of online services and all of them easily cope with this task.

In addition, it is recommended to take care of the correct positioning of JavaScript and CSS relative to other content. CSS is best placed at the beginning and JS files at the end of the page. In this case, both the appearance and the performance of the web resource will cause only a positive response from users.

4. Removing CSS and JS Code that blocks a Page Display

Often, site performance is reduced due to the fact that CSS and/or JS files prevent the loading and normal display of the top of the site content.

The solution may be to configure asynchronous loading, in which instead of sequentially displaying the page content, the most “heavy” JavaScript files are launched last. To speed up, the Google ExtSrcJs script is used (the code <script src = “…”> changes to <script extsrc = “…”>, and the extsrc.js file is also connected.

It is also possible to configure the loading of secondary CSS files after loading the page, but it is necessary to take out the CSS, which is responsible for loading the top of the screen and put it in the HTML code.

It’s even easier to get rid of blocking or slowing down the page display using the Autoptimize plugin mentioned earlier. In the Javascript options section, uncheck the box for “Force JavaScript in?”. And in the CSS options, you need to make the option “Inline all CSS?” Active.

5. Font Download Settings

Not only “heavy” JavaScript and CSS files, but also Google and Font Awesome fonts negatively affect page display. They slow down the site, and can also block the display of content.

The main way to configure fonts is to use asynchronous download using 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 way to speed up the download of Google fonts is to install the special Disable Google Fonts plugin. Or configure the setting in your LiteSpeed Cache plugin.

But do not forget about the “old-fashioned” method, 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 a CSS file.

Also, Font Awesome and Google Fonts can be accelerated by translating them to the Content Delivery Network (CDN). These are remote servers that facilitate lightning-fast data transfer.

Pro-tip: Use BunnyCDN to Speed Up Your Website By Bringing Your Content Closer To Your Users.

JS scripts and heavy graphics are also often transferred to CDNs, leaving only HTML code on the main hosting of the web resource. An example of a link to Font Awesome fonts in the Content Delivery Network:

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

6. Optimization of Themes and Images uploaded to WP

For the WordPress engine, the “ease” or “heaviness” of a web resource is largely determined by the chosen theme. If it feels like the page loading speed is low (like the Google PageSpeed ​​rating), then it’s advisable to choose a faster alternative.

The abundance of downloaded graphics files can slow down the site. Here are some key tips for optimizing images on WP:

  1. Delete all unnecessary graphic files from the server. If the graphics weigh a lot, but not too informative, then it should be replaced with text.
  2. If possible, use JPEG images. Their compression does not imply a deterioration in picture quality. Even a file that is reduced by 25-40% against the source will have a pleasant appearance.
  3. Don’t use 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, for example, TinyPNG / TinyJPG
  4. You can also use plugins to compress image files in WordPress itself, such as for example WP Smush
  5. Get rid of various “garbage” in the graphic material – comments from designers, redundant palettes, etc. The Smush.it service is able to help with this.
  6. Do not scale image sizes using width and height or CSS. One resizing graphic file weighs quite a lot and takes a long time to load. It’s better to add several images at once, which are adapted for various devices (desktop computer, smartphone, tablet). Moreover, the WordPress functionality includes the ability to use images with different resolutions depending on the screen resolution. To automate the loading of the desired image, use the plugin for WordPress – Imager.

PRO-TIP- Use Imagify (paid) to automatically optimize your images when they are uploaded.

7. Enabling Server-Side Compression

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

You can enable Gzip by contacting the technical support of the hosting provider. It is also possible to perform activation on your own: if your server is running 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
# Удалить ошибки браузера (требуется только для очень старых браузеров)
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 troubleshoot server-side problems is to switch to a more modern and faster hosting with advanced configuration options.
We recommend you using Hostomy or Interserver.net to host your website.

Pro-tip: Avoid using GoDaddy to host your website files.

Additional Methods to Increase Website Speed

There are other ways to increase the speed of loading a site. First, it’s worth highlighting a number of works that are not directly related to the WordPress engine and are carried out on the server-side:

  • Configure Nginx / Apache
  • active use of CDN; We would highly recommend you using BunnyCDN.
  • database optimization (removal of revisions, extra tables, spam, etc.);
  • setting data transfer protocols, including HTTP / 2 and TCP;
  • Reduction in the number of redirects (301 redirects).

Other settings for the content management system itself include the following:

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

After the optimization is completed, you should repeat the test in Google PageSpeed ​​Insights to find out a new performance rating and to exclude other errors or problems.

Conclusion

If your WordPress site’s Google PageSpeed ​index is ​at 70 points or more, then your website is optimized enough. If the score is lower, then you should work on acceleration. Optimization according to the recommendations of the service should begin in the order in which they are presented. The greatest benefits to improve performance will come from the very top of the list.

If you want to speed up the site, but are not sure that you can do it yourself or are experiencing a shortage of time, we advise you to contact Boss Funnel optimization specialists, you can leave a message in the live fb-messenger and we will get in touch with you.

Vaibhav Gupta is the founder and CEO of bossfunnel.com and writes about different technology platforms such as Android, iOS, Windows, and Macintosh. He loves to share his experience through his blogs and help fellow bloggers.

Write A Comment