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. 🙂

Goodbye CommentLuv

“…blogging has changed, and the blog itself is no-longer where many people read and interact. Read in the feed and comment on social media. Blogging is still there, but I think comments are slowly dying…

A feed and social profile were luxuries years ago, however now it seems they are part of blogging itself – if you don’t have them do you have a blog at all?”

That is a quote from a comment I left in June this year.

Digital media explorer Ari Herzog has noted how blog comments are evolving, and he now offers his readers the ability to leave a comment via the standard (vanilla) WordPress commenting system, as well as via Facebook and Google Plus.

Blogging is still very much alive, however as my opening quote suggests, the way authors go about publishing content and how readers then go abut digesting and debating this, has changed significantly in recent times.

CommentLuv

Just over two years ago I wrote a post detailing why you should use the CommentLuv plugin. Today very few 0f the reasons I state still hold true.

I have now deactivated CommentLuv on Technology Bloggers for these simple reasons:

Two comments with CommentLuv links

Two great comments with irrelevant CommentLuv links.

  • CommentLuv looks messy – take a look at the two comments to the right. They are both great comments, but they are followed by an untidy, irrelevant link. If someone is interesting in your site, they will check it out anyway.
  • CommentLuv promotes spam – having looked through our comments, very few of our genuine visitors actually take advantage of CommentLuv, yet almost all the spam comments we get include a CommentLuv link.
  • CommentLuv increases load time – you know how obsessed I am with speed, so much so, any plugin which significantly impacts load time is now under scrutiny. CommentLuv is quite a heavy plugin which I have found has a big impact on page load time, and that extra lag isn’t justifiable for what it offers.
  • CommentLuv is bad for SEO – one of the key things Google has been clamping down on of late is irrelevant links. If you run a site about lawnmowers, and you have a large number of links coming from a technology website, it probably doesn’t do you any favours. Similarly, if I have written an article on something tech related, comments with random links introducing irrelevant keywords, dilute the content and probably don’t do my article any favours.
Google SEO chart

CommentLuv is arguable bad for SEO.

CommentLuv was once a great plugin, but its time has passed. The web is changing, blogging more so than ever, so it is time to say goodbye to CommentLuv.

Is a lazy website key to online success?

Speed matters. Once upon a time, if a business had a website, it was revolutionary. Now in many cases if a business doesn’t have a website, it will usually suffer as a result.

When the internet was in its infancy, speed wasn’t really on the agenda. If your site loaded super fast (remember we are still in the days of 56kbps/dial-up internet access here) great. If it didn’t, people would be prepared to wait.

Nowadays there are so many different websites offering such similar information, if your site is slow, your traffic (or as I prefer to call it visitor numbers, or even better: people) will suffer as a result. There are countless studies into this, almost all of which conclude that the slower a site is, the fewer visitors it has.

Furthermore, speed is starting to become an evermore important search engine ranking factor – if your site is slow, you are less likely to rank at the top.

Okay, you get the point: today speed matters.

The problem with many websites is that they have so much to load. When you load our homepage, it isn’t just a few lines of HTML that your browser requests from our server, it also fetches a handful of local CSS, JavaScript and PHP files, in addition to bunch of images and some large chunks of external code, which are used to generate social media buttons.

This all takes time, and every extra byte and file that is requested will slow down the page load time.

Slim Down

One way to reduce the size of the page is to reduce the amount of files – and the size of those files – that are fetched. We make every effort to ensure that our locally loaded scripts are as condensed as possible, so your browser doesn’t have to request dozens of files, just one or two.

We have also combined several images into one file (a CSS sprite), again, so your browser has to fetch fewer files. Take a look at the image below for an example.

CSS sprite social media

Technology Bloggers social icons CSS sprite.

The trouble is, we only have control over internal files. I can’t go and reduce the Tweet button script and add it to one of our existing files, as it is controlled by Twitter, and served via their servers.

Lazy Loading Images

Sometimes slimming down isn’t enough, so one way to prevent the initial load becoming verbose is to delay the loading of images not in view. We use a WordPress plugin called Lazy Load, which only loads images just before they come into view. So if the page has five megabytes of images to load, and four are below the fold, then when the page loads, you will only have to wait for one megabytes worth of images to load; if you don’t scroll down, the other four never get loaded.

Lazy loading images can significantly help improve page load time, as images are usually the biggest files that a website loads, so only loading the vital ones really speeds things up!

Lazy Loading Social Buttons

As I mentioned above, one of the biggest strains on loading is external code, specifically social buttons and sharing buttons.

For a long time now, the ability to offer you the potential to share content and follow us via social media has come at a high price – in terms of loading time. However after a lot of coding and hours of tweaking, our social buttons are now just a tiny (in size) image.

If you take a look at our sidebar, the social buttons sill look very similar to before – Facebook like, Twitter follow and Google Plus recommend all still there – however they now only load the external scripts if you mouse over them. This removes a huge delay when you first load a page, and means we can provide these buttons on every page of the site, with a much smaller speed loss.

