Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Mobile Page Speed Optimization for WordPress Sites

DZone's Guide to

Mobile Page Speed Optimization for WordPress Sites

If you've gotten wind of Google's new performance measuring tool, it might be worthwhile to check out this tutorial of how to optimize your websites.

· Performance Zone ·
Free Resource

Sensu is an open source monitoring event pipeline. Try it today.

Recently, Google is throwing challenges to mobile developers with its coming speed update. Preparation is the key here. An updated Google's PagesSpeed Insights tool can be used for initial analysis.

Image title

PageSpeed Insight tool now indicates the speed data but they are basing it on the Chrome User Experience report (where they recently announced that it includes country dimensions).

To be prepared for the speed up it is essential to speed your site. Below is a guide dedicated to WordPress sites.

How to Speed up your WordPress Site in Mobile

1. No Redirects Needed

The redirected mobile site like from yoursite.com going to m.yoursite.com can cause delay page rendering. The plain and simple rule is to  just make the site responsive using the original landing page URL. If it’s yoursite.com then let it be that.

2. Enable Compression

To enable compression, one fast way is to add the following codes in htaccess.

<IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>

Adding those codes do not only reduce mobile resources but all the site resources. Enabling compression can reduce the size of the transferred response by up to 90% which leads to the reduction of time to download the resource.  Enabling compression definitely improves first-time rendering of the page.

3. Leveraging Browser Caching

This is all about setting caching policy, whether the site resource can be cached or not and for how long.  According to Google, their recommended minimum cache time is a week and up to a year for static assets.

Working on browser caching would look like:

Image title


4. Minify Resources

When working with minifying resources it involves dealing with the reduction of redundant data on your HTML, CSS & Javascript.  It involves dealing with unused codes or using a shorter variable.

Specific tools are used for certain type of resource but for WordPress; we use W3C cache plug-in.

Image title

5.  Image Optimization

An image can be the main factor in slow loading mobile site.  In reality, it causes most of the downloaded bytes especially if it is not optimized for mobile.  The key here is to use a compression tool.

Simple hack: you can use Google PageSpeed Insights to download optimized images. Plus have some bonus; you can download minified JavaScript and CSS resources.

Image title

6. Optimize CSS delivery

External stylesheets can cause a delay if not properly optimized since it can affect the first rendering of the page. To improve CSS delivery, it is recommended to add small external CSS into the HTML file. 

Below is the recommendation from Google in inlining small CSS file

When the HTML document looks like this:

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

And the resource small.css is like this:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Then inlining the small.css would look like:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

7. Set Priorities for Content Visibility

Not all desktop contents are applicable in mobile. Setting priorities is vital here, especially when dealing with images.  It is recommended to limit the size of your HTML markup, images, CSS & Javascript. 

For a modern WordPress template, it is now much easier; all you have to do is hide the images or content that is unnecessary to mobile devices. Just go to its responsive options.

Image title

8.  Remove render-blocking JavaScript

The key here is to avoid or minimize blocking Javascript by applying inlining. Adding the small external javascript to HTML document is recommended. 

Below is another guide from Google Page Insights:

When the HTML document looks like this:

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

The resource small.js is like this:

  /* contents of a small JavaScript file */

Inlining the javascript would look like this:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Sensu: workflow automation for monitoring. Learn more—download the whitepaper.

Topics:
performance ,mobile ,google ,wordpress ,pagespeed insights

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}