5 Sure-fire ways to speed up your website in minutes!

[column_three_quarter]

Looking for some quick ways to give your website a boost? Customer experience is everything, and decisions are made in seconds online, so you don’t have long to make a great first impression! Our experienced web developer John has popped by to share some of his insider knowledge, read on for sure-fire ways to speed up your website today.

Back when I first began building websites (many, many years ago) we designed and built websites with careful consideration for speed. As a matter of fact, the speed of the delivery of the content was the most important factor of any website. ISDN and Broadband connections were for the privileged, and most users still operated on dial-up connections of around 56kbps, thankfully things have moved on since then.

Google thinks speed is important, and rightly so! This became quickly apparent way back in in 2011 when Google launched its Online Speed Tool. This hasn’t changed and Google still considers page loading times as one of the contributing factors for Page Rank. So, with the evolution of Responsive Web Development (RWD), animation rich websites and developers having to cater for multiple platforms (including tablet and mobile), website file sizes are as fat as ever, and it appears they won’t be shrinking anytime soon.

So what little changes can you do to deliver your website content faster? Well, there are a lot of contributing factors that can slow down your website, hundreds of them in fact. These range from simple unoptimised imagery, to slightly more complex issues like heavy JavaScript library plugins. The following tweaks focus on some hidden gem techniques that we use here at Boxed Red, and you don’t have to drastically modify the existing code of your website.

We’ll presume that your website is already in production and receiving traffic and please note, unless you’re server tech savvy we wouldn’t attempt the following in case you change code in the wrong place. Need help? Give us a shout at Boxed Red.

Let’s get optimised!

1. Optimise your images

It’s no surprise that images account for most of the downloaded bytes on a web page. Optimising your images will return some of the biggest savings and performance improvements for your website. The fewer bytes the browser has to download, the faster the browser can download and deliver content.

Here are a few handy tools to optimise your jpeg and png images in seconds.

Great one for jpeg images: jpegmini.com

For PNG images: tinypng.com

For almost all formats: compressor.io

2. Gzip Compression

Gzip is a file format and a software application used for file compression and decompression. Gzip is the most popular and effective compression method currently available and can reduce your response size by up to 70%. If you’re not already using Gzip on your website, you should be!
I won’t go into much depth with Gzip but here is an interesting article on the technology.

On an Apache server, you can enable Gzip via the .htaccess file. Please note if you’re hosting your website on your own VPS/Server you may need to enable some Apache modules

Just add the following lines of code to your .htaccess file to enable Gzip compression

# BEGIN GZIP
 <ifmodule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
 </ifmodule>
 # END GZIP

Not using Apache? The lovely people at HTML5 boilerplate have prepared a list of configurations to enable compression for all server types. What lovely guys. https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/ https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/ https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/ https://boxedred.com/5-sure-fire-ways-to-speed-up-your-website-in-minutes/Visit here: https://github.com/h5bp/server-configs

3. Set Expire Headers In your .htaccess

One way in which browsers help speed up rendering a webpage is taking data and caching it. These can be images, CSS and JavaScript files. Caching is a clever way to store websites assets locally on your visitor’s device, so the next time they access your site, the browser will intelligently use the assets already downloaded.

If your images never change then you can set the expiry on these items for a long time in the future so the visitor’s browser will utilise data from their own browser cache, this is particularly useful for returning visitors.

So let’s go ahead and set some Expiry Headers. Copy the following into your .htaccess file.

<ifModule mod_headers.c>
 # Turn on Expires and set default expires to 3 days
 ExpiresActive On
 ExpiresDefault A259200

# Set up caching on media files for 1 month
 <filesMatch ".(ico|gif|jpg|jpeg|png|flv|pdf|swf|mov|mp3|wmv|ppt)$">
 ExpiresDefault A2419200
 Header append Cache-Control "public"
 </filesMatch>

# Set up 2 Hour caching on commonly updated files
 <filesMatch ".(xml|txt|html|js|css)$">
 ExpiresDefault A7200
 Header append Cache-Control "private, must-revalidate"
 </filesMatch>

# Force no caching for dynamic files
 <filesMatch ".(php|cgi|pl|htm)$">
 ExpiresDefault A0
 Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
 Header set Pragma "no-cache"
 </filesMatch>
 </ifModule>

Tip! If you need a cache buster, you can append parameters, ie. ?v1.0 ?v.1.1 to your CSS href meta tag so the browser will be forced to download the new stylesheet

Here’s a cache busting example:

CSS

<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />
<link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" />

JavaScript

<script src="app.js?v1.1">

4. Minify CSS and JavaScript

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments, white space and so on. Minifying CSS and JavaScript is a common practice for websites in production and can reduce your file sizes.

There are many online automated tools to compress your website’s CSS and JS for you, here are a couple…

https://cssminifier.com/
https://jscompress.com/

At Boxed Red we tend to automate the minification processes during build time, as minifying can be a laborious task during development and it’s one less thing to worry about before things go live. We use an automated task runner called Grunt to minify our CSS and JS automatically. If you’re not already using automated task managers then we suggest you check it out Grunt!

5. Use a content delivery network (CDN)

A content delivery network (CDN) is a system of distributed servers that deliver webpages and other Web content to a user based on their geographic location.

You can speed up your website by using CDNs for your most common JavaScript frameworks and libraries. Not only saving your hosting bandwidth but you’re also most likely delivering a globally distributed pre-cached version, thus boosting performance.

Here’s a typical example of using CDN over self hosted for jQuery…

Self-hosted…

<script src="https://www.yourwebsite.com/js/jquery.min.js“></script>

CDN…

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


You can also outsource most of your assets using a CDN server provider such as CloudFlare www.cloudflare.com

On average, a website on CloudFlare loads twice as fast, uses 60% less bandwidth, has 65% fewer requests and they even have a free package!

That’s it! I hope none of the above was too heavy, these tweaks were intended to be deployed very quickly without disruption to your current code base, we hope you find them useful.

John

Web Developer – Boxed Red Marketing

[/column_three_quarter]

[column_quarter_last] [/column_quarter_last]