Is it even something I should be worried about?
Well, yes, it is. You see thanks to the modern age and the marvels of most people’s internet connections, few people in the world are going to be content to sit and look at a screen loading for anything more than a few seconds. Your site needs to be as up to date as possible, and there are some simple housekeeping steps you can follow to make sure that your site is performing to its best capabilities. Shall we get started? Good, let’s go.
Check your current website speed
Yes it’s a simple on, but, before you can really start to think too much about how fast your website is going to load, you need to be completely sure of what you’re already dealing with. So, have a check how your website is already doing. There’s always room for improvement, but, checking how fast your site is currently loading will help give you an idea of how much work there is to be done.
Fortunately, there are many free tools and extensions out there to help you get an idea of how swiftly your website is loading, so, you’ll not have to dig into the wallet to check your current optimization. Try these for a start.
- Web Page Test will show you the performance of your site in different browsers
- Pingdom mimics the way a page is loaded in a web browser all in one easy to use package
- Page Speed is an extremely useful Firefox add on that will allow you to not only test the speed of your site, but will also analyse and suggest ways to fix performance issues.
- Yslow will evaluate your site’s speed and will also give you great tips on how to improve performance
Not bad for free, right?
Optimize your images
Gif, JPEG, PNG, there are lots of ways to go about storing your images and lots of ways to go about optimizing them, and there many different viewpoints on the subject, far more than I can offer here, but there are numerous tools available on the web with image optimization in mind. It may not be something always apparent, but even switching over your images to a more appropriate file type will make a great deal of difference when it comes to making sure your web page loads faster.
Also, while we’re on images;
Don’t scale down!
It’s easy and convenient to just shove an image into HTML and then set the width and height, but, it will also add to the time it takes your website to load if the image is still simply too large for what you ultimately require.
Say you have a requirement for 200x200px but you actually have a 900x900px image, then it’s worth your while to actually go to a program like Photoshop and completely resizing the image there. You don’t need Photoshop though, there are multitudes of free online tools available to do the job for you just as easily. A quick Google search of ‘Free Online Image Re-Sizer’ will bring back multitudes of sites dedicated to just that.
Despite it seeming like an apparently small thing, this will greatly lower the actual file size of your image, and so will have a great impact on lowering the time it takes your web page to load. So, if you’re using images, make sure they’re no more than what you really need.
Compression and optimization are your best friends
All of your website data is sent in a single and much smaller file when you use HTTP compression, rather than a multitude of files being sent all over the place. Simply compressing your website data can have an absolutely enormous effect on the time it takes your site to load, drastically reducing the time it takes.
If you’re looking for a more in depth article on HTTP Compression, the Wikipedia has a great article on just that which will give you all the details you need to become a master of compression.
Compressing and optimization can also be done to Java and CSS files by combining them and minimizing source code, so, the possibilities when it comes to streamlining your site are almost endless when you zip!
Top and bottom
Putting style sheet references towards the top of your HTML document allows your page to render the styles progressively, meaning that it feels like it’s loading much faster.
Similarly, putting your scripts towards the top will block anything else below it from the initial loading of the page because browsers can only download two components per hostname at the same time, meaning that it will feel like the page is loading much more slowly, so, to stop this from happening, make sure to put them as far down toward the bottom as possible.
HTTP requests? Minimise them!
The components of a webpage are what take the most time to load when initially visiting a new one; this can be things like images and scripts. So by minimizing the number of requests a webpage needs to make, you’ll naturally make the load time much shorter, makes sense, right?
When it comes to your website, it can be very easy to fall into the trap of weighing it down with all the bells and whistles imaginable, but, it’s important to remember to keep things as lean as possible if you want to keep it loading quickly. Reducing the number of HTTP requests is a great way to do this.
Cache, it helps.
When you visit a new website, certain elements of that page are stored in a cache, which is basically a temporary storage on your hard drive. What this does is mean that the next time you visit that site, your browser can load the page without having to send another HTTP request to the server, which speeds up the browsing experience greatly.
To statically cache your web pages and database queries will greatly decrease server strain as well as greatly increase the speed with which your page is rendered. When your page is cached a static version of it that the user will see, instead of having to create it a new every time the page is requested.
Clean code = fast load time
As long as the site is functional, it can be sometimes easy to forget the fact that it’s entirely possible that your coding is not completely optimized as well as it could be. Making sure that you have as lean a code as possible with as few redundant characters and spaces etc, will make sure that your site loads much faster, and there are many ways you can do this. If you’re looking to minimize HTML there’s a great Chrome Extension called PageSpeed Insights that will help you to minimize your coding.
You basically run an analysis of your HTML page, and you can then see the optimized HTML code generated by the Extension, it’ll weed out anything that you don’t need and make sure that your code is as lean as possible.
Plugins may not be your friend
Certainly when it comes to making sure that your webpage loads as fast as possible. If you use too many, then the risks are many. They can create security issues, crashes and all sorts of technical issues, as well as having a great effect on slowing down your page’s responsiveness.
So, deactivate any plugins that you simply don’t need, then try your best to weed through all that remain to filter out the ones that place the greatest drain on your resources. If you disable the plugin and measure your server performance, you can see exactly which ones are the biggest culprits for tanking your load speed.
Redirects? Reduce them!
Additional HTTP requests will have a drastic impact on your webpage’s loading times, so you’re going to want to make sure you keep them to a minimum and to make sure that they’re completely well optimized.
So, make sure you use a HTTP redirect, to send mobile users to your mobile equivalent webpage without further intermediate redirects, and make sure you include <link rel=”alternate”> markup in your desktop pages to make sure you identify the mobile equivalent URL. This means that your mobile pages can be discovered by Googlebot and will reduce the time spend redirecting.
Don’t be afraid to outsource!
Making the most of your webpage’s loading time can be a tricky business, and some of the less simple implementations may seem a little daunting. But, whatever you do, don’t panic. There are a myriad of incredibly knowledgeable and talented people out there who make their living doing it, and will be delighted to help you make the most of your webpage.
So don’t be afraid to outsource, just because it’s your webpage doesn’t mean you have to do every little thing yourself. Money spent hiring an expert to streamline your webpage is absolutely NEVER wasted, as you’ll certainly get back more in returns thanks to your webpage now being much easier and quicker to view.
Avoid broken links
404/410 errors come as the result of broken links, and not only do they irritate everyone who runs into one, but they will also further add to the unnecessary information on your website. So fixing your broken URL’s will add a great deal when it comes to making sure that your site is as streamlined as possible and you’re not wasting valuable resources on bad code. There are many link checkers available on the internet, and the few moments spent checking that your links work as you mean them too will be nothing compared to the time saved on loading your page when you’ve no longer got any broken links.
Looking up the IP address of a host name takes up a not-inconsiderable amount of time as the browser simply can’t do anything before the lookup has been completed, so you’re going to want to make sure that you avoid the number of unique host names, this will have a positive effect on increase response time of your webpage.
These are just a few tips and things to look out for when you’re looking to increase the responsiveness of your webpage, just a few things to make sure that you’re as well optimized as possible. And always remember, if you’re a little daunted by the prospect of jumping into a world of technicality, then don’t be afraid to outsource to an expert, the returns will be more than worth it absolutely every time, and you get to avoid the headache of having to plunge face first into a sea of code.