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