Propeller Websites | Graphic Design | Email

I feel the need. The need for speed!

Whilst its something we all notice when visiting and using websites, speed isnt usually something that clients attribute to SEO and page ranking. The reality is that in the mobile age speed is one of the most critical factors involved in where your website is likely to end up in Google's search algorithm.

If you consider the sparsity of Google's own homepage, their philosophy is unmistakeable - Google is evangelical about speed.

Google ran a campaign in 2009 called 'Every Millisecond Counts' urging website owners to streamline their homepages and ultimately penalising websites with slow load times in their ranking. Google revealed that slowing down its results 'had a measurable impact on the number of searches per user' - longer delays - fewer searches and Vic Gundotra, Google's VP of Engineering stated that 'our internal data shows that users clearly, even subconsciously, prefer sites and applications that are snappier'.

Google discuss why every millisecond counts

In 2007 it was revealed that even just a tenth of a second increase in the loading time of amazon.com cut sales by 1% and a half-second delay in displaying Google results cut revenue by 20%.

On the web, speed is life.

What makes websites slow?

Bloated markup, stylesheets & scripts

According to HTTP Archive, the average webpage surveyed in March 2017 weighed in at a whopping 2.5Mb with over 20% loading 11-20 script tags and and awful 10% loading 41-50! In contrast, the page you viewing is a relatively waif-like 739kb.

The explosion of bloated markup is partly due to the proliferation of mass-market CMS like WordPress or Joomla being built around a mish-mash of layered frameworks, themes and stuffed full of one-click add-ons, all bringing their myriad stylesheets and scripts along for the ride. In fact, the easiest way to spot a typical WordPress site is to view the source code (Option+Command+U on Mac) and count the dozens of stylesheet and script links - each one taking up a server request, time and valuable bandwidth.

Non-responsive, poorly optimised images

A local company recently asked us to perform an audit of their Joomla-based website which wasnt performing to their satisfaction. We were shocked to find that on one page alone, they were serving up a 14Mb image. 14Mb, despite only actually being displayed at 250px wide. Imagine loading one 14Mb page on your phone? Unfortunately this isnt uncommon.

When Propeller build bespoke websites using ExpressionEngine or Craft we design and build around a heavily-optimised responsive image setup ensuring that the website serves images which are sized appropriately for the device you are using. Not only does this ensure that you are not loading huge desktop-size images on your iphone but also provides large, high-quality images to that one person you know looking at your site on a 4K display… Furthermore, the cropped and appropriately sized images are optimised and delivered to the browser compressed.

Propeller rebuilt the aforementioned site in ExpressionEngine with a resulting speed improvement of over 60% and a reduction in bandwidth of 70% on the homepage alone. And that 14Mb image? We got that one served at a measly 5.1kb.

Third-party widgets and ads

We're often asked to include Facebook and Instagram feeds, booking widgets, even weather widgets. Everyone likes to feel the awesome power of a fully battle-ready pageful of Insta-Google-Tweet-Face feeds and widgets but third-party widgets can often bring your website to its knees. The same goes for loading your page up with ads.

Bargain-basement hosting

Domain registration and hosting as never been cheaper. You can hop on over to GoDaddy and pick up hosting for $1 a month. One Dollar!

Unfortunately, the reality of this ghetto hosting arrangement means large numbers of websites crammed into servers using up critical resources. These servers are also likely to be old or poorly specified and set up to run just about anything. The net result of this is that you are likely to experience significant slowdowns and/or increased downtime.

What is a Performant website?

A Performant website is one which is optimised for fast, efficient delivery to the browser using as little precious bandwidth as absolutely necessary. A lot of planning, careful coding and best practices in image delivery and optimisation in addition to the use of quality hosting all combine to deliver a fast website.

A Performant website is generally what makes the difference between being ranked highly on Google or languishing in obscurity.

Building high-performance websites is not easy and is certainly not standard. The cookie-cutter nature of many website CMS', themes and free or cheap software as a service websites such as Wix or Squarespace today means that truly performant websites are a rarity. Unfortunately, as most of these websites 'look' ok to their owners, they often dont understand the difference between what constitutes a professionally designed and built website and ineffective garbage.

What's Involved?

• Images must be correctly sized and optimised. ImageOptim is a great free tool which can dramatically reduce the size of your image files.
• Scalable Vector Graphics (SVG) should be used where possible. Scalable Vector Graphics are great for icons, logos and myriad other uses too, mostly offering drastically reduced file sizes whilst able to respond from small screens to huge with no discernible difference in quality.
• Stylesheets and javascripts should be combined to as few as possible, reducing server requests.
• Stylesheets and javascripts should be minified. Minification simply removes all of the formatting, white space and blank lines, tabs, spaces etc which browsers dont need - often resulting in one long line of code, making the delivered files as small as possible.
• Stylesheets and javascripts should be compressed for delivery. Most servers can gzip files for transmission and browsers un-compress on the fly with little noticeable performance hit.
• Cache, cache, cache. Why serve something again and again when you can send it once? Setting the correct response and expires headings on your website's pages and assets tells the browser to 'cache' or save them for a period of time, saving them from being loaded each and every time you view the page.
• In our ExpressionEngine and Craft builds we use template caching, saving the CMS from building and rendering each page every time it is loaded, instead 'caching' it either in the database, as a flat file or even better using memcache. This in turn can ease the load on the hosting server by sucking up less memory and database queries.
• When it comes to hosting we cant stress enough the value of well-ran, high-performance options. Nexcess offer high-performance hosting which is tailored specifically for the CMS you run on it. In comparison with standard cPanel-based shared hosting, running ExpressionEngine or Craft on Nexcess is a night and day experience.  In-fact, if you buy either an ExpressionEngine or Craft website from Propeller, we wont install it on anything other than Nexcess hosting - its written into the contract…

There are many more performance optimisations which all add up to ensuring that your website is performant and in-turn preferred by Google's ranking algorithms. We cant list them all here but suffice to say that we are constantly refining and improving the way we do things at Propeller to ensure that our websites are not only beautiful to look at but also fast and efficient, ultimately providing a superior return on your investment.

Following these guidelines will fulfil your need for speed and help you outrun even the fastest movers.

How can I check how fast my website is?

Google's PageSpeed Insights will measure the performance of your website, loading it twice, once using a desktop user agent and then using a mobile user agent, and provide suggestions as to how the websites delivery can be improved.

Google's Mobile Friendly Test appraises how easily your website can be used on mobile devices.

Hire an Expert

Propeller have been building high-performance websites for over 13 years. Most of our builds routinely sit in the lofty high-90's in PageSpeed scores and we only work with professional partners like Nexcess, ExpressionEngine, Craft, Lamplighter and so on. If you're in the market for a high-performance website, talk to the experts.