Using Speed Index (SI) To Optimize & Improve Web Performance

Technically, the Speed Index (SI) is a determinant factor when it comes to measuring the overall website performance — it is all about making websites fast, including making slow processes seem fast. Generally, web performance refers to how quickly website features, like its layout and content load and render in any web browser, such as Chrome, Edge, Firefox, and the like.

As well as how well it responds to user interaction. Bad-performing sites are slow to display and slow to respond to input. On that note, bad-performing websites increase website abandonment. At its worst, bad performance causes content to be completely inaccessible. As such, the main good goal for web performance is for users to not notice performance.

While an individual’s perception of website performance is subjective, loading and rendering can be measured. Good performance may not be obvious to most site visitors, but most will immediately recognize a sluggish website. That is why we care to share these insights with you today in form of this elaborate guideline.

Whilst, bearing in mind, perceived performance is a subjective measure of website performance, responsiveness, and reliability. In other words, how fast a website seems to the user. It is harder to quantify and measure than the actual speed of operation, but perhaps even more important. To be on the safe side, please make sure that you follow our leads to the end.

The Main Speed Index (SI) Performance Metrics To Know About

Talking about the role of the Speed Index (SI), the perception of how quickly (and smoothly) pages load and respond to user interaction is even more important than the actual time required to fetch the resources. While you may not be able to physically make your website run faster, you may well be able to improve how fast it feels for your users.

That said, when talking about Google Webmaster Tools, Speed Index (SI) is one of six metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed. In reality, the Google Lighthouse Tool displays Speed Index in seconds. To have a clear picture below is a simple illustration screenshot of our website on a desktop:

A good general rule for improving perceived performance is that it is usually better to provide a quick response and regular status updates than make the user wait until an operation fully completes (before providing any information). For example, when loading a page it is better to display the text when it arrives rather than wait for all the images and other resources.

Even though the content has not been fully downloaded the user can see something is happening and they can start interacting with the content. Similarly, it is better to display a “loading animation” as soon as a user clicks a link to perform a long-running operation. Of course, this doesn’t change the time taken to complete the operation, yes.

But, as a result, the website feels more responsive, and the user knows that it is working on something useful. There is no single metric or test that can be run on a website to evaluate how a user “feels”. However, there are a number of metrics that can be “helpful indicators.” Luckily, the Core Web Vitals offers you the best place to kickstart your journey.

Consider the following:

• First Paint: The time to start of first paint operation. Note that this change may not be visible; it can be a simple background color update or something even less noticeable.
• First Contentful Paint (FCP): The time until the first significant rendering (e.g. of text, foreground or background image, canvas or SVG, etc.). Note that this content is not necessarily useful or meaningful.
• First Meaningful Paint (FMP): The time at which useful content is rendered to the screen.
• Largest Contentful Paint (LCP): The render time of the largest content element visible in the viewport.
• Speed index (SI): Measures the average time for pixels on the visible screen to be painted.
• Time To Interactive (TTI): Time until the UI is available for user interaction (the last long task of the load process).

In simple terms, speed index (SI) measures how quickly content is visually displayed during page load. Whereby, the Google Lighthouse Tool first captures a video of the page loading in the browser and computes the visual progression between frames. And then, thereafter, it uses the Speedline Node.js Module to generate the Speed Index score.

Note that time appears to pass more quickly for users who are actively engaged, distracted, or entertained. More so, than for those users or audiences who are waiting passively for something to happen (such as the YouTube waiting time case). Where possible, actively engage and inform users who are waiting for a task to complete.

Why Care About Speed Index (SI) For Your Web Performance

Overall, website performance — and its associated Speed Index (SI) best practices — are vital for your website visitors to have a good experience. In a sense, web performance can be considered a subset of Web Accessibility per see. With performance as with accessibility, you consider what device a site visitor is using to access the site and the device connection speed.

Be that as it may, we use the PageSpeed Insights (PSI) Tool and a user-agent (network): like Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Safari/537.36 Chrome-based Webdev tool — Google Lighthouse — to measure the overall website performance and get the desired results.