At the top of articles, the social buttons there now also load lazily, and only fetch code from the networks when you mouse over the button images.

Lazy loading sharing buttons.

Technology Bloggers delayed loading social buttons.

Lazy loading social media buttons has dramatically improved the speed of Technology Bloggers, and still enables you to share content when and how you choose.

%CODETWEETTB6%

What is your view on delayed loading?

Stop using Internet Explorer

This post was going to be entitled “Why you should stop using Internet Explorer” however I didn’t think that was a strong enough title, so I changed it to the direct instruction you see above this text: Stop using Internet Explorer.

You have a choice. You can use Google, Bing, Yahoo! or Ask. You can buy Windows, Mac OS, Chrome OS or Ubuntu. You can go with Apple, Samsung, Sony or RIM.

Although Google dominate the search market, there are still many other search engines out there. Microsoft dominate the computer market, but you can still choose from a [reasonable] selection of other, popular operating systems. You could argue that Samsung now dominate the global smartphone market, but there are still many other companies you can go to to get a smartphone.

You also have a choice as to what browser you use. The internet is arguably now the main function for any computer, so surely you should devote some time then to choosing which browser is right for you?

If you have tried more than three different browsers before, for a considerable length of time and have after weighing up all the pros and cons of each, have chosen your favourite, well done you. If you haven’t, read on.

If you are using Microsoft Internet Explorer (IE), stop. Okay, well you can finish reading the article, but then stop using it. A simple instruction, which could do wonders for your internet experience.

Reasons To Not Use IE

There are many reasons not to use IE. Here is a list of what I think are the strongest arguments against the heavy, slow and outdated browser.

Lack of Security

IE seems to constantly be in the news for its security issues. Much of the malware out there on the internet is only made possible by bugs and holes in Internet Explorer! Need proof? Check out this section of IE’s Wikipedia page.

Speed!

In recent years Microsoft have been really working on making Internet Explorer faster, and IE 9 is much faster than IE 6 or 7 were; granted. That said, it is still much slower than the competition. For example, loading Technology Bloggers from cold (hard refresh) in Firefox, Chrome and Safari took 3 seconds, Opera took 4, while Internet Explorer took 7 seconds.

Lack of Features

Without a doubt, for features, add-ons and extensions, Firefox and Chrome are miles out in front. Safari and Opera also have a reasonable number of things you can add to your browser to customise/improve it, but Internet Explorer has only really started to embrace such features since IE 8. Apart from toolbars, Flash, Adobe Reader etc. IE 6 didn’t really do add-ons.

Inconsistency

Social buttons badly rendered by IE

How IE rendered the same code (our social buttons) on three separate page loads – neither is correct.

Take a look at the three images to the right.

Each of the images is a different variation of the social buttons on our sidebar that IE rendered. The screen size remained the same, and the loads were seconds apart.

IE managed to render three completely different versions of the same code. How does that work?

In the first image it didn’t even attempt to load the social buttons before declaring it was finished. It took a better shot in the second image, whilst in the third image it didn’t bother loading Twitter and threw Google+ to the bottom. Why?

Upon loading the blog in Firefox, Chrome, Safari and Opera, I saw the exact same result. Each browser displayed them as they are meant to be displayed, every time – Internet Expolorer didn’t.

Lack of Compatibility with Modern Code

Code is advancing all the time, and a good browser will keep up to date with changes, and make sure it is able to interpret and display modern CSS, HTML, PHP etc.

When the blog snows at Christmas, IE doesn’t show that, IE also doesn’t like the ‘modern’ code which makes our search box work, or the code we use to add shadows to text.

Lack of Compatibility with Older Operating Systems

IE 9 doesn’t work with Windows XP, or any Mac OS or Linux system. Only Vista, 7 and 8 support IE 9. IE 10 only works with Windows 7 and Windows 8. According to StatCounter, in the last 6 months, 26.55% of all computer users used XP, whilst 7.13% used Vista and 7.46% use MacOSX – that’s 41.14% of the market that Microsoft are isolating straight away, and Windows 7 and 8 don’t even own all of the 58.86% share of the market that is left!

Advertising Campaign

Microsoft have recently undergone a quite extensive advertising campaign for IE, to try and shake off its bad reputation. They state how ‘lightning fast’ it is compared to how it used to be, which I can’t dispute. What they don’t however say is how it compares to Chrome or Opera. They also try to reassure users that it is now secure, although that is still debatable!

Which Browser to Use?

There are loads of web browsers out there, check out this handy Wikipedia comparison table to see.

Below is a map showing in 2013 so far, which internet browser is the most commonly used by country.

Top browser by country - 2013

Browser popularity by country. The colour of the country is the colour of the most used browser – see legend.

Personally I would advise using either Chrome or Firefox. If you have a relatively standard, or slow PC, then Chrome is probably best for you. It is light, simple and fast.

I still think that Firefox had more functionality than Chrome, and it is my personal favourite. If your PC is usually pretty quick and of a reasonable spec, then I would recommend Firefox.

Chrome is owned by Google – a multinational corporate giant – whilst Firefox is non-profit and open source.