All posts by Brandon Devnich

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

i3dTHEMES://interactive 25 – Accelerator Optimization

Colin Fraser, from the i3dTHEMES design lab was telling me about something the development team at the hugely popular space simulation game Start Citizen was saying about what they do.  It went roughly “we solve problems you didn’t know you had, with technology you didn’t know existed”.

Continue reading

The 3 Best Reasons to Build Your Website with WordPress

We get asked regularly whether someone should continue to use a website editor such as Dreamweaver or Expression Web to build their website, or switch to a CMS platform such as WordPress.

Many website operators who have been used to using a traditional website editor have heard of “that WordPress thing”, but often do not have any idea what it is, and feel that the effort involved in learning something new outweighs any possible benefit.

We’re can all be reluctant to change when we don’t understand that which is unknown to us — it is the primal battle that powers fear.  Or rather, that fear powers.

When it comes to WordPress, if you can understand three key benefits that it brings to the table, you may realize that there is nothing to fear.  In fact, you will become empowered.

Reason #1: C is for Content (no, not for Cookie)

If any of you recall Cookie Monster’s from Sesame Street, this headline is sung to the tune of his “C is for Cookie” song.  In our version of the song, “C is for Content”, and this probably one of the best parts of WordPress.

You see, with WordPress, your primary focus is just the content.  Once you have the site set up with global elements, and one-time-setup widgets, your focus should be entirely on managing your content.  And WordPress makes that easy.

What I mean by this is that WordPress focuses on you editing and managing the Pages, the Posts, and any Comments you get on those pages or posts.  You’ve heard the saying that “Content is King” — it truly is.  With WordPress, adding a new page or a new blog post can be done in seconds.  The complexity to adding a new page, and making sure it is tuned for the best search key-phrase is minimized by the interface that WordPress provides.

Reason #2: It’s Extendable

This part is key — there are nearly 50,000 plugins available to extend the functionality of the WordPress platform, that can each be installed in under a minute right through the WordPress dashboard.

It really has never been easier to add additional functionality to your website.

Many of the Plugins are free and/or have a premium upgrade path.  In many cases there are free options — remember, you often get what you pay for — and also “freemium” plugins where you get a limited set of features for free, and then you can optionally pay for more advanced or premium features.

Reason #3: Switching your Look & Feel is Easy

This is really the cool part about WordPress.  Because your content is stored within a database, you can apply a different “theme” (or skin), to your site just as easily as clicking a button.  Granted many themes have specialized widgets that help with the display of advanced web components, such as Sliders, Info Boxes, and Animations, still switching a theme in WordPress takes considerably less time than it takes to do a traditional “content transfer” from one website template to another.

Being able to change your look and feel with the click of a button and a few updates to specific components allows you the freedom to keep your website current without having to invest a lot of effort in the process.

Knowledge is Power

So, the next time you need to do a major upgrade to your website, if you’re current site is using a traditional website template, consider WordPress instead.

Being able to focus on what’s important, the content in your site, as well as adding functionality on the fly, or changing the look of your site in the future, all puts the control of managing your site back into your own hands.