Most people consider being lazy a vice – something that you have to overcome to do cool things. But in web development, lazy loading can be a powerful tool.
Lazy loading is a design pattern in computer science where you defer initialization of an object until the point at which it is needed.
In web development it’s pretty similar. Basically you don’t load an asset until you need it.
There are a ton of tools out there to deliver static files like JavaScript, CSS, & images like CDNs. But there are a few other types of media you might have on your site namely audio & video files.
And just like JS, CSS, & images which can be handled by CDNs we want to offload audio & video files to external services to reduce the load on your web server and to have locations around the world to serve these files from the closest location.
One common piece of advice you'll hear when you're trying to speed up your site is to “use a CDN”. A CDN stands for a content-delivery-network.
A content delivery network is similar to a web server but there are two key differences:
CDNs store static assets. Like images, CSS files, and Javascript files. They don’t process web pages
Most medium-size websites have a single web server. But they can have dozens or hundreds of CDN locations around the world. And CDNs use geolocation to send visitors to the closest CDN.
If you can optimize an aspect that controls 60% of your page load you'll very likely see some big gains. There are some simple things you should do & some things that even the pros forget.
The internet feels like a place where your location doesn’t matter. We’re used to seeing content & interacting with people from around the world. And no matter where you are online it feels like every site is equally close.
One concept that might surprise new website owners is that the location of your web server matters. I live in Denver Colorado and if I want to access a web server in Denver it’s going to be much faster than one in Europe, South America, or Asia.
To illustrate this let’s do some speed tests around the world. My web server is in South Carolina. On the east coast of the US. So let’s test our site with a couple of different locations to see how much it could help.
I’ll be using the KeyCDN speed test since they make it really easy to test locations.
New York – 800 ms
London – 1.59 s
Bangalore – 3.12 s
Tokyo – 3.85 s
If your server is a half continent away it could add a 1/2 second easy. If it's on the other side of the world it could add 1-2 seconds.
My advice to you is to make sure your webserver is located in the same continent as your audience – or the largest chunk of your audience.
Since I’m catering to a US audience with my site I’m very happy where I am and don’t need to change anything. If you are thinking about moving server locations first ask your host because they likely have a server location closer to your customers and it’s much easier to move between data centers than to setup a whole new hosting account.
When people talk about optimization they usually focus on the front end. That means focusing on things like the HTML code, combining CSS files, deferring JavaScript files, and optimizing images. These are all very useful techniques but they're also the easiest techniques to implement.
It’s important to remember that hosting directly affects the initial page load. And it's worth investigating even if it is incredibly time-consuming and possibly expensive to change.
I love talking about speeding up WordPress websites. But before we go any further it's important to know that there are two broad types of sites:
Static
Dynamic
And before we optimize things left & right you should know that some techniques work really well for one type of website and won't work for the other type.
Speeding up your website is exciting but before you start adding a caching plugin to your site it’s good to think about the whole process of building a web page. Because each part of building and rendering a web page can be done efficiently and fast OR inefficiently and slow.
One of my favorite things to do is collect data. I love collecting ALL the data because you never know when you need it and if you collect it you'll always have it when someday you could find a use for it. This brings me to one of my favorite quotes:
“What gets measured gets improved.”
Robin S. Sharma (inspired by Peter F. Drucker)
There’s some truth to this. And lucky for us website speed is easy to measure, breakdown, and analyze. And this is important because what works for one site might not work for another. So if you're looking to improve your site speed we always want to measure & confirm our sites are getting faster.
You've built a website – congratulations! Now you can venture on the eternal quest to optimize it (speed it up).
Why is website speed important? The one-sentence summary is: No one wants to wait.
The less time people have to wait, the more time they have to browse your site and convert — whether that means filling out a lead generation form or checking out on your eCommerce store.