Precisely, using Speed Index (SI) for measuring performance provides an important metric to help you assess the success of your application, website platform, or even your web-based business service solutions.  For example, you can use performance metrics to determine how your application performs in comparison to a competitor in your industry.

Or rather, you can compare your app’s performance across releases. The metrics you choose to measure should be relevant to your users, site, and business goals. They should be collected and measured in a consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders.

As an example, consider the loading experience of the main CNN.com and official website — which at the time of this writing had over 400 HTTP requests with a file size of over 22.6MB. There are a few key things to note.

Consider the following:

• Firstly, imagine loading this on a desktop computer connected to a fiber optic network. This would seem relatively fast, and the file size would be largely irrelevant.
• Secondly, imagine loading that same site using tethered mobile data on a nine-year-old iPad while commuting home on public transportation. The same site will be slow to load, possibly verging on unusable depending on cell coverage. You might give up before it finishes loading.
• Thirdly, imagine loading that same site on a $35 Huawei device in rural India with limited coverage or no coverage. The site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse CPU impact causing browser crashes if it does load.

Specifically, a 22.6 MB website could take up to 83 seconds to load on a 3G network, with DOMContentLoaded (meaning the site’s base HTML structure) at 31.86 seconds. And, it isn’t just the time taken to download that is a major problem. For your information, there are a lot of countries that still have an internet speed test for connection that bill per megabyte.

Our example 22.6 MB CNN.com experience would cost about 11% of the average Indian’s daily wage to download. From a mobile device in Northwest Africa, it might cost two days of an average salary. And if this site were loaded on a US carrier’s international roaming plan? The costs would make anyone cry. (See how much your site costs to download to learn more.)

The Factors To Consider When Building A High-Performance Website

In the first place, building a website requires HTML, CSS, and JavaScript. To build websites and applications people want to use, which attract and retain users, you need to create a good user experience. Part of a good user experience is ensuring the content is quick to load and responsive to user interaction. Essentially, this is known as web performance.

And in this module, you’ll focus on the fundamentals of how to create performant websites. The rest of our beginner’s learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them.

Arguably, while knowing HTML, CSS, and JavaScript is needed for implementing many improvement recommendations, knowing how to build apps is not a necessary pre-condition for understanding and measuring performance. We do however recommend that before you work through this module, you at least get a basic idea of web development.

In particular, by working through the getting started with the web module to gather more resourceful information. After all, it would also be helpful to go a bit deeper into other basic topics, with more details about website modules.

Including but not limited to;

• Introduction to HTML basics course
• CSS first steps for beginner webmasters
• JavaScript first steps for newcomer developers

Moving on, once you’ve worked through some of the above modules, you’ll probably be excited to go deeper into web performance — you can find a lot of further teachings in the main MDN Web performance section for free. Including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.

As we aforementioned, web performance is important for accessibility and also for other website metrics that serve the goals of an organization or business. Good or bad website performance correlates powerfully to user experience, as well as the overall effectiveness of most sites. This is why you should care about website performance.

Using The Speed Index (SI) Metrics To Know How Fast Is Fast Enough

At all costs, the Speed Index (SI) calculation for website performance is a metric that calculates what percent of the page is visually complete at every 100ms interval until the page is visually complete. The overall score, the above-the-fold metric, is a sum of the individual 10 times per second intervals of the percent of the screen that is not visually complete.

The actual fact is that by reducing the time that a user has to wait for useful content, and keeping the site responsive and engaging, the users will feel like the site performs better — even the actual time to load resources stays the same. Now that we are already here, the main goal is to Improve Lead Conversion Rates for your overall website.

So, in simple terms, we can clearly state that Speed Index (SI) is a page load performance metric that shows you how quickly the contents of a page are visibly populated. It is the average time at which visible parts of the page are displayed. It’s expressed in milliseconds and dependent on the size of the viewport, the lower the score, the better as shown below.

Keep in mind, that reducing the download and render time of your website improves conversion rates and user retention. Not forgetting, a conversion rate is the rate at which site visitors perform a measured or desired action. For example, this might be making a purchase, reading an article, or subscribing to a newsletter. Consider the Call To Action (CTA) in this case.

