For longer than I can remember, I’ve been hearing the term, “keep the website light and efficient”, however I feel this isn’t as high enough priority as it should be when planning a website. It seems that this subject is usually pushed to the side and falls into the hands of the developer, or is expected to be magically solved by some expensive delivery mechanism.
After attending Drupalcon New Orleans and seeing Pantheon’s Co-Founder and Head of Product, Josh Koenig’s session on, “Real Talk on Front-End Performance: Only You Can Prevent Slow Websites”, I feel I need to do my part and continue to push this important movement forward in order to improve website performance across the board.
Page Size Matters
JavaScript libraries, large hero images and background images, video players, and third party services are killing UX. As I am writing this post, the average page size on the internet is 2,312 KB or 2.3 MB with the bulk of that weight coming from images, scripts and video players.
The data states that on average, page size continues to grow, with the exception of the top 10 Alexa ranked websites on the Internet.
Top 10 websites heading the right way. The rest not doing so well.
— ronan cremin (@xbs) March 3, 2016 Source: HTTP Archive
Lag Kills
So why does your page size matter when it comes to user experience and site usability? Think about the last time you tried to open a link and nothing happened, or the page took forever to load. Chances are you didn’t stick around waiting for the information to appear, you tried to go somewhere else instead.
If your site takes 10 seconds to load, users often become frustrated and leave. According to HubSpot Research’s study, “the average load time of websites was almost four seconds — which, by itself, is enough to cause many visitors to bounce and look elsewhere.”
Visually Appealing and User-Friendly
When we want beautiful websites with fancy high quality images we must consider the effects on user experience. All of those beautiful images are costing us longer load times, which irritate the user, breaks continuity and distracts them from their goals. If the user cannot efficiently do what they came to do on the site, we have failed them and we will lose them, forever. So, how do we get usable but beautiful websites?
1. Talk to your Developer
During the early stages of planning a website, the client should be made aware of page load and the “costs” of their desired functionality. Quantifying to the client what an acceptable load time is on a 3g network, could set the stage for functionality and design, where these limits provide boundaries for the remainder of the process. Within reason and depending on the specifications, the goal of a website is to provide a great UX and ultimately to serve the sites intended purpose.
All the front and backend techniques such as an elaborate caching strategy and compressed stylesheets will fail as soon as one person uploads a 3 MB image. As smart developers and planners, we should always consider what type of functionality exists on each page and at what costs, while keeping in mind relevant connection speeds. We could even think of it by page and say we have this much file size/load time to spend on content and functionality.
2. Install the right tools
Ten second load times are not going to cut it and having a site load in under one second can be expensive and challenging on media heavy sites. However, there is a middle ground to delivering a great user experience with heavier sites and a nominal budget. For example, first screen paint optimization can provide the first bits of the article before the rest of the page finishes loading. The AMP project is a great example which combines speed improvements, such as asynchronous loading of external resources while controlling rendering order. Delivering the most important content first can provide perceived speed to the user, which allows them to start interacting sooner, rather than becoming frustrated and bouncing from your site. This keeps the user on task and moving towards their objective.
3. Continual Maintenance
Keeping a site loading or appearing to load quickly is never a one and done task. Web performance is an ongoing battle that requires monitoring and iterative improvements to fix and reveal any bottlenecks, like a 3 MB image that made its way to production.
Conclusion
Over-designed and busy websites are ultimately slowing down how we interact with the Internet today. Speeding up the load time of your website is a priority that needs to be addressed early and often. My final note here is to not lose sight of UX. When building a website, you need to keep the user in mind. User experience is more than having beautiful websites. Never forget the impact user experience plays in your website’s success.Below I have listed some tools and resources to help you find, benchmark, and diagnose what may be slowing down your website
Insights
600+ articles to give you key insights for your projects
