Speed Up Your Website

It is universally agreed that the faster your website loads, the better.  Nobody wants to wait around three or more seconds for a page to load. We are impatient.

And now, with over 77% of adult Americans owning a smartphone by the end of 2015 it isn’t a surprise that over 60% of search through Google, world wide, is done on a mobile device.  In addition, over 50% of e-commerce is also performed on a mobile device.

What those statistics don’t tell you is that mobile phones on 3G connections are a fraction of the speed of a wi-fi broadband connection.  What will load fast on a broadband connected desktop computer will take much longer to load on a mobile phone.

With mobile devices ranking above desktops for what hardware are being used to perform searches now, Google has made having a mobile responsive websites an absolute necessity.  If your website is not mobile responsive, your position in search will be impacted.  

In addition to being mobile responsive, websites must also make every attempt to ensure they are FAST ( loading and rendering as fast as possible).  Where we used to be concerned with the metric “your website has to load in under 3.5 seconds for a desktop computer on a broadband connection”, we now must be concerned with the “your website has to load in under 3.5 seconds on a mobile devices over 3G”.  Google just announced that the speed metric will be officially considered a part of the ranking index of mobile search results starting in July 2018.

Now, more than ever before, your website must load fast.

But if your website was barely loading in under 3.5 seconds for a desktop, how could you possibly get your website to load fast for a mobile phone?

You get your website optimized.

But how do you optimize it?  Where should you start? Does this mean optimize images? What is a CDN and do I need one?

There are dozens of ways to optimize your website’s performance, I’ll break down it down to the basics.

Tools to Evaluate

First, you should understand that there are tools available to tell you how well your website is scoring for speed optimization.  Some tools are more robust than others, and you should focus on one before moving on to another. The one we recommend starting with, when testing your website, is Google’s PageSpeed Insights.

PageSpeed Insights tells you what you’ve already optimized, what needs improvement, and what is a priority.

The trouble with Google PageSpeed Insights is that many of their recommendations are beyond the scope of the average website operator to implement.

But in reality, there are seven key areas that you can focus on to ensure your website is tuned for fast performance.

1. Image Optimization
2. Minification
3. Browser Caching
4. GZIP Compression
5. Deferral of Render Blocking Resources
6. Prioritization of Visible Content
7. Server Response Time

Image Optimization

The most important website performance task to tackle is to ensure that your images are optimized.  You want to ensure that your images are sized to the appropriate width and height, and have been properly compressed.  

This means that if your image is going to be the size of a thumbnail (120x90) on a web page, the actual image should be 120x80, not 4592x3064.  You can use tools such as Picresize to resize your images.

You should also make sure that all images are optimized using some tool such as TinyPNG that can further reduce the filesize by up to 80%. What was once a 3.68MB image (in original un-sized, un-optimized form) can instead be served at 3.4KB, which is a 99% reduction in file size.

If the file size is 99% smaller than the original, it means it can be transferred in 1% of the time of the original.

Minification

To minify a web page, CSS or JavaScript file, you are essentially stripping out any un-required characters, usually whitespace and comments.  In doing so, you can save up to 50% of file transfer time.

You can minify your CSS and JavaScript files with online tools such as minifycode -- you upload the content of your files to the interface, run the tool, and then save the contents back to your website.

It is recommended that when you do this that you save the minified contents into new .css or .js files named with a .min.css or .min.js extension, just so that you have a backup of the original files to work from, should you need to make changes in the future.

Minifying HTML is also important to do, however you need to keep an entirely separate copy of your .html pages (in a backup folder) because you do not want to change the file extension on a web page from .html to .min.html.  You would apply the minified HTML directly to the .html file in your website. Again, I cannot stress how important it would be to keep a backup of your entire website when you go to minify your html, because once it has been stripped of all comments and whitespace, it becomes more-or-less uneditable with whichever website editor you’ve been working.

Browser Caching

Enabling browser caching allows for a faster load of secondary pages.  While it won’t speed up your visitors first hit to your page, it will speed up secondary page hits.  If your website experiences lots of traffic at any given time, it can reduce the load on your server (by not having to serve a copy of each resource every each time a visitor browses your website), which can help to keep down the server response time.

You can enable browser caching by adding a snippet of code to your .htaccess file in your website.  This task should take you no more than 5 minutes implement.

GZIP Compression

Much like enabling browser caching, enabling GZIP compression should only take you a couple of minutes.  It involves dropping a little bit of code into your .htaccess file.

What GZIP Compression does is it enables server-side compression of your HTML, CSS and JavaScript files.  The files are compressed, transferred, and the uncompressed automatically by the visitors web browser.