Whereby, the action is measured as the conversion rate depends on the website’s business goals. By using the Speed Index (SI) basic measurement metrics, you’ll notice that performance impacts conversion; improving web performance improves conversion. Usually, your target website visitors expect your overall website to load in two seconds or less.

As a matter of fact, sometimes it’s even less on mobile (where it generally takes longer). By the same token, these same potential website visitors begin abandoning slow websites at 3 seconds. This means, that the speed at which your website loads is one factor. If it is slow to react to user interaction or appears janky, this causes site visitors to lose interest and trust.

The Simple Stepa To Optimize And Improve Your Website Performance

To build websites and applications people want to use; to attract and retain site visitors, you need to create an accessible site that provides a good user experience. Building websites requires HTML, CSS, and JavaScript, typically including binary file types such as images and video. The decisions you make and the tools you choose as you build your site matter a lot.

For one thing, they can greatly affect the performance of the finished work. For instance, it’s good to look at whether you need to include external fonts or not — if you do, you should try to get all the basic material guides and learn how to include the fonts your design requires — with the least impact on the overall performance of your website.

Unless you have a specific reason for focusing on a particular metric, it’s usually better to focus on improving your overall Performance score. Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score.

So, how do you improve your Speed Index (SI) Score as a beginner webmaster? Well, anything you do to improve page load per Speedline will improve your Speed Index Score, by quite a big margin. While, at the same time, you should try addressing any issues discovered by these Diagnostic audits that should have a particularly big impact (Lighthouse Scoring Guide).

Consider the following key elements:

• How to minimize the main thread work
• The steps to reduce JavaScript execution time
• Ensure text remains visible during webfont load
• Source code for performance speed Index audit
• Performance audits for a landing page

Always remember, good website performance is an asset for your web-based business to take pride in. While, in the same fashion, bad performance is a liability for a downfall. Perse, site speed directly affects bounce rates, conversion, revenue, user satisfaction, and search engine ranking. Performant sites have been shown to increase visitor retention and user satisfaction.

Slow content has been shown to lead to site abandonment, with some visitors leaving to never return. Reducing the amount of data that passes between the client and the server lowers the costs to all parties. Reducing HTML/CSS/JavaScript and media file sizes reduces both the time to load and a site’s power consumption (see performance budgets for more info).

Tracking performance is important to track multiple factors like network speed and device capabilities. But, there is no single performance metric, and differing business objectives may mean different metrics are more relevant to the goals of the site or the organization that it supports. Try a few steps below to up the performance of your site as perceived by users.

Step #1: Minimize The Initial Load Time

We know that not prioritizing web performance can result in a loss of business revenue. Certain business metrics directly relate to a user’s web performance experience and how to apply service design to boost the user’s experience of web performance. Like the importance of understanding how cumulative experiences impact conversion and retention rates.

To improve perceived performance, minimize the original page load. In other words, download the content the user is going to interact with immediately first, and download the rest after “in the background”. The total amount of content downloaded may actually increase, but the user only waits on a very small amount, so the download feels faster.

Separate interactive functionality from content, and load text, styles, and images visible at initial load. Delay, or lazy load, images or scripts that aren’t used or visible on the initial page load. Additionally, you should optimize the assets you load. Images and video should be served in the most optimal format, compressed, and in the correct size.

Step #2: Prevent Jumping Content And Other Reflows

Moving on, some attributes and the source order of your markup can greatly impact the performance of your website. Chiefly, you can improve the User Experience (UX) Design, drastically, by minimizing the number of DOM nodes, and making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts,

As an example, images or other assets causing content to be pushed down or jump to a different location — like the loading of third-party advertisements, can make the page feel like it is still loading and is bad for perceived performance. Content reflowing is especially bad for user experience when not initiated by user interaction.

If some assets are going to be slower to load than others, with elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn’t jump or even asynchronously resize. In particular, after the website has become interactive (check out the WebPagetest Speed Index for more details).

Step #3: Avoid The Website Font File Delays

Selecting an appropriate font type can greatly improve the user experience. From a perceived performance point of view, “suboptimal fonts importing” can result in a flicker as text is styled or when falling back to other fonts. In that case, try to make fallback fonts the same size and weight so that when fonts load the page change is less noticeable.

