I remember how the web used to be just over a decade ago – It was all “HTML this and CSS that”, which was impressive back then, but it doesn’t hold a candle to modern websites. Just take a look at Amazon.com 10 years ago in comprassion to today’s Amazon.com.
It’s interesting to see just how the Internet will grow over the next decade, whether that’s more interactivity or simplicity, one element remains vital: speed.
I’m pretty sure it goes without saying why speed is important, but let me divulge myself for a moment. Website performance accounts for a large portion of how we interact with pages and ultimately how long we’ll stick around before leaving. Take a look at recent developments with net neutrality in the USA, that’s all about speed and driving traffic, check out: The Open Internet: A Case for Net Neutrality.
Website performance is something to strive for and shouldn’t be taken for granted as it plays a vital role in mapping the web, so it’s important to streamline your pages and speed up content to give users the best experience possible.
“What’s concatenation” I hear you ask? Simple, it’s a way to combine files together to reduce segmentation. For instance, say you’ve split your CSS across multiple files, it takes longer for users to download them as there are more HTTP requests – Instead, combining CSS into one file requires one HTTP request, reducing load times. Check out “Combine External CSS” for a little bit more info.
It’s important to note with a single file that it’s well structured and documented, especially with complex code.
4. Image Optimization
Ever been on a website and the images load like it’s 1998? We’ve all been there, the result sets off alarm bells which can put you off returning. Imagine entering a shop, only to get stuck at the revolving door – it’s essentially the same principle, something that shouldn’t be an issue.
When it comes to speeding up your images you need to focus on three things: size, format, and the src attribute.
Image Size: Images should be as small as possible, but it depends on the dimensions. To reduce size, crop the image to fit the width and height parameters of the page it will live on, reduce colour depth to the lowest acceptable level (don’t do this if you think it will considerably reduce quality), and remove image comments (which is essentially fat that doesn’t need to be there).
Image Format: The standard image format usually falls down to either JPEG or PNG, depending on your needs. JPEGs are for photographs and realistics images, whereas PNGs are for line art and text heavy images.
Src Attribute: The src attribute tells your page where to go to grab the file, so be sure that this info is correct and not left empty. In cases where it is, the browser will make a request to the directory of the page, leading to unnecessary traffic.
3. HTTP Minimization
The quickest way to improve load times is to cut out the fat, or in this case the excess code.
As mentioned in the concatenation section above, combining multiple files into one reduces HTTP requests, this can be either stylesheets or scripts. In terms of loading, scripts can be rather cumbersome, so place them at the bottom of the page so the basic structure and style can be loaded first.
Although images are a key ingredient for any page, it’s best to use CSS whenever possible as it reduces load times considerably.
Check load times with APM Cloud Monitor.
2. Browser Caching
Visiting a website automatically stores data, caching it within your browser as temporary storage, so the next time you head back the content is pulled from your browser, which stops another HTTP request being sent to the website’s server.
When a user hits a site for the first time this isn’t the case, none of the content is cached so the page can appear a bit slow. However, the next time they arrive they already have the data ready to be displayed, resulting in content appearing on screen within milliseconds.
So how do you implement browser caching? Well, if you’re not tech minded then it might be a bit tricky. Controlling your site’s cache requires you to implement a bit of code, here’s a simple example by GTmetrix. For a more in depth view, check out Google’s Optimize Caching.
A CDN stands for “Content Delivery Network”, it’s a way to disperse files onto servers located globally around the world, making it faster to deliver content to the end user.
Let’s look at an example: Your hosting provider’s origin server might be located in the USA, but most of your users are based around Europe, making download times that little bit slower for users across the pond. A CDN grabs content from your origin server and caches a copy on the global network. When the user makes a request, content is grabbed from the nearest server, reducing load times considerably.
Speed matters – People don’t like to wait around, plain and simple, but by concatenating files, utilizing browser caching, and implementing a CDN, you can drastically improve load times and provide a better experience for your users.
These are just a few ways to speed up load times, with many more tips and tricks out there to accelerate your site’s performance. If you know of any others (or you think I’ve missed a bunch), like cookie-less domains, RTT minimization, or GZipping, then please let me know in comments below.