At the end of the month I did a presentation on how to turbo boost your website. In other words a presentation in Manama, Bahrain on how you can make your website load faster. Here the presentation as a blog post in detail. Will be updating this blog post as time goes by.

I have been working on optimizing websites for years. This to make sure that they are search engine friendly. But also to make sure that the sites are quick and load quickly. Many websites are really slow and developed poorly. And that is bad for business. The methods for WordPress speed optimization are diverse. However, let me write down the most important ones:

• Forty % of all visitors of a website leave it when they have to wait more than 3 seconds (Kissmetrics article)
• When an e-commerce website earns $100.000 a day revenue wise, an extra second loading time can cost it up to $2.5 million in income a year.
• Google Cares (TTFB <=200 ms)

Speed Optimization Techniques

There are basically two ways to optimize your website speed wise. There are frontend and backend techniques.Frontend techniques are basically all matters or elements that are visible to the visitor at the frontend of the website. Elements such as HTML, CSS, and images. The backend is the the backend or Dashboard of the website. This is the database where all content is stored and the scripts running to display all this content. In the case of WordPress we are talking about MySQL and PHP.

Frontend

• Concatenation & minification
• CDN – Cloudflare, MaxCDN
• Image Optimization
• Content delivery: gzip / expire headers / etags
  Responsive and Adaptive

Backend

• Memcached (data)
• Opcache (page rendering)
• Device specific display of images
  Varnish / Proxy
• NGINX
• HTTP/2 PHP 7 / HHVM

Concatenate and Minify

The concatenation and minification of JavaScript and CSS helps a lot making your website load faster. By concatenating files the browser has less files to download. And due to the way browsers download sites using the HTTP/1 protocol less is better. Making the files is of course also good as the they become lighter and take less bandwidth to download.

In short:

• Browsers only load several files a the same time (~2 -8 connections) and servers often limit the amount of connections per visitor so less is more in this case as stated earlier
• Smaller files download quicker so it is wise to minify or to make them smaller.. jQuery 1.11.3 minified = 3* smaller than the regular non compressed file!
• Render Blocking files – Files that delay the rendering of the websites should be limited as much as possible. The less that happens the quicker the end user can see all.

Concatenation

As most browser work with HTTP/1 there are limitations to the parallel downloading of files to display a website properly. Most browsers allow 2 -8 connections – see browserscope table. HTTP 1.1 specs advice max 2, but fortunately most browser do not take heed of this advice. And with the arrival of HTTP/2 things have only gotten better. Servers do often restrict the no. of connections themselves as well though. This to limit the no. of leechers that grab content or to simply limit the amount of traffic per user so multiple users can be assisted. 

Minification

CSS and JavaScripts, but also HTML files can be compressed by removing all whitespace, comments and newlines. This way you can save a lot of KBs or MBs per file. This does make file content ugly and or hard to read. But it does make your website a lot faster. A bonus is that you can often do this without causing any issues with a plugin or with the general setup of your website. Concatenation of files often leads to problems as some scripts have not been written properly or as this causes issues because files need to be loaded at certain times. If that is the case the entire site could collapse!

Tip For Concatenation and minification we recommend WP Rocket (commercial and best option) or W3 Total Cache (best free option)

CDN

A CDN is a Content Delivery Network. This means in layman terms that all the static content such as:

• Images
• CSS
• JavaScripts
• HTML
• Cached Pages

will be loaded from different locations on the planet depending on the customer that is being served. If the customer is in the USA the files will served from a server located there and not from the location where the actual site is located. The site / domain could simply be located in Holland for example as the customer has his site and business running there.

Content of subject matter that is closer to the customer can of course be loaded or viewed much quicker. So a CDN makes your site much quicker accessible for customers. This is especially handy when you work with an international client base. If most of your customers are in the same location like let’s say Holland it will be fine to keep all in Holland. Also, for lighter websites a CDN tends to be overkill.

For imagewize.com we take advantage of MaxCDN and we love it!

Image Optimization

Image optimization is the optimizing of images for display on the web. On the internet images in general do not be too big and do not need a large pixel density like they do need for the printing press. That is why we often work with jpegs and pngs as those file types already work with compression techniques to make images lighter.

When you work with images it is paramount that you make them as light as possible and the your scale them to the appropriate dimensions so no web scaling by the browser is needed.. Images that need to be rescaled by the browser will take time and so slows things down in general. In sum make sure your images are:

• resized properly (lossless)
• are not larger than needed
• are not scaled by html, css or php

eWWW Image Optimizer is a great plugin to compress images and it is for free for basic compression. For better compression you will need a commercial version. I currently work with Imagify. This is an awesome image optimization plugin and is built by the same developers that also built WP Rocket Cache.

NB We recommend you to crop your images and to compress them as much as possible before you upload them! Photoshop, Affinity Photo or OSX Preview can be of assistance here, but there are many other programs out there including the open source Gimp

Presentation

The presentation was a success and the the Gslides or Google Slides can be watched here.