Humans hate to wait. So the last thing you want is a slow-to-load website. Instead, render a more positive user experience by optimizing your site and reducing load time across all your web pages. The key is balance. The following five load-time optimization steps will fast-track your site so you can satisfy your users’ need for speed without compromising the look and functionality of your pages.
1. Get clear on how you want your site to work
Before diving in on how to optimize the load time of your web pages, you must first get clear on two things: what you have and what you want. This requires a closer investigation of your target audience, their needs, and how well your site meets those needs. It’s too broad to proclaim, “We want our website to be faster.”
For example, if most of your pages load in two thirds of a second or less, and your target audience is a typical retail consumer, declare victory. You get to turn your attention and resources to other tasks such as adding new functionality. If, on the other hand, a desktop or mobile browser churns for ten seconds before a customer sees your page, roll up your sleeves and keep reading.
2. Stop throwing money at the wrong problem
Every possible site-speed profile exists on the web, which is why you must be sensitive to your own requirements. Your efforts will only pay off when aimed at a limited segment, and when you understand the root cause of performance issues. For example, if you invest in upgrading your server’s hardware or memory, but are broadsided by bad client-side code, you’ve now wasted your money.
Three broad domains deal specifically with a website’s load-time delays. When it comes to how quickly a website renders and how well it delivers web applications, these include:
- Server computation.
- Network transmission.
- Browser rendering.
3. Be mindful of mobile
Check how your site renders on mobile devices. Folklore abounds with websites that are lightning fast when viewed with top-end equipment in the developer’s office, but fall apart in a customer’s hands when trying to access the same site with a smartphone or tablet. Paying attention to mobile performance means more than taking into account unpredictable transmission systems. You must also consider slow mobile browsers whose performance varies from device to device.
4. Manage your image sizes
There are just as many technological solutions as there are technology problems. The trick becomes narrowing down the best short- and long-term options. This creates one of the great challenges of website optimization: Even with a clear understanding of what you need to accomplish, a half-dozen different approaches might seem like natural solutions.
Take images, for example. If image transmission is your site’s biggest problem, you have a slew of solutions to choose from. Let’s say the servers deliver content snappily, and pages are easy to load, but measurements reveal that it takes many seconds to pass large or complex images. This not only slows down the data transmission, but also bogs down the browser’s rendering engine. Here’s what you can do to remedy the problem:
- Translate images from formats like PNG or JPEG into Scalable Vector Graphics (SVG) to shrink their size dramatically, as well as make them more portable across different display devices and screen sizes.
- Convert large images into a lower-quality format, such as using a more-compressed JPEG encoding scheme.
- “Lazy-load” images so that readers begin to see your page immediately, with its graphic content arriving in the background.
- Redesign the page to require only a fraction as much graphics content.
- Implement a client-side caching scheme; while the initial page loading might remain pokey, navigation around the site is snappy.
- Host images separately from HTML and JavaScript text to accelerate browser responsiveness in common situations.
- Improve page-loading speed significantly with browser re-load, pre-fetch, and pre-render hints on occasion.
- Recode JavaScript in specific ways to help browser pre-loaders see images and load them earlier.
- Use a Content Delivery Network to stage the images at network sites near end-users. This only works well for the highest-volume websites. Otherwise, it’s an expensive and impractical option.
5. Examine JavaScript coding
Nearly all modern web pages process thousands of lines of JavaScript for advertisement management, Web analytics, client-side interactions, multimedia controls, and more. Web frameworks “churn” so fast that few have matured enough for true best practices to be well known.
For instance, think about jQuery — perhaps the most widely used JavaScript library. In jQuery, use of “… innerHTML is massively faster …” than the corresponding jquery.html(), in the words of Google Chrome Tooling specialist Paul Irish. That said, millions of web pages use the latter, despite the performance hit. To wring out such inefficiencies, you’ll need to do a performance audit, like the one a Google team did for Wikipedia in the write-up quoted immediately above.
Auditing at this level — whether of JavaScript, downloaded elements, or server-side computations — demands considerable experience and breadth of knowledge. Unfortunately, overnight success in not guaranteed. However, depending on the level of your expertise, try to cycle through the following steps:
- Run a good page-speed profiler.
- Compare the results to your organization’s business requirements for the pages in question.
- Use the profiler’s automated hints and suggestions as starting points for alternative codings.
- Measure your experiments and ruled by measurements, not subjective impressions.
Working with a budget that won’t budge
Even if you’re on a tight budget, you still have options for improving site speed. In fact, it’s been my experience that every — and I mean every — team that uses a page-speed profiler, at all, systematically discovers at least one surprise with the potential to improve speed by at least 20 percent. And that’s without any fees or loss of end-user functionality.
Of course, if you have the means to hire help, you can still cut costs by getting a clear picture of what you have and what you want. The first step is deciding by how much you want to enhance user experience.
