Five Low Risk Improvements to Your Website Before the Holidays
With that in mind, I thought it might be helpful to list some low-risk improvements you could squeeze in before the holiday code freeze.
Permalink to 1. Test thoroughly on multiple devices 1 . Test thoroughly on multiple devices
You may have established processes for testing the incremental changes you make to your site. That’s a good thing. But sometimes that incremental testing can miss big picture issues. This is a good time to step back and have your team walk through the entire flow to look for problems.
What brought this to mind was Wayfair’srecent Way Day Sale . I’m in the market for new table lamps to replace ones destroyed by wind and rambunctious pets. The Way Day Sale seemed perfect for me. Unfortunately, I struggled to navigate Wayfair’s website on my iPad .
First, the option to filter results to only show table lamps is available on mobile, but not on wider screens.
Wayfair’s small screen page loads with a “ Sort & Filter” button. Selecting it opens a panel where you filter by categories like table lamps.
On wide screens, the “Sort & Filter” button is replaced by one that only says “Sort.” When opened, none of the filter options available on small screens are present. There was no way to only see table lamps.
Second, when you tap on a product image, it tells you that you should pinch to zoom. Doing so results in a broken experience.
In this video, I try to follow Wayfair’s directions to pinch to zoom. Instead of zooming in on the photos, the page zooms into a broken state with a large gray box taking up most of the page.
In addition to testing on your most commonly used devices, you might want to test on some iPads. Given my experience lately, tablet form factors are often missed.
Your team may find things that you can’t repair before code freeze. That’s ok. Knowing where the site is broken can still help. For example, a low risk fix for Wayfair could be to remove the instruction to pinch and zoom.
Think of it like when you host your family for the holidays and can’t clean every room. At least you know which rooms are a mess so you can steer guests away from them.
Permalink to 2. Make sure images are well compressed on key pages 2 . Make sure images are well compressed on key pages
In an ideal world, you have some sort of image optimization service in place that ensures your images are compressed and transformed into the best image format automatically. But if you don’t have a solution like that already in place, it probably won’t get done before code freeze.
Instead, figure out what your most high traffic or most important pages are and make sure the images on those pages are optimized. If you have a content management system or underlying ecommerce platform, it will be fairly low risk to update pages with smaller file size versions of the same image.
How do your products show up when someone shares a link on a social media site or sends a link to a family member? Does the right title and photo show up? How about the information that search engines use to index your content? Are those tags correct?
The reason these items may be lower risk to change is because they are meta tags and other code that doesn’t impact the end user experience. So it can be easier to change them without risking breaking other behavior or functionality on the page.
Permalink to 4. Add appropriate autocomplete attributes 4 . Add appropriate autocomplete attributes
You’ve probably experienced times where your browser suggested filling in a form with your name, address, and credit card information automatically. And you’ve probably experienced times where you tried to use that feature and it didn’t work as expected.
This feature is called autofill. It works differently in every browser, but the way to support it is the same. You can add attributes to form fields that help the browser know what type of field it is. Because these attributes are typically only used by the browser, adding them or fixing them, can be fairly low risk.
And when these attributes are missing or incorrect, they can create problems. A common issue is a credit card year field that only accepts twodigits, but the browser autofill tries to enter all four digits. I estimated that this problem with the year field on Chipotle ’s site may have cost them $4.4 million in lost sales. You can prevent this problem by adding
Permalink to 5. Preload your most important image 5 . Preload your most important image
Oneof the easiest ways to make a web page feel fast is to make sure whatever is visible on the initial screen loads as quickly as possible. This is often your most important image. For example, on a product page, the initial photo of your product is the thing you want to visible asap.
Not only is this photo important for your users, but it is often considered the Largest Contentful Paint image which is oneof the Core Web Vitals that Google uses to inform its search engine rankings.
If your most important image is loading too late, you can let the browser know about the image earlier by adding a preload instruction in the document header. This oneline of code tells the browser to download the image because it will eventually need it.
Bonus tip: if your most important image is lazy loading, it shouldn’t be. Depending on how the lazy loading was implemented, it may be as simple as removing an attribute on the image to stop the lazy loading behavior. If that’s the case, it can be another low risk improvement.
Permalink to Plan for Next Year Planfor Next Year
Once you hit code freeze for the year, it is a great time to step back and put in place your plans for next year . Perhaps now’s the time to assess your sites performance and put together plans to improve speed next year . If that’s on your list, we have a performance checklist that may help.
Or perhaps next yearis the year you redesign your site, standardize on a design system, or add progressive web app functionality. Now’s the time to gather the tools and resources you need to hit the ground running in 2024 . If there’s anyway we can help, please let us know.
I remember oneclient who referred to their holiday preparations as a “code freeze-ish.” They stopped all risky changes and everything else had to get approved and thoroughly vetted to ensure that nothing was going to break.
I like this idea. The goal of a code freeze is to reduce risk, but it doesn’t mean all improvement has to stop. We can focus on improvements that are low risk while deferring the bigger changes until after the busy season. Good luck with your final holiday preparations!