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):
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:
Also Read-https://stackify.com/azure-diagnostics-the-bad-the-ugly-and-a-better-way/
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:
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.
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.
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).
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:
This is a high ROI—for your time—place to start when shoring up website performance inefficiencies. Two fixes can address these issues.
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.
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.
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.
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.
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.
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.
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.
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).
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.
Stackify's APM tools are used by thousands of .NET, Java, PHP, Node.js, Python, & Ruby developers all over the world.
Explore Retrace's product features to learn more.
If you would like to be a guest contributor to the Stackify blog please reach out to [email protected]