Equally important, JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. CSS may be a less important optimization focus, but there are some CSS Features that impact performance more than others.

Try to learn about the concept of responsive images — they are just one part of Responsive Web Design (RWD), and a futuristic CSS topic to learn. Use images that work well on devices with widely differing screen sizes, resolutions, and other such features. Also, look at what tools HTML provides to help implement them to improve performance across different devices.

Step #4: Interactive Elements Should Remain Interactive

Make sure visible interactive elements are always interactive and responsive. If input elements are visible, the user is able to interact with them without a lag. They notice something is laggy when there are more than 50ms to react. Thus, a page is behaving poorly when content repaints slower than 16.67ms (or 60 frames per second) or repaints at uneven intervals.

On one hand, try to make things like type-ahead a progressive enhancement: use CSS to display input modal, and JS to add autocomplete as it is available. On the other hand, some of the lowest-hanging fruits of web performance are often media optimization. Serving different media files based on each user agent’s capability, size, and pixel density is possible.

In addition to the front-end components of HTML, CSS, JavaScript, and media files, there are features that can make applications a little bit slower. As well as other features that can make applications subjectively and objectively faster. Luckily, there are so many APIs, developer tools, best practices, and bad practices out there relating to web performance.

Step #5: Make Task Initiators Appear More Interactive

Try making a content request on the likes of keydown rather than waiting for keyup can shave 200ms off the perceived load of the content. Adding an interesting but unobtrusive 200-ms animation to that keyup event can reduce another 200 ms of the perceived load. You’re not saving 400ms of time, but the user doesn’t feel like they’re waiting for content.

Not until, well, until they’re waiting for content. So, it’s clear to say that: More important than how fast your website is in milliseconds is how fast your users perceive your website to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations.

What’s more, with web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers — but possibly with some sort of limited bandwidth, CPU, and battery life — it becomes very important to consider the performance of your web content on these platforms. While considering that optimization is an all-rounded event.

What Is Coming Next In Core Update Impacts On SEO Terms 

For beginner webmasters, there are still many other things any given website designer or even application/software developer can do to improve the overall web-based business performance. But, how fast is fast enough? How can you convince powers that be of the importance of these efforts? Once optimized, how can you ensure bloat doesn’t come back?

Some of the most notable recent ones include Penguin in January 2016, Mobilegeddon in April 2015, and Possum/Exact Match Domain (EMD) in September 2012. These were all algorithm changes that directly impacted search results. Of course, yes, there was also a host of other less dramatic Google Algorithm Updates that made quite an SEO impact too.

Such as Snippet Length, AMP Carousel, and Pigeon to name just three others. We’ll try to cover a few details about these kinds of minor technical tweaks herein — because they can often be where changes happen first — before moving onto larger-scale site moves. For example with mobile responsive design overhauls later on down the line.

In a nutshell, this is why it’s so important to keep up with what Google is doing even if your site appears to be unaffected. So that you can stay ahead of the curve always and be safe when others are not. Below are a few mentions.

Google Penguin Update — 2016

The most recent significant Google update was the rollout of the long-awaited Google Penguin algorithm update. The focus of this new version of Penguin is on penalizing websites that engage in spammy link-building practices, such as buying links or exchanging them for goods and services. Previously, sites affected by Penguin would simply see a decrease in rankings; now, they may also get hit with a manual penalty from Google’s team of human reviewers.

Google Mobilegeddon Update — 2015

Another highly anticipated update that significantly affected search results was the Google mobile-friendly update. This change, which rolled out in 2015, gave a huge boost to mobile ranking for sites with responsive designs and high-quality content while demoting those without either of these attributes. Sites across industries saw significant changes as a result of this algorithm change. It’s important to note that, presently, there is no one “mobile friendly” ranking factor anymore since other factors beyond site design have been added into consideration by the new Hummingbird machine learning algorithm. Rather than considering individual elements such as page speed and load time (as used to be done), now overall user experience matters more when determining organic search ranking on mobile devices.

Google Possum Update — 2016

