In the scope of any project work, website performance often takes a back seat to more visible deliverables. To put it another way, website performance is the bass player in the Rolling Stones. Everyone knows he’s there, but he’s overlooked. While Mick and Keith are household names, the bassist is holding down the groove and keeping the crowd “feeling” the music. Without the bass player, something is always missing.
The same goes for website performance. A beautiful redesign can allow a user to navigate a website with ease and hook them (think Keith’s opening guitar licks). Well-crafted copy can elicit an emotional call for a donation (Mick’s dancing and howling on the mic). However, a website’s performance is often only noticed when it’s not up to par, generating its own kind of emotional reaction — frustration.
Here’s a quick vignette every web user has encountered:
John sees an impactful social media post and wants to donate. He clicks the link, only to stare at a blank white page on his mobile phone for a few seconds. Frustrated, he moves on.
Yep, said website needs to move JavaScript (JS) below the main content so users can interact with the page more quickly. While seemingly small, this one website performance tweak helps bounce rate, Google Page Rankings and eventually increases fundraising when performance related bounces are eliminated.
How can a site’s performance be improved? Here comes the 5-point list:
1. Get a Snapshot
Choose a tool to measure website performance. Here at Charity Dynamics, we have an affinity for GTmetrix. Simply drop in a URL, and in seconds the GTmetrix report gives your site ways to improve. For the advanced users, there are settings available (with a free login) to view any URL with specific internet speeds. Seeing a site load over a 3G mobile connection will clearly illustrate how important website performance is.
2. Low-Hanging Fruit
GTmetrix and other tools provide dozens of categories related to web performance. Each is graded, with ideas for improvement. For non-developers, it’s easy to grasp and begin formulating a plan of action. For developers, the tool can provide a starting place for optimizing images, improving code location, and even eliminating the often-forgotten redirect chain. Oh, and be prepared for everyone’s favorite — CSS sprites — to make an appearance. Don’t say you weren’t warned!
Beyond more nuanced developer tasks, it’s incredible how much a website can be dragged down due to bloated image sizes. A larger than necessary thumbnail image appearing on the sidebar of every content page could cause almost every single page on your website to be unnecessarily slow.
To prevent this, our web dev team (or squad if we’re feeling particularly saucy) recommends these tools: Kraken.io, Optimizilla and TinyPNG. Pick the easiest tool to use and get familiar with it. (TinyPNG has an irresistibly cute image of a panda, which is merit enough for anyone to choose it.)
3. Defer, Defer, Defer
Let’s get into the weeds a bit here. There’s a little tag for performance, the HTML script attribute “defer”. For any JS file placed in the <head>, defer using this aptly named attribute and don’t look back! Here’s an example:
<script src=”demo_defer.js” defer></script>
At Charity Dynamics, putting all JS libraries that aren’t needed during page load at the bottom of the <body> is a common practice. This works just fine! Remember, it’s about making sure users aren’t staring at a blank page while a website’s social media plugin, jQuery library and other tools are loading.
4. Plan
That’s great, right? Defer that JS! However, developers are already thinking, “What if I’m inheriting previous work. Deferring a JS library could break countless pages, which would require a manual combing to confirm.”
Yes, that’s absolutely right. So, what’s the lesson?
When starting a project from scratch, a site’s performance has to be top-of-mind. Get performance right from the beginning, and every developer inheriting your code will sing your praises (hopefully quietly to themselves at their desk) for months and years to come.
5. Next Steps
Finishing up, here are some actionable steps to keep any website’s performance running top-notch:
• As websites grow and expand, multiple hands will be shaping website performance. It’s extremely important to keep performance in mind, install standards and develop processes every admin can easily implement in their daily workflow.
• Take tips from above and push the use of an image optimizer for every admin or content editor who uploads images. These tools won’t affect the look or quality, and can ensure website performance maintenance will be effective.
• Use GTmetrix (or a similar tool) periodically to check-in on your top five landing pages, homepage, and other key landing pages. Donation forms or high-volume events are also key areas to keep a close eye on. Running a report takes just a few seconds, and a quarterly check-in can be invaluable to solve any website performance issues before they compound.
***
A special note to all the talented bassists who have been in the Rolling Stones: You’re important, though you go unnoticed.
Such is the plight of bassists and web performance gurus everywhere.