Categories
How To Guides Internet

Simple ways to speed up your website

Having a fast website is very important. As I mentioned in my Black Friday post, nobody likes a slow website and if your site take more than a few seconds to load, the chances are you are loosing visitors because of that lag.

This article contains a few easy to implement tips which you can use to help you reduce the load time of your website.

Keep Your Code Tidy

Unless something goes wrong, or someone chooses to view your source code, most of the people who visit your website will never see any of the code that is stuffed away behind the scenes. That doesn’t mean it isn’t important however. After all, the code at the back-end is what creates the website at the front end.

Minify HTML

Minimising your HTML, CSS and JavaScript is a very easy way to reduce the size of your website. If there is less to load, then your website will load faster. If you use a CMS like WordPress, there are many plugins which can minify your code for you. If you self-code there are websites which will shrink your code for you, or you could go through it yourself, removing unnecessary spaces and tags etc.

Reduce Files Fetched

It is good practice to fetch as few files as possible when loading your website. For example, many sites use separate style sheets for different parts of the website – for example one for text, one for images and another for general layout. Every file that your page calls upon increases its overall load time. Fetching one big CSS document will usually be faster than fetching three smaller ones.

Also consider how many external resources you load – for example adding a Facebook like button will require the users browser to visit Facebook’s website to pull the code across, whilst loading your page. A link or a delayed load on things like social sharing buttons can give you a big speed boost.

Optimise Your Images

Images make your content more exciting, however if you don’t optimise them then they can often really slow your page load time down. There are various ways you can reduce the file size of your images without compromising on quality.

Resize Pictures

When you take a picture, it can often be much bigger than you really need it to be. By resizing photos before you upload them, you can massively reduce the file size of your images. If you leave the file big, but resize it using HTML or CSS – by setting a smaller height and width – then the end user still has to load the big image, and then their browser then has to squash it down to fit your new image dimensions.

Choose The Right File Type

The most commonly used image formats are .jpg, .gif and .png.Β  Different images lend themselves to different formats. Reducing the number of colours available to a GIF or a PNG-8 image will reduce the files size, whilst reducing the image quality will lower the size of a JPEG file.

Use An Image Compressor

Image compressors are another way to shrink images. Technology Bloggers currently uses a WordPress plugin called WP Smush.it which uses the Yahoo! Smush.it tool to reduce image files.

Example

Here is a picture that I took several years ago whilst in South Africa.

Elephants in South Africa
The full sized image was 3.44 megabytes. Resizing it in Photoshop helped me reduce that to 1.61 megabytes. Because there are lots of colours and the image was quite big, choosing GIF and PNG-8 format made it look too pixelated, so it was between PNG-24 and JPEG. PNG-24 squashed the image down to 831 kilobytes, whilst JPEG compressed it to a tidy 450 kilobytes. Although that is a lot smaller than the original file, it would still take a long time to load on a slow connection so by taking a very small hit on the image quality, I managed to get the file size down to 164 kilobytes. Finally running the image through Smush.it took it down to 157 kilobytes. Some images see a big reduction, most (like this one) see a smaller reduction of just a few percent.

Use A Content Delivery Network

Content delivery networks, or CDNs, can help to improve a websites speed and make it more reliable. Put very simply, when someone tries to access your site, without a CDN they are directed to your hosting provider, who will then serve them your website and all its files from their server. This means that if your host goes down because of a fault, or a sudden surge in traffic you loose your site, and also if your host is not close to a user, it can take a long time for them to communicate.

With a CDN, users can fetch your site faster, because it is offered in multiple locations around the world. Additionally many CDNs can cache a copy of your site, so if your host goes offline, they can provide a static version of your site to users until it comes back up.

For example, Technology Bloggers is currently hosted in Gloucester in the UK. If you access us from Australia, CloudFlare (the CDN we use) will send you to its closest data centre, which could be in Australia, which will then deliver the files you need to see our site. It is faster because your requests don’t have to travel all the way to the UK and nor does the data being sent back to you either.

Control Your Cache

Server Side

If you use a CMS, then the chances are your content is dynamically delivered upon request. Basically, when the user requests a page, your site creates it and then sends it back. By using some form of caching you can create a static image of your site, so your site doesn’t have to create the content each time a user visits it. There are various plugins you can use to help with this, Technology Bloggers uses CloudFlare’s caching system, as I have found this seems to work better than other WordPress plugins I have tried. Also, using too many plugins, slows your site down, hence why I let the CDN manage it.

User Side

A users browser also saves files for later, in case they visit your site again. It is possible to determine what files are saved and for how long these files are saved for, by adding caching headers to your .htaccess file you can change these settings.

How To Test If Your Site Is Faster

Refreshing your page and timing it with a stopwatch is one way to gauge how quick your site loads. This probably isn’t the best way to do it though!

There are various websites which rate your sites speed performance. I tend to measure Technology Bloggers using four main speed analysis sites.

Google PageSpeed

Google are keen for the web to be faster and offer a very useful tool which gives your site a score for mobile load time and desktop load time. It also suggests what it believes is slowing your site down. Google’s tool also gives an image of your fully loaded site – all the content above the fold. Unfortunately, their test doesn’t actually state how fast your site loads, just how well optimised it is.

WebPageTest

Probably the most thorough site I use is WebPageTest, which presents loads of different information, including first view load time, repeat view load time (which should be quicker if you have user side caching), a waterfall view of all the files loading, a visual representation of how your site loads, suggestions as to where performance issues lie and loads more.

