While you may want to just improve the speed and overall performance of a side project you’re working on, a lot of companies rely on their websites to convert traffic and visitors to leads and sales. For example, Walmart saw up to a 2% increase in conversions for every 1 second of improvement in load time and every 100ms of improvement resulted in up to 1% increase in revenue.
While these increases seem almost infinitesimal, you can imagine the difference to the company’s bottom line once the website’s performance is improved at a large scale.
Speed Matters vol. 3
In the UX hierarchy, users value speed (75%) the most — ranking it’s importance far above the web app’s appearance and ease-of-use. So how do you improve the performance of your web app? Below are some low-hanging fruits of ways you can easily minimize latency on the front end.
Clean it up
This one’s an easy one and should be part of any developer’s best practice. You should always refactor and rewrite your code in the most concise and efficient manner possible. This includes editing and paring down — take out any unused variables, functions or scripts you aren’t using. Other best practices for your HTML document to follow:
- CSS Placement: While you probably focus on CSS and building out your stylesheet after the skeleton of your webpage, the script shouldn’t fall to the bottom, but should be placed at the top of the HTML document’s header to allow for progressive rendering. This can help with perceived performance and ensures users don’t see any unstyled text or elements during load.
- JavaScript Placement: Conversely, your JS scripts and attributes should be placed at the bottom of your document to make sure you don’t block HTML and CSS rendering. Additionally, always prefer async script loading — that way the HTML parsing continues (instead of stopping) at a