ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

The Arduous Journey To A Faster Website

Written by
Published on
Modified on
Filed under
The Arduous Journey To A Faster Website

Every now and then I'll run a page audit on one of my websites and then immediately become depressed when I see the results. It's hard to keep up with the speed needs of the people online nowadays. And it's even harder to keep up with Google's standards for good speed. People like videos and images and higher quality, and all of these things tend to affect the speed of your sites. And what may be fast today, might be crawling in 6 months. So needless today, speed is a tough nut to crack.

People like videos and images and higher quality

For many reasons. Sometimes we add heavy content to our webpages, and sometimes we update the code and usually ignore the performance part. I, for example, had a good rating last year, but now, not so much. I've added new scripts and I've moved things around a bit, without thinking about performance. And my website isn't slow, by no means. If you see down below, it usually averages around the 500ms to the 600ms range, and to me that's a-ok.

To Google however, not so much. Because it isn't just the actual speed that matters, but how that speed translates over to different viewing mediums and such.


The Long Arduous Journey Of A Faster Website

While this blog loads relatively fast, Google still found some areas that it is lacking in. For example, render-blocking JavaScript and CSS. The above the fold content on my page can not render without several scripts and the stylesheets being loaded in first. And while most sites on the internet today, probably do the same, or worse even, there is still a way to avoid this unnecessary load time.


The Long Arduous Journey Of A Faster Website

Following Google's guidelines, I minified all of my stylesheet content, and inlined it directly on the effected pages. This reduces the number of resources required to download in order to generate the site. And this blog is very simple, purposely, so the amount of content is equally very minimal, so it doesn't bog the page down too much.

Why Is Speed Important

Because the obvious reason that faster is just more awesome sometimes, there are a few more technical reasons why improving your website speed, even by milliseconds can have farreaching results. Why is cutting milliseconds off of your page load time so important? Because Google has performed extensive experiments on it, of which you can read right here, which show that just decreasing the page load time by a mere 400ms, visitors to sites tend to spend overall less time searching, and more important, they continue that trend for some time. And even after restoring the page speed back to its normal self, people still tend to take some time before they continue with their old browsing habits.

Good Enough

Sometimes we have to come to accept the facts however, due to time constraints and the fact that we don't want to rebuild our entire website. After implementing the suggested tweaks on PageSpeed, I'm comfortable now where my website stands. At least where it stands for now. There's still a render-blocking script (bootstrap), and my images aren't exactly the most compressed and space saving files, but they're good enough. The difference to my actual site speed didn't really change much. It's still roughly somewhere in the 400-600ms range, and that's good too. At least I didn't make things worse.

According to Google, less than 1% of all queries have any effect on the site speed part of their algorithm. But regardless, that's still a percent.

The Long Arduous Journey Of A Faster Website

Don't Be This Guy

So care a little, but don't over do it. But more importantly, don't under do it. This website down below actually exists, but I'll leave the domain unknown for now, for privacy sake, as maybe, this is probably embarrassing. This website ranks a whopping 0 on Google's PageSpeed scale. Why? Because it requires about 50mb of images to load just for the home page. Are they nice images? Sure, probably. Is my vision good enough to differentiate between the 10mb version and the 100kb version? Probably not.

The Long Arduous Journey Of A Faster Website

More importantly, this number does have a correlation with real world users visiting your site. The fact that this website ranks a 0, means that it's slow according to Google. And if you try to load the 50mb homepage on a mobile network, then this website is essentially rendered unviewable.

Closing Arguments

Page speed is also totally dependent on the type of website that you have. If you have a website that's catered to photographers, then you're going to have large image files, that's just a given. If you do anything with videos, the same applies. Just using jQuery and Bootstrap on your site can raise a few flags and that's okay. But if you overdo it and your webpage with 2 paragraphs is taking 5 minutes to load, then perhaps it's time to revisit this whole speed optimization thing.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.

Comments

No messages posted yet

Developer Poll

Q:

Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks