I am a huge proponent of prioritizing speed when it comes to website optimization. Speed has been a confirmed Google ranking factor for over 10 years and in most cases, gaining points in the speed department is faster and cheaper than many other SEO tactics (ie backlink building, content writing, etc.) With the ever-growing ubiquity of mobile browsing, connection speed has become a significant factor in a website experience – a fact which is often forgotten by website owners who are in the habit of visiting their site on a desktop via the office wi-fi.
The tips I’m about to share are not intended to be a comprehensive guide or a silver bullet. If you have big improvements to make and you’re just getting started, you’ll want to look at bigger guns like a CDN, backend cleanup, caching tools, image compression, server configuration opportunities and other tools that can deliver your CSS/JS/HTML/images more efficiently. However, if those approaches are inaccessible or if you’ve already tried all that, you’ll want to read on.
- Can that PNG be a JPG? If you’re using a PNG image with a transparent background but it’s placed over a solid color background on-site, create an alternative image with the background color embedded and save it as a JPG. Save the original in case you want to change that color some day.
- Use a CSS Sprite if you have content that features multiple small images. This one is not low-code, so skip it if you’re here for low-tech fixes. However, if you’re trying to shave off those stubborn milliseconds, this one could give you an edge. Compressing large image files is a popular approach, but what about small image files that just happen to be very numerous? A classic example is a collection of logos that link to media outlets where your business has been featured or link to past clients. Combine these images to improve efficiency.
- Consider moving your tracking code to the footer. This one is controversial because it may reduce the accuracy of your Analytics and technically it’s not the correct way to set up your tracking, but if you’re not getting a lot of traction yet and you’re not doing much with your data, the boost in performance could be worth it. At the very least, you’ll want to review the tags you’re loading. I worked on a website recently that was loading a Global Site Tag, Google Tag Manager and two different Google Analytics tags independently. This can happen when multiple people are working on the same site over time and not communicating effectively with each other.
- If you’re using Contact Form 7, Recaptcha v3 is probably killing your pagespeed. Recaptcha V3 runs in the background and you will see the logo on every page. When I was really drilling down on my pagespeed and getting down to the real nitty gritty, I noticed that the Recaptcha script was slowing down the site, and I even noticed that loading the CSS for the font in the little Recaptcha badge was coming up in my PageSpeed Insights suggestions. I switched to Akismet, but you can also follow this tutorial if you want to try just hiding the badge.
- Be thrifty with your mobile site. The mobile score on PageSpeed Insights reflects how your site loads on a throttled connection and it’s notoriously difficult to move that needle. How much thought did you put into each component of the mobile view? Does it need to have all the same content? If you are using a slider on desktop, can you pick just one slide and load it as an image and text on mobile only? On our homepage (at the time of writing this in November, 2022) we are using some stock photos that add visual intrigue but aren’t particularly important for getting the message across. I opted to swap out those purely decorative photos for solid backgrounds on our mobile site.
Desktop layout with decorative image 
Mobile layout with solid background - Reconsider your font choices. Are you in love with all of your fonts? Are they a crucial part of your brand identity? If so, awesome – leave them alone. If not, read on. In my experience, most website fonts are chosen without consideration for the impact they will have on speed. In many cases, you will be able to replace your fonts with browser-safe alternatives that will be similar enough to preserve your original vibe. This might look like keeping your showy heading font but swapping out the body font for something that doesn’t need to be loaded by the browser. Learn more about browser-safe fonts in this article by my friend and collaborator, Sean Conklin at Coded Commerce.
- Review what you’ve already done. This last one isn’t exactly what one might usually think of as a “quick hack.” It may not sound very sexy, but it could produce a fast result if you discover an overlooked opportunity. It’s normal to breeze past some of the details when setting something up for the first time. In fact, laboring over every setting could be a huge waste of time if you hit a roadblock later in the process of setting up a plugin, CDN, etc. Now that you’ve got more bases covered, go back to the beginning and see if it’s. Was there an option that seemed intimidating the first time around? Is your PHP version still up to date? Has your host rolled out any new technology or features that you’re not taking advantage of? This is an ongoing process!
Hopefully these tips have been new and informative for you. As always, if you’re looking for help speeding up your website or if you would like to outsource your speed optimization work, don’t hesitate to contact us.
Sources
Information for this article came from the following sources:
- Speed as a Google ranking factor for over 10 years as per Search Engine Journal.
- Google Tag Manager is faster than the same tags hardcoded according to Analytics Mania