The Google Possum update, which was released in late 2016, had a significant impact on local search results. This algorithm change aimed to provide more relevant and accurate local search results by taking into account the physical location of the searcher as well as the business itself. The end result was that businesses located near other businesses with similar names started appearing in each others’ search results, even if they were not actually competitors. Additionally, businesses that shared an address (but were located in different areas) saw their rankings fluctuate more than ever before as a result of this update.

The Way Forward From Here Henceforth…

For sure, now that we’ve gone over the most important recent Google algorithm changes, let’s take a look at what we can expect in the coming year and beyond (it’s good to be ready and armed than not). Forthwith, one of the biggest changes that are rumored to be on the horizon is an update to the Penguin algorithm. This new version is code-named “Penguin 11.”

Eventually, it is expected to focus on penalizing websites that engage in artificial and organic link-building practices such as paid search links, excessive link exchanges, keyword stuffing, and the like. Another change that is expected to happen in 2022 is a further increase in the importance of user experience. With Hummingbird, Google’s machine learning algorithm rollout.

On that note, it’s now taking into account a wider variety of factors when determining organic search ranking in the first position. Therefore, this means that it’s more important than ever to make sure your website provides an excellent overall experience for visitors. Now that we’ve covered what to expect, to get ahead of the SEO curve, there are a few things to note.

Consider the following:

• Remove any bad links from your website and disavow any links that you weren’t able to get rid of using Google’s link disavowing tool. In addition, make sure your website is mobile-friendly and easy for visitors to navigate!
• Regularly audit your website to ensure that it is providing a great user experience! Make sure all of your business information (including address, phone number, and website) is up to date on Google My Business.
• Focus on creating high-quality content that will attract natural links from other reputable websites.
• Continue using keyword research to determine which keywords are most relevant for your business.

In addition, we can also expect Google to continue its focus on Local SEO as a determinant factor for search results. One thing is for sure, with the earlier Possum and numerous other changes over the past few years, it’s clear that Google is placing greater emphasis on providing relevant results for users. Especially, those users who are looking for businesses nearby.

Similarly, another change that may be coming soon is an increased emphasis on user experience when it comes to ranking websites on mobile devices. Suffice it to say, with Hummingbird now able to better understand complex search queries, Google may start placing even more weight on other factors too. Such as page speed and load time when determining how.

With that in mind, it’s important to note that not all businesses will be impacted in the same way by Google core updates. For real, some may see a slight decrease in traffic, while others may see a more significant drop. However, it’s always best to err on the side of caution and make sure your website is up to par with Google’s latest guidelines.

Summary Notes:

By all means, through Speed Index (SI), web performance is important for accessibility and also for other website metrics that serve the goals of an organization or business. Clearly, good or bad website performance correlates powerfully to user experience, as well as the overall effectiveness of most websites. This is why you should care about web performance.

We can simply say that website performance is a metric value that matters quite a lot — to both webmasters and website users alike. For one thing, it can mean the difference between capturing a visitor’s email or — even better — scoring a sale. And, it’s why we spend so much time optimizing our very own websites and those of our clients — to make them faster.

Obviously, we are not just talking about page speed. Essentially, there’s a whole other area of website performance optimization that doesn’t get as much attention. For instance, if you can recall, we’ve talked about why perceived performance matters — a measure of how fast a user thinks your website is, not necessarily how fast your technical stats say it is.

Related Resources Summary Topics:

• JavaScript performance best practices
• How do users perceive performance?
• Measuring performance plus web performance resources
• Multimedia: images, responsive images, and Multimedia: video
• HTML performance features, and CSS performance features
• Fonts and performance, and Mobile performance
• The business case for web performance
• Main web performance section on MDN

In this post, we have explored what perceived performance is, some of the psychology behind how people perceive time, and even taken a look at some techniques you can use to make your websites feel faster. Using the techniques in this article, in addition to traditional page speed optimization techniques, should help enhance the overall user experience of your website.

That’s it! Mark you, the “why” of web performance plus a few things about web performance that you needed to know. If you think that there there’s something else that we can add to this guide, kindly let us know in our comments section down below. You are also welcome to Contact Us at any time and let us know how we can sort you out, or even Donate to support us!