Spring is in the air (at least for those of us in the Northern Hemisphere). It’s that magical time of the year when the promise of nice weather outside makes necessary spring cleaning indoors all that more difficult.
With summer just around the corner, I’d like to offer some simple and easy “speedy” spring cleaning tips to improve your website’s performance.
A surprising number of page templates load giant images into tiny display spaces. Does it work? Technically, yes, the browser will down-size the image to fit the available space.
With optimization out of the way, you can finally hit those summer beaches, able to fully enjoy yourself with the knowledge that your website is running to perfection.
PROPERLY SIZE YOUR IMAGES
Everyone repeat after me: “I solemnly swear that I will not use a 1,000-pixel image when there are only 50 pixels to display it.” A surprising number of page templates load giant images into tiny display spaces. Does it work? Technically, yes, the browser will down-size the image to fit the available space. Unfortunately, using a graphic that’s the wrong size has several adverse effects.
First of all, the browser downsizing will often create a poor-looking image since “dumb” auto-resizing will not be as good as using proper photo editing software. Secondly, it just costs you more money! We’ve seen 5MB and larger images on home pages, being served thousands or millions of times per month, only to display as tiny thumbnails. In extreme cases, this can add up to thousands of dollars a month in unnecessary bandwidth charges. Perhaps most importantly, using the wrong sized image will slow down your page loading times significantly, especially on mobile devices, leaving your users hanging while they wait … very … impatiently … for … your … page … to … load.
The best way to produce small images is to generate them in the right size as part of your workflow. There are lots of great Photoshop settings available to optimize for web display. If you have a handful of images that need resizing, check out Mozjpeg.com for a free website that lets you drag and drop images into a webpage that will automatically optimize them.
If you have many photos being uploaded to your site by third parties, consider installing the Pngquant and Mozjpeg software libraries on your server, to harness the same algorithms that power the image processing tool available on the Mozjpeg.com homepage. These two image compressors will save you both storage and bandwidth costs without visually compromising image quality.
USE A CONTENT DELIVERY NETWORK
If you just woke up from being cryogenically frozen, let me be the first to welcome you to 2021 (don’t go back and read any of the old news headlines from 2020). Also, it’s time to add a Content Delivery Network to your site. A CDN is a global system that caches copies of your files on servers spread across the globe. Since your files are getting delivered from a location proximate to the end-user, there will be reduced latency and increased delivery speed.
These speed improvements used to come at the expense of increased complexity and extremely high costs. Modern CDNs solve both of these problems while offering simple URL-based integration, typically requiring only a handful of small site changes. While many providers still charge for CDN like it’s the 2010s, most reputable companies will charge broadly similar CDN bandwidth rates as they do for any other bandwidth and servers.
Using a CDN can also radically simplify your core infrastructure. Since the CDN alleviates the load on all the storage, CPUs, RAM and other server processes necessary to deliver your files, implementing a CDN will decrease your core servers’ resource usage. Indeed, content heavy sites can often reduce the number of core servers by 50% or more when switching to CDN.
OPTIMIZE CSS AND JS
Don’t skip this section! I know you’ve seen this advice many times before. It seems so complex and complicated; something for more advanced site owners (not for you). Just getting CSS and JS to work is often incredibly hard, and with the fast-paced changes to keep up with a site, there’s rarely any time to dig in and solve these. Plus, how bad can it be? What’s a few extra KB of data (especially compared to unoptimized images)?
The problem with unoptimized CSS and JS goes far beyond the extra data you pay for, as a few extra KB isn’t that much data in 2021. The biggest problem with unoptimized CSS and JS is that these are programming languages. Every rule in your CSS must be evaluated through an incredibly complex process in the browser. Even though the bandwidth itself might only pose a small problem, every JS line needs to be processed by the engine. The extra computation time required on your end users’ computers can add seconds onto each page load. Cumulatively slow CSS and JS on just one high-traffic site may be costing your users years of waiting time every day. There are several free tools available that can do quite a bit of this simplification without requiring you to spend long nights manually optimizing your code. For CSS stylesheets, check out the free PurifyCSS.online or the reasonably priced Unused-CSS.com for some premium features. These tools cannot automatically correct every problem, but they can often make a big difference with just a couple of clicks. There are limits to what can be done for JavaScript automatically, but the free Closure-compiler.appspot.com service provides a solid improvement (and is based on Google’s Closure Compiler engine).
INCREMENTAL IMPROVEMENTS
The most important key to a reliably fast website is to test early and test often. What is not measured cannot be reliably improved. By far, the best tools for regular site testing are already built into your browser for free. Just open the developer tools in Firefox or Chrome and start running some basic tests on your site. Did you know that these have built-in support for advanced features like emulating mobile device browsers and connections? You can drill down into the incredible detail of your JavaScript’s inner workings or look at a high-level overview of the pain points in loading your site.
Opening the developer tools should be your starting point whenever you want to speed up your site a little bit, followed by some of our suggestions above. Lastly, consider running the occasional free test on Webpagetest.org to get a well-respected external overview of your site speed.
Jim Rohn once said, “Successful people do what unsuccessful people are not willing to do. Don’t wish it were easier; wish you were better.” By ensuring that speed and performance checks become a part of your routine, your site will stay fast with high performance. As a bonus, there is a myriad of evidence that fast sites convert better than slow sites. All of this speed spring cleaning won’t just leave you enjoying your summer beaches with peace of mind; you’ll be making money with happier customers.
Brad Mitchell is the famed founder of MojoHost, which has won numerous XBIZ Awards for Web Host of the Year and earned many loyal clients for nearly two decades. Known for his dapper style and charismatic wit, Mitchell is a regular fixture at trade shows, where he frequently shares hard-won wisdom while striking profitable deals. And because he really loves clients, he offers protection against DDoS for free as part of his service. Contact him at brad@mojohost.com to learn more.
