4 Steps To A Faster Website
Sean McGowanDecember 08th, 20175 minute read
Sean is a technical researcher & writer at Codal, authoring blog posts on topics ranging from UX design to the Internet of Things. Working alongside developers, designers, and marketers, Sean helps support the writing team to ensure Codal produces engaging web content of the highest quality. When not writing about the latest innovations in app design, Sean can be found cooking, watching old movies, or complaining about the shortcomings of his favorite Philadelphia sports teams.
When people hear the term “UX design”, their minds often jumps to thoughts of user interface palettes, graphic design, maybe navigation architecting—all of the more creative, ‘artsy’ facets of the practice. And while these are all relevant, what’s forgotten is how crucial a role the technical side of a platform plays in creating an appealing user experience.
Codal is both a UX design agency and a web development company, but to separate the design teams from the engineering ones would be misleading. Our methodology is blended, which means the developers need to understand UX principles, and our designers need some level of technical knowledge.
This intersection of design and engineering is most evident when we consider a website’s load time. How fast your website loads is an obvious factor in the user’s experience, especially now that users are more impatient than ever before. Yet slimming down load times isn’t exactly in the designer’s wheelhouse—that would fall under the engineering domain.
In this article, Codal’s engineers provide some UX insight of their own in the form of tips and tricks to cut down your website’s load time. While these are presented as steps, their order of execution doesn’t matter—do any (or every!) one you can to give your users an improved experience.
On your initial visit to any website, your browser needs to load every individual element of it, from stylesheets and images to the HTML document and JS files. This is the longest possible load time for your site, and depending on the content, it can take upwards of 2.5 seconds.
It took about 2.4 seconds to load Yahoo.com with an empty cache (Source)
But if you enable caching on your server (with a service like Apache or Nginx), your browser temporarily stores that data in its cache, meaning it won’t have to waste time re-downloading on subsequent visits. A study by YUI found that cached pages could shave nearly two seconds off the load time.
Load Times (Empty Cache vs. Full Cache) (Source)
Here’s a simple trick to cut down your site’s load time: give your users less to load. One of the most notorious culprits of lagging websites are plugins, which, despite their functionality, can seriously hinder a platform’s load time.
If you’re running several plugins on your website, especially your homepage, revisit each one and ask if it’s absolutely necessary, or if it’s seriously bolstering your site’s user experience. If you feel you can’t cut any without negatively affecting your site, consider updating the plugin, or migrating to a more robust version.
Optimize Your Images
Like plugins, including high-quality images will seriously impede your site’s load time, but unlike the disposability of most plugins, it’s probably not feasible to toss out a majority of the images on your website, especially if you’re running an eCommerce one.
In fact, a study by the HTTP archive found that a whopping sixty-one percent of a page’s weight was attributed to its images. To mitigate this, you should optimize your site’s images so that they won’t slow down your site and leave your users frustrated.
There are three basic tenets of optimizing your site’s images: size, format, and coding.
Ideal file formats for your web images (Source)
The first, the image’s size, is simple enough. Avoid images with massive dimensions, and crop them before uploading them to your site (even if you crop after, sometimes the page will still load the entire image first).
The best image format for streamlining load time is likely JPEG, but PNGs will also suffice. Formats such as BMPs and TIFFs are highly discouraged, though newer formats like WebP and JPEG XR can help cut weight without sacrificing the quality or fidelity of the image.
Cleaning Up Code
Lastly, and perhaps most importantly, you can speed up your webpage by performing regular code review and cleanup, eradicating extra spaces, needless line breaks, and extraneous indentations.
These may seem like inconsequential issues, but when added up, these minor mistakes can seriously slow down a website, especially if it’s built on a WYSIWYG platform. When you chip away at these errors, byte by byte, you can see a noticeable decrease in load time.
Streamlining Load Times
While this blog post went into detail on four tips and tricks for speeding up your website, there’s a number of other major ways you can cut load time and bolster your user’s experience on your site.
These are a little more intensive, so you should consider hiring a web development company for these undertakings, but the payoff can be worth it.
This data, conducted from Walmart’s website, charts the heavy correlation between conversion rate and load time. It’s obvious that slow website’s won’t convert, but what’s most interesting is how steep the difference in conversion is by changing the load time even a second. That’s why these quick tips are so powerful—every byte and every second can spell the difference between a customer and just another visitor. If you want to cut your website's load times, boost speed, and enhancing its performance overall, drop Codal a line. We'd love to talk about it!