The following post is a cross-post to Sitepoint’s blog to promote my book Lean Websites.
Web performance matters. Studies have shown that improvements in website performance—such as page load times—can dramatically increase user engagement and profits.
However, life’s short, and time is money. As web developers, we’re paid to get the job done—by clients, bosses and colleagues who may not appreciate the importance of site performance. So the temptation is to cut corners to get the job done—to find the quickest solution, without regard for performance. In these times of rising mobile usage and search engine preference for lean websites, average page weights continue to soar. It’s not a good situation.
Temptation: the pressure to give in to a desire for easy or immediate pleasure
The consequences of giving in to temptation are often not felt until afterwards.
This article describes some of the temptations you’ve probably faced in your web development journey, and why it’s better not to give in to them.
Using Ready-made Scripts
It’s a typical scenario: you need to add something to a web page—such as a slideshow. So you google “web slideshow” and get hundreds of results. There are so many to choose from, all ready to go, and free. Why not just use one as is, save time, and get paid? Doesn’t everyone else?
We often forget to consider the performance of the scripts we choose. Is the code well written? Is it optimized? Do we need all the functionality it contains?
In Chapter 4 of Lean Websites, I examine how to differentiate between copy and paste and copy and waste.
Pretty Images and Designs
A picture is worth a thousands words; and when it comes to web performance, a picture might be worth more that a thousand lines of code in terms of page weight! Poorly optimized images are by far the the biggest cause of bloated websites.
There are some image considerations that can make a huge difference to web page performance.
Not Every Device Needs a High Resolution
There’s no need to show everybody the high resolution version of the image if not needed. Be context sensitive, considerate and respectful. Don’t fill your page with unnecessary heavy assets like images just because you don’t know what else to put there. Trust me, none of your users on their mobile device while roaming wants to download a 2MB retina image.
Images Cost Bandwidth
Images remain the biggest performance culprits. They currently take up most of the file sizes and usage on the internet, as shown in the chart below:
Bandwidth usage of various content types
The temptation web developers face, especially when working under a lot of time pressure, is to just plug in big images, without considering whether to convert them into a more efficient image dimension or format.
In my book Lean Websites, I look in depth at ways to optimize your images and other site assets to ensure that your site is as performant as possible—especially on devices connected to mobile networks.
Performance Optimization as a Part of Development
When time is money, there’s always a temptation to cut corners. One way to cut corners is to put things off and never end up doing them. Performance testing and optimizing are critical, but it’s tempting to put them off till later and then forget all about them.
Performance optimization is often not mentioned as part of the common software development life cycle at all. But as Ilya Grigorik says, “performance is a feature“, and shouldn’t be relegated to an afterthought.
Lean Websites discusses how you can automate optimization, and make it part of your deployment process, with some easy-to-use and free tools.
Libraries and Frameworks
Christian Heilmann, a web evangelist at Microsoft, calls it “death by a thousand plugins“. It’s so easy to attempt to use modern web development trends by including yet another plugin or library. We sometimes forget that anything you put on your page will cost you and your visitor when it comes to performance. Don’t let too many plugins bloat your website. Heilmann also encourages us to remember that “it is not about what you can add—it is about what we can’t take away”. Something to remember next time when you want to paste another plugin into your site.
Libraries like jQuery, Dojo, and YUI are popular tools that help developers kick-start JavaScript projects, making access to JavaScript objects and methods faster and easier. They simplify the coding experience—but at what cost?
Most popular libraries
The file size of these libraries may vary a lot, especially if they are not minified, gzipped and compressed. jQuery minified and compressed is almost eight times smaller than sending it over the wire without optimization (252 KB uncompressed, 32 KB minified and gzipped).
It’s important to decide what framework or library to use early on in a project. It normally doesn’t make sense to use more than one library or more than one MVC JavaScript framework with a project, as different libraries tend to achieve the same goal. And of course, a library should only be loaded once, though it’s not uncommon to see multiple instances of jQuery on a single page:
| Website | Count | Different jQuery version loaded |
|---|---|---|
| www.reddit.com | 2 | 1.7.2,1.7.1 |
| www.washingtontimes.com | 2 | 1.4.2,1.4.4 |
| www.tudoseo.com | 10 | 1.6.2,1.7.2,1.7.1,1.6.4,1.8.2, 1.4.2,1.10.1,1.4.4,1.9.0,1.8.3 |
Duplicate loading of jQuery, source: example Google Big Query on HTTP Archive for the month of July 2014
Why would you want to load more than one version of jQuery? Isn’t this screaming for a good clean-up? There is definitely some legacy code in there that might require an older version of jQuery. Hence, the temptation is pretty big to just add a new version in addition to use newer functionality in jQuery. That seems like a lot of maintenance and legacy trouble. Instead, take some time, go through the functionality of your site and determine which version to convert to.
While sometimes there might be a good reason to include several JavaScript frameworks, there could also be other reasons that should be verified. The overlapping and duplication of plugins can stem from different reasons:
- The team building the site didn’t agree on a common framework or library to use.
- Tangled code that developers have to work with. Sometimes they are only being provided with isolated include files, with very little visibility to the parent code. They could be tempted to just plug in their preferred library and version if needed, to continue their work.
- Missing enforcement techniques.
- Carelessness or laziness of developers.
- Use of other web components including the same frameworks.
Lean Websites looks in detail at the consequences of using libraries and frameworks, and how to make the best use of them without negatively impacting on site performance.
Social Media, Ads and Tracking
If you work for a company with a business intelligence, analytics or marketing department, the chances are high that you are being asked to include anything that could help measure the company’s success.
Social media, ads and tracking scripts are big temptations for marketers and companies to better understand their customers and to add or find other revenue streams, such as selling ads. But any foreign content you add on top of your own content—especially if it’s JavaScript-based—will add weight and load time to your page.
There’s not one social media or tracking tool out there that marketing wouldn’t like to try out.
Lean Websites looks in detail at how to properly and securely include third-party scripts and plugins.
A handy rule of thumb is that the value you get from using a third party script has to be greater than its performance hit.
Conclusion
Performance optimization is often an exercise in compromise, and there are always competing interests to be considered.
This article has raised just a few of the issues involved in site optimization—a topic that is finally coming of age in a big way.
Lean Websites provides a detailed, in-depth overview of the many factors involved in creating efficient, performant websites—from understanding user experience and expectations to monitoring performance, automating tasks, and optimizing server requests, site assets, and the networks our sites run on.
Hopefully this this brief introduction has whetted your appetite to find out more! I’d love to field any questions or comments you may have.