An analysis of TechnologyBloggers.org using the WebPageTest tool

Pingdom

Pingdom is another useful tool, it gives a handy speed score and also tells you how fast your site is compared to other sites it has tested. It also saves your speed results, so you can view historic test result speeds on a graph, and see how your sites speed has changed.

GTmetrix

GTmetrix is another useful site. It also gives lots of details, and helps you to see what is slowing your site down. GTmetrix also lets you compare one site to another, which I’m not really sure is that useful, but it is interesting to see how your competitors site compares to your own.

An analysis of TechnologyBloggers.org using the GTmetrix tool

Happy Browsing

Remember to enjoy your new, faster site! Hopefully your visitors will too. πŸ™‚

Categories
Updates

Letting you know about recent updates

As the loyal readers among you may have noticed, there has been a lack of posting in the last week or so, but don’t worry, this trend shall soon be halted, as there are many new and exciting posts written, planned and on the way very soon.

This article is just to keep you in the loop and let you know what is going on.

Usually, I will endeavour to keep people up to date with updates to the blog via our social channels, specifically Facebook and Twitter. I feel the blog is a place for content, whilst notifying you about updating the ‘frills’ that are the design and functionality updates should be the place of social media.

Social Media Updates

Let me start by letting you know how our social side is currently evolving. A few months ago, Facebook stopped feed compatibility, meaning that if you liked us on Facebook, you no longer got updates regarding new posts. Now however I have linked Twitter to Facebook, so every tweet @tecbloggers tweets is also posted on our Facebook page.

UPDATE: We now tweet under the username @TechBloggers.

This means that you can now receive updates of new posts via your Facebook feed.

Some tweeters like to spam you with content every five minutes, likewise, update Facebook statuses practically all the time. I don’t believe in this, and only post/tweet an update should it be something you may want to know. Updates like small site improvements/issues and interesting content are the sort of thing we use our social media channels for.

Occasionally if I find, or someone brings to my attention something interesting that I think is worth sharing to the community, but doesn’t warrant a post, then it may get shared via social media. Don’t worry about getting spammed if you subscribe, we will only be posting stuff you probably want to know about.

I have also recently added a cover photo to our Facebook page, as it was looking a little bland. I didn’t have any great ideas, but I think it works for now πŸ™‚ If you have any suggestions, by all means leave them in the comments below.

Facebook cover photo
Technology Bloggers Facebook cover photo.

In future, I don’t plan on writing as many of these sort of posts, as I feel it is better to keep you informed via social media, of updates as and when they occur.

If you don’t want to miss out on future update news, subscribe now!

Twitter Icon

Facebook Icon

In other news…

Top Writers

For a long time now we have had a top commenters widget at the bottom of every page, however the observant among you may have noticed the appearance of a new widget: a top writers list.

I came across the plugin whilst searching for something else, and thought it was a good idea. This is a community blog, so if we highlight the top commenters, why should writers not be recognised too? Well now they are πŸ™‚

A screenshot of the top commenters and top writers list

The top commenters list excludes administrators and resets every month, the top writers list doesn’t.

Design Updates

Technology Bloggers design is constantly being updated and tweaked. I believe that continuous improvement is important. Most of my time is spent writing and replying to comments, however I do dedicate some time to improving other areas of the site.

One recent update is the removal of the social icons from the sidebar, and the addition of a new set of social buttons to the header. I felt that this area needed a bit more colour, and the buttons bring just that!

More Speed!

A few weeks ago I posted on our social channels:

“Just moved servers in order to speed up the blog πŸ™‚
Do you notice a difference?”

We encountered a few problems, however they were soon sorted out, leading me to later post:

“A few hiccups later, Technology Bloggers is fully functioning and faster than ever!”

The blogs response time was sometimes really quite slow (usually higher than 2000 miliseconds!). I moved the blog to a different server and the response time is now around a quarter of what it was, currently around theΒ 550 ms mark.

That is one reason you may have noticed the blog loading faster, another is because of the relentless efforts that I have been putting into slimming things down and reducing load times.

Google’s Page Speed tools have been very useful, enabling me to see where the site lags, and what can be done to improve it. I think there may be an article on the way soon with more detail on Page Speed, and how I have and am still using the tools to speed up the blog. Watch this space.

Jonny

For a while now, Thursday here on the blog seems to have been Jonny’s day, with him posting a regular feature on a Thursday for more than ten weeks now.

The day is not a dedicated day to the writings of Mr Hankins, however at the moment, I feel it is good that the regular feature is on a fixed day, as it gives consistency. His articles are very popular, and it is a delight every Thursday looking to see what new and innovative topic he has chosen to cover.

Jonny has been busy travelling of late, meaning that last week he was unable to post. Don’t worry though, he already has an article written and lined up for us for tomorrow πŸ™‚

Competition

Just a quick note about a competition I plan on launching next Monday. Technology Bloggers has teamed up with two other blogs, and hopefully will soon be launching a competition in which anyone bar the three prize donors can enter for a chance to win one of three $50 USD prizes in a $150 competition!

UPDATE: This will now launch on Tuesday.

Until Next Time

That’s about it from me now, so remember, if you want to keep up to date, be sure to subscribe to our social profiles, and stay tuned to the blog to see our exciting future unfold…