This can reduce file sizes a further 70% or more.  Combined with minifying your web pages, your web pages, CSS, and Javascript could transfer up to 4 times faster.

Deferral of Render Blocking Resources

When a web page is requested by a web browser, the HTML is loaded, and then any CSS and JavaScript files that are within the document get requested.  If they are loaded in the traditional way, they are considered “render blocking”. Render blocking means that the web page will not render until they are loaded and parsed by the web browser.

You probably have clicked on a link and before the web page is displayed, your cursor or some progress indicator spins, and spins, and then spins some more.  This is the render blocking mechanism waiting for all of the CSS and JavaScript to load. If it takes longer than 3.5 seconds, you’re going to lose visitors.

What you can do to mitigate the render blocking of these resources, is to “defer” their loading.  By deferring them, we’re having them load at the end of the page. There different techniques to doing this, each with their own pros and cons.  

For most situations, combining all of your JavaScript into a single file, and then referencing at the end of the page with the “async” attribute applied is usually the best solution.  This would look like:

<script async src=’/scripts/my-home-page-javascript.js’ type=’text/javascript’></script>

For CSS files, the best solution is to use the new loadCSS version 2  mechanism that takes advantage of new technology that will be supported in upcoming browsers (and is supported currently in Chrome) called the rel=’preload’ option for stylesheets.  

Prioritization of Visible Content

When you defer your render blocking CSS files, for a brief period of time after the web page is displayed but before the CSS is loaded, you will see what is called the Flash of Unstyled Content (FoUC).  The FoUC is when you see unstyled black text on a white background, and then a brief moment later your styles start making the page more presentable, usually in a jerky method while everything re-assembles.

You want to avoid this at all costs.

To do this, you need to prioritize your visible above-the-fold (what is visible in the browser window when someone first visits your web page) content by injecting the critical path CSS directly into your web page.  Critical path CSS is all the CSS is that is required in order to render the above-the-fold CSS.

To do this, you need to determine what the critical path CSS is, and then place into the <head>...</head> region of your web page.  Every page’s CSS is different, so you need to repeat this process for each page.

There are tools out there that can calculate your critical path CSS, such as ​Criticalcss.  

Server Response Time

It used to be that website operators were primarily concerned with this metric, and this metric only.  The rational was that if you had a fast enough web server, everything else didn’t matter. But in today’s day and age, because mobile devices load web pages (and their associated resources) slower than desktop computers, having a fast server isn’t enough because the connection is limited to the slow mobile data connection.

To ensure that your server response time is as low as possible, you should make sure that your web server is using fast hardware, and that the server is not overloaded.  If you can find a web server that offers “Solid State Drives” (instead of the traditional hard drives), lots of RAM and fast CPUs, then go with that. If you’re on a shared hosting plan, monitor the server response time for slow periods -- it may be that there is a lot of traffic and resource usage on your server.

With Google PageSpeed Insights, it will tell you if your server response time is too slow.

Another way to reduce your server response time is to use a website caching plugin.  While it used to be enough to just have a caching plugin, now you need to focus on all of the other aspects of speed optimization, which many caching plugins do not support.  When looking at speed optimization plugins, if you’re running your website on the WordPress platform, be sure that it supports all of the previous optimization tasks that I’ve mentioned.

Other Speed Optimization Techniques

If considering the concept of pure load time, another way that you can speed up the load of your web pages is to use a Content Delivery Network (CDN).  A CDN is a service that can serve your files from different servers located across the globe. Each server will store a copy of your web page and supporting files.  Depending upon where your visitor is located on Earth, the CDN network will serve your website files from the closest CDN server, thus making the load of those resources faster.

Consider your website being hosted in Austin, Texas, but your visitor is in Johannesburg, South Africa.  It would make sense that a CDN that served your website files from a server in South Africa would be faster than fetching them from the origin server in Texas.

Using CDN is just one piece of the puzzle, and often one of the last, as it should really be in place once you have everything else fixed.  If you use a CDN while you’re still in development, it can mean that you’ll have to constantly clear your CDN’s cache. If neglected, it could mean that some visitors may get an an inconsistent view of your website.

In Summary

There are a lot of pieces to solving the “how to make my website load as fast as possible” puzzle, some more significant than others.  If being listed in the search engines is important, making sure your website load time is optimized is absolutely critical. If you’re not ready to do the optimization yourself, you can hire professionals that can do the job for you.  There are also plugins available that can automate much of the optimization process for you.

About the Author