Category Archives: Google PageSpeed

Speed is Everything — WordPress PageSpeed Optimization Plugin

If you’ve got a slow loading WordPress website, you know awful it is waiting for your pages to load.  You wonder whether or not you’re losing visitors, an whether your search engine ranking is hurting because of it.

And you wish there was a simple solution, a simple plugin that just fixed the problem.

Well, we’re excited to announce that development has begun on the WordPress plugin version of the incredible Accelerator website plugin that dramatically improves Google PageSpeed scores.

Accelerator, as a website plugin, installs to a traditional website and in minutes it optimizes the web pages and “ticks off all of the checkboxes” that Google PageSpeed Insights recommends that webmasters optimize in order for their pages to load blazing fast.

All without the webmaster needing to know all the technical mumbo-jumbo.

And now we’re bringing that same functionality to the WordPress platform.  Development started April 3rd, and as of the time of this post (April 11th) it is already a week ahead of schedule.  Expected completion and release date is July 4th — expect some fireworks!

This plugin will include support for:

  • GZIP Compression
  • Browser Caching of static resources
  • Minification of HTML
  • Minification of CSS
  • Minification of JavaScript
  • Image Optimization
  • Caching of External JavaScript and CSS
  • Deferral of Render blocking Resources (CSS/JS)
  • Automatic detection and injection of critical above the fold CSS

The  best part of all of this is that it is expected that you’ll be able to take advantage of all of those features, just as easily as the Accelerator as a Website Plugin version, but right through the WordPress plugin interface.

Speeding Up Your Web Pages: A Google PageSpeed Checklist

When Google PageSpeed first hit our radar, it seemed there was a lot of vague and sometimes contradictory information available on how to optimize web pages to load and render faster.

It was hard to tell where to start, and in which order to proceed. We wish we had had a simple checklist telling us exactly what needed to be done.

If you’re one of those webmasters that loves to follow a checklist, we hope this will help you out.

Google PageSpeed Checklist

  • Enable GZIP Compression
  • Enable Browser Caching
  • Optimize your Images
  • Minify all CSS files
  • Minify all JavaScript
  • Defer or Asynchronously load all JavaScript links
  • Asynchronously load all CSS links
  • Inline any Critical Above-The-Fold Styles
  • Minify the web page itself (HTML)

If you can get through that, you should be getting a 95 out of 100 for Google PageSpeed.

In A Little More Detail

Enabling GZIP Compression

With this step, you would turn on your server’s compression technology with instructions in a special control file.

Enabling Browser Caching

Here, you would provide specific instructions in a control file, that would tell the server to tell the visitor’s web browser, how long to keep static resources (JS, CSS, Images) cached.

Optimizing Your Images

This is actually one of the most important and easiest things you can do to improve your PageSpeed score.  Run your images through tinypng.com

Minify your CSS Files

This is where you strip  your CSS files of any white-space and comments.  By minifying, you can often reduce the file size of your resources by half.

Minify your JavaScript Files

This is where you strip  your JS files of any white-space and comments.  This step is a little trickier than that of the CSS minification, as JavaScript is very sensitive to an incorrectly minified file.  Be sure to test your code once you’ve minified your JavaScript.  Always keep a backup of your non-minified JS.

Defer or Asynchronously Load all JavaScript Files

JavaScript files are considered “render blocking” resources, which means that the HTML page will not “render” until all “render blocking” resources have loaded.  To speed up the rendering of your HTML, to have your page appear to load faster to the visitor, you need to “defer” or “asynchronously load” all of your JavaScript resources.

Asynchronously Load all CSS Files

Just like the JavaScript files, CSS files are also considered “render blocking”.  By asynchronously loading the CSS files, you will have the HTML render immediately.  The trouble with doing this step, however, is that the page will show as unstyled until the “asynchronously loaded” CSS files are loaded.  This is called the “Flash of Unstyled Text” (FoUT).  You can overcome this by implementing the next step.

Inline any Critical Above-The-Fold Styles

Determine which styles are critical to the rendering of the above-the-fold content, and inline them into the HEAD region of your HTML Page.  If done correctly, this will eliminate the FoUT.

Minify your Web Page (HTML)

Last thing to do is to minify your actual web page.  This can reduce the size of your web page by 50%.

See How You’re Doing

Each one of the above tasks is worth a different “weight” of score depending upon  what else may or may not already be completed.  You can test out to see how your page is working by going to superaccelerator.io