user experience & design

4 Steps To A Faster Website

Sean
December 8th, 2017
5 MINUTE READ

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.

Start Caching

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.

4 Steps To A Faster Website

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.

4 Steps To A Faster Website

Load Times (Empty Cache vs. Full Cache) (Source)

Revisiting Plugins

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.

4 Steps To A Faster Website

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.

There are other tools to help minify your code as well, from HTML optimization extensions to CSS and JavaScript minifiers like cssmin.js, Closure Compiler, and JSMin.

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.

4 Steps To A Faster Website

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!

Sean McGowan
AUTHOR

Sean

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 and greatest in digital design, Sean can be found baking, watching movies, or complaining about the shortcomings of his favorite Philadelphia sports teams.

EXPLORE OTHER
ARTICLES

user experience & design

5 UX Improvements You Can Make To Your Online Store In 1 Day

codal insights

Codal Named One Of Clutch’s 2017 Global Leaders