In the days of dial-up modems, website visitors were rather patient waiting for content to load, but in spite of that patience, webpages were still abandoned. You don’t have to be an expert to know that five minutes is too long for an average website to load. Most readers, I hope, would also think the same for a webpage that takes one minute. So, what is a reasonable load time for a website? This article hopes to answer that, as well as to provide tips on how to achieve fast load times.
The Speed Trap
Common internet speeds have increased by a magnitude of 100,000%. That is not a typo. 56k modems equate to 56 Kbps or 0.056 Mbps. 50Mbps internet speed plans are common in the US. Verizon even claims to provide “peak download speeds approaching 50 Mbps” on their mobile 4G LTE network. Common speeds are now 1000 times faster then dial-up modems. I said common. Some US cities have upgraded to fiber-optic cables and are currently reaching speeds close to one gigabit per second or 1,000 Mbps. By my calculations, that is one bat out of hell or 1,785,714% faster than a 56k modem.
We are at a time where internet speeds are blazing fast, but they’re also wildly varying. Even users who are accustomed to fast speeds may search on the go while in a spot that doesn’t get good reception. All of a sudden this user is on slow internet. Not only do you have to prepare for users with slower internet, you’ll need to consider that mobile users may occasionally experience poor reception.
Make it snappy; why speed matters
Fewer people wait for slow loading webpages. It’s no secret that, as we already mentioned, a slow website will cause people to lose patience and abandon a website because it is taking too long to load. With the lightning fast internet speeds that can be expected today, Akamai And JupiterResearch determined that average online shoppers won’t wait over four seconds for a webpage to load. That means a good portion of shoppers are already leaving well before the four second mark.
Other reasons to recognize the importance of website load time:
Google rankings – Website speed is a determining factor of which sites rank higher in Google’s search engine.
User experience – Even the users who last through a long load time will be frustrated right before they look at your content and brand.
Server stress – Huge resource-intensive tasks and files can consume your server’s bandwidth, which will slow everyone down more.
Long term effects – We’ve established that users struggling to connect to a website may leave, but the consequence over time is that less people will refer that website through links and word-of-mouth.
How to measure your website speed
You may ask yourself “how fast is my website?” Well, there are automated tests to help you determine exactly that. And best of all, they’re free.
There are many factors that determine your load time, from server speed to content file size. While we will look at some of those today, we’ll save a more in-depth look for another blog post. To catch the most common and addressable hindrances to achieving a fast website, we can call on some experts to analyze your website. In doing so, you’ll be graded on website speed performance, and before you know it, you will be well on your way to making speed improvements.
Input your website or specific webpage URL into the following three tools:
Keep in mind that reaching a grade of A+ on all three tools is likely a waste of time. That is not the ultimate goal. The goal is to make your website reasonably fast, without having to painstakingly address every issue. Focus, especially initially, on the low-effort issues with a high return in increased speed.
The biggest takeaways from the tests are your actual loading time, page size, and the number of requests. If your page is taking over 2 seconds to load, you should work to get that time down. If your page size is over 3MB, addressing file-size will likely result in a faster load time. I aim to keep webpages under 1MB, and even lower for mobile devices, which takes effort and strategic decisions. Lastly, requests are the files being “requested” from a server by the webpage. This includes scripts, images, fonts, and more. The less calls to the server, the faster a server can respond to the queue of requests. Keep this under 100 requests, and ideally much fewer than that.
Ways to improve website speed in a flash
Individuals are willing to wait varying times before ditching a loading webpage. Thus, it makes sense to ensure your website loads in the blink of an eye, or at least ASAP. After running your website through any of those three speed tests, you may have gotten some suggestions on how to go about speeding up your website. Here are great ways to implement speed optimization techniques:
Reduce use of bulky, unnecessary files
Full screen images can be beautiful, but the cost is hefty file size. Can you achieve a similar result with CSS, SVG (scalable vector graphics), or smaller images? In one fell swoop, some website owners can cut their load time in half, by avoiding the use of unnecessarily large content. In one case, an owner asked me for feedback, and I pointed out the video background that greeted his website visitors. While it was nice visually, that one file was 20MB, which is 17 times bigger than the entire Bump Set Creative homepage. The owner’s site took ages to completely load for a non-critical component of the website, without a fallback. Why didn’t the owner notice this? After the video loads the first time, it is stuck in your browser’s cache, which means the content is preloaded for future loads.
Split up content among multiple pages
Designing for the web changed when mobile devices were introduced. Simplifying navigation and scrolling both encouraged the rise of parallax design and one-page web design. These techniques lead to cramming everything on one webpage, which can create a dilemma for page file size. Lazy-load elements and other solutions try to negate the effect of compiling more content on single pages. Sometimes, however, the best solution is to require an extra click. For instance, Bump Set Creative originally had a contact form at the very bottom of the homepage as an attempt to encourage quote requests. At the same time, a small percentage of visitors used the form, while it utilizes the large 148 Kb reCAPTCHA API script and sends 17 server requests upon load. The trade-off of an extra click is warranted and it makes sense to limit the API call strictly to a contact page, because we get much better speed performance for the majority of users.
Display smaller images for small screens
Responsive design should not fixate strictly on resizing content to the current screen width. Mobile-friendly design should consider file size for displayed content as well. One trick I often use is displaying images as a background image. Then, with the magic of CSS a website can show different images at different screen sizes. This means, I will show a small image or no image by default, but will show a larger image when I detect a larger screen size. Remember that desktops more consistently have a better internet connection, so you want to be increasingly critical in your content choice for mobile browsers.
Optimize your files
After you determine the images and files that are necessary for your website, make sure they are optimized. Websites like tinyjpg.com can decrease file size, without damaging image quality noticeably, in many cases better than photoshop. I use SVG OMG for reducing SVG file size, which removes the unnecessary markup that Illustrator can add to SVG files and while keeping the code human readable.
Compress and minimize production-ready code
Coders are humans who need white-space to organize code into a readable format. Computers can read a blob of code just fine. Even more, use gzip or some form of compression, which serves to write code more efficiently by finding patterns and repetitions that can be described in a shorter way.
Eliminate render blocking elements
If you run a website speed test, this is a common obstacle that is increasing load time. Browsers wait until CSS and JavaScript load before rendering a webpage. The biggest culprits here are bulky CSS and JS frameworks. Pre-written code can speed up development, but at the cost of having bulky files that are only half-used.
Faster than a speeding bullet
Final thoughts from a friend who knows a thing or two about speed: “meep meep.”
There are always trade-offs when it comes to website speed. You can get the speediest website by not using images and writing strictly plain HTML, but then you may end up with a website that doesn’t function, looks awful, and can be hard to manage. If you want to have a great website, then great content and functionality are a must. Making smart decisions will bring together the best of both worlds.
