how to optimize website performance

How to Optimize Website Performance

Alex Williams Developer Tips, Tricks & Resources

In a  2019 study from Milliseconds Make Millions by Fifty-Five and shared on Google’s official blog found several interesting insights on small speed increases.

37 brands qualified for study, after qualitative checks, with speed data measured via Google Lighthouse and aggregated against each brand’s Web analytics. The study targeted four key speed metrics. The results were fed into a Logarithmic Regression model to extract meaning.

Non-exhaustive summary of findings for a 0.1s faster performing mobile sites alone (not factoring in the effect on desktop decisions):

  • 8.4% conversions increase for retail consumers; 9.2% increased average order value
  • 10.1% conversions increase for travel consumers; 1.9% increased average order value
  • More sales funnel progression (direct correlation); improved bounce rates for travel homepage, retail product listings and travel by 6.5%, 5.7%, and 5.4% respectively

In short, learning how to optimize website performance can disproportionately grow the bottom-line. Let’s learn how to optimize website performance from two levels:

  • The first section of this guide is dedicated to tools that give you a useful overview for your continuous development pipeline.
  • The second are practical fixes to the most performance-hitting issues that affect websites.

New call-to-action

Track Your Resources During Development

Create KPIs via the RAIL model

You can’t optimize what you don’t measure. RAIL (Response Animation Idle Load) is a user-centric conceptual model used for analyzing and designing your website performance. User experiences are categorized into key actions (for instance, scroll, tap, load) so you can better create KPIs for each item. The model assumes four key phases in the web app life-cycle: 

  • Response—how quickly does the end user get a response? It is recommended to get this under 100ms from the moment the user clicks or taps on a button. Anything over this will not feel immediate to the user psychologically.
  • Animation—this includes things like dragging, scrolling and other visual animations. The upper limit recommended is 16ms at 60 frames per second.
  • Idle—This is work done in the background. This is considered part of the 100ms response time.
  • Load—how quickly the first meaningful paint is reached; e.g. the expected time is under a second. After this is accomplished, your single aim is to sustain your application’s responsiveness for the user.

Tally your website performance metrics against Google’s ‘Web Vitals’ initiative, which gives you unified guidance for user experience quality signals. Don’t underestimate the importance of performance testing. Stackify Retrace and similar tools give developers heads up and provide means of how to optimize website performance. This is a useful guide for setting up web vitals measurements. The web-vitals JavaScript library on GitHub is perhaps the simplest measuring tool – use this to create KPIs. 

Speed budget with Google Lighthouse

Lighthouse has gained popularity over the last few years as a performance auditing tool—its central function is to score webpages in the categories of accessibility, performance, SEO, and best practices. You can also, however, use it as a performance budgeting tool.

Budgeting with Lighthouse CLI

This is one method for creating a budget in Lighthouse. This is done as an extension from page speed insights or through DevTools. You can use npm to install the Lighthouse CLI; see a full guide here.

Budget for individual objects as a resource array. This can be assigned to a: document, image, font, media, script, stylesheet, third-party, total, or other. Multiple performance budgets are possible in single stores, such as giving the homepage and blog posts different performance budgets.

Once you’ve completed setting up your budget, you will receive a normal report with performance indicators, plus an extra column showing budget results. It will highlight over budget resource types.

Once you’ve established your budget, it should be tracked in correspondence with the bottom-line. This is your top-line starting point for optimizing your website(s). 

Shore Up the Largest Website Performance Inefficiencies 

The following five issues are the most under-addressed and high-impacting—according to a 2018 research study on how to optimize website performance by SEMrush—arranged in order of importance starting with the most important issue: 

  • Unminified CSS and JavaScript files
  • Slow page load speed (HTML)
  • Uncompressed CSS and JavaScript files
  • Uncached CSS and JavaScript files
  • Uncompressed pages

This is a high ROI—for your time—place to start when shoring up website performance inefficiencies. Two fixes can address these issues.

Lighten pages

