Posted by Cameron Francis on 11 May , 2016 in News Uncategorized
Welcome to A Brief Guide to Website Speed. Here we’ll take you step-by-step from zero to hero. So grab a cup of coffee and settle in – by the end you’ll be able to diagnose and solve speed issues like a pro.
People don’t like waiting for technology. Whether it’s touching lightly on the screens of phones or pressing down hard on the heavy buttons of ATMs, if there’s a delay between intent and response it’s irritating. We want our devices to respond immediately and if they don’t it feels wrong.
Websites are no different. People lose interest after just a few seconds delay. This loses you traffic, and on the internet traffic is money.
The rule of thumb is flow. When you touch something or click on something else it shouldn’t break our chain of thought. It’s subjective and situation specific but what’s important is being able to identify the issue and to solve it and that’s what this guide is about.
The first thing you need to understand are the components of the web. And really, it’s just computers connected together.
One computer asks another for some information, and that computer sends it to them. That’s pretty much it. When you type facebook.com into your browser or click on the Facebook icon on your phone, one computer is sending a message to another.
Of course, it’s more complicated in practice. There are many computers that make up Facebook and their website, and many different parts being sent at different times. But even with this basic idea we can make our first (somewhat obvious) point:
The larger the document the longer it takes to send. Unlike objects in the real world, sending information with computers is done through size-restricted channels. The internet, as infamously said by a US senator, really is a series of tubes. And the tubes get full. And this is the primary way you will get your site to be faster – by making it smaller.
Take a look at the following image.
This shows a breakdown of the files being pulled in when visiting yahoo.com with a browser (ordered by size). It looks complicated but it needn’t be.
All browsers have developer tools installed by default. You just have to know how to open them up. In Firefox you click the hamburger menu on the top-right and click Developer.
Sometimes you have to click around to get the window to align to the bottom or the side. Now select the Network tab which shows everything coming for this site into your browser and clicked on the Size header, twice, to make the items order by size descending. What you get is the following:
And there go. Just from this technique you can see what the heaviest items are on your site. At yahoo.com the biggest is a piece of JavaScript, YUI – Yahoo’s web front-end platform. Over a megabyte uncompressed.
To review
This is one of the most effective ways to diagnose speed issues. There are many others but in terms of responsiveness understanding your site’s size is your first line of defense.
There’s a lot more in the breakdown above besides download sizes. File names show up as well as file types. You can see load times. There’s also the site origin where each file is being pulled from. As I mentioned earlier, websites are built from parts from many different places. This is a useful notion. You could, for example, decide to farm out your images to a company that specialises in speedy delivery.
Just from this single picture we can determine what we shouldn’t be using (does Yahoo really need all the JavaScript libraries in there?), which hosting services are slowing us down (including our own), and how much each file is compressed (note the two different size values). All of which are important in understanding user experience when visiting the site.
We’ll cover these ideas in Part II. We will look at the components make up a site (mainly images, javascript, and css), how heavy these components are, how you can host them in various ways on faster servers using both free and paid services, and understanding compression and the issues around it. We’ll flesh out using Network tab in Developer Tools to diagnose the primary causes of site slowdown.
Wittgenstein wrote that everything that can be said can be said clearly, and talking about computers is no different. All of computer science can be broken down into two ideas – Moving information from one place to another, and doing something with it. Every piece of code, every machine that connects to your home WiFi or streams chat sessions to your phone has at heart these two principles, devices connected to another shunting around electric suffuse at incredible speeds. To understand them don’t get lost in the details.
Related Article:
Don’t Forget The Basics Of On-Page SEO