First start with heavier pages that contain more resources and take longer to load. A good aim for your total JSS and CSS transfer file size is 2MB, no more. Anything over this is considered heavy. An auditing tool like SEMrush will for instance generate an error. 2MB is enough for complicated websites with breakthrough technologies.

Trimming media

Videos and images take up the largest portion of your page’s diet, so start here. What are the resolution, quality, or format of your visual content, which can substantially shrink your page. Clinically evaluate the value of each visual. Would emojis work better in some cases, for instance…🙋‍♀️? These are basically shrunken images.

Trimming CSS and JavaScript

An enormous number of websites use unminified JavaScript and CSS files. Minifying them (clearing out non-functional lines, comments, and whitespace from source codes) minimises resources and thus their load time. Several tools and methods exist for this process. The two most popular minifying JavaScript tools are JSMin and YUI compressor (YUI compressor can also minify CSS). Remove dead code. Rewrite and minimize whatever remains. Obfuscation is an alternative method used by many major firms but has a few more risks in terms of creating bugs. Don’t forget to compress your scripts and styles. Use schemes like deflate or gzip to do so for JavaScript, CSS, and HTML, which will cut their sizes in half or perhaps more.

Optimize server performance

 Another aspect of slow page loading speeds—which is the second most critical issue that underperforming websites face—and inefficient web hosting is a more common cause for sluggishness than is a large HTML page size (which can be as little as 1% of a contributing factor). Reevaluate your hosting provider and specific package; if your numbers are substandard, change your provider or consider paying for a dedicated server.

Extra server fixes

This Think Google calculator can help you to estimate how site speed improvements could affect your revenue. Other key factors that can influence your server response are: slow database queries / routing / application logic, and starvations of libraries, frameworks, resource CPU, or the memory. Here is an overview on fixing the latter from Google. 

On top of that you can find application performance management tools such as Retrace which will help you with speedy troubleshooting and problem solving. Spending less time on looking for resolutions and being quick at getting back on your feet can also affect your revenue as per the following ROI calculator.

Browser caching

Non-cached CSS and JavaScript files are another major issue. You must specify browser caching in the response header; not enabling this can cause users to re-download files upon each visit to your webpage. By enabling browser caching for CSS and JavaScript files, browsers can reuse and store your pages resources without needing to download them each time a user visits during its requests for your page. It’s a win-win: browsers feed less data which speeds the loading times of your pages. To spot such issues which are easy to overlook  you can always turn to code profiling tools available to assist you with improving performance such as Prefix by Stackify to help you recognize the issues. This is a very common cause of underperforming websites. Easily fix with Prefix. Download Prefix for Free.

Tidying redirects

Redirect loops and chains are an old website performance issue. Fixing this can clean up delays between the moment that users click for your webpage and when it actually appears on-screen. This also reduces confusion that crawling bots face. The more redirects you have, the more that SEO score-assigning bots may cut away at your rank. Note that the older your website is and the more redirects you have accumulated, the trickier that it can be to keep your site schema tidy.

Cleaning up redirects

301-directs are permanent, and denote when a page has been moved or deleted, giving visitors the ERROR 404 message. 302-directs are temporary, and means you are redirecting traffic to another page for a while. This is not an especially common issue, so you could check whether you have redirect issues first using free tools like Redirect Mapper, Broken Requests, Redirect Detective, and Screaming Frog Bulk Request Redirect Checker (more thorough). 

Final words 

Optimising site performance as a two fold process. 

Measuring your starting/ongoing points is the project management half of the equation. We’ve mentioned RAIL and Lighthouse budgeting. Google PageSpeed Insights is another great tool to begin with—it’s free, capable, and generates mobile and desktop reports for your site, with a focus on criteria that Google treats seriously. 

The second half is to practically shore up inefficiencies that affect your website’s performance. I’ve gathered these into two broad tasks with many subtasks—plus a bonus—to lighten your pages and optimize server response times. 

With the two together, you’ll have a rigorous optimization plan on how to optimize website performance.