What Makes Your Site Fast? (Lighthouse Performance Scoring)
Web
6 Min-Read
How Fast Is Enough?
My site was slow and ugly!
@Author
This site?
@Reader
Yep, back when I was just starting out – it was painfully slow … we’re talking dial-up era slow! It took about 8-14 seconds per page load. đź’€
Downright embarrassing!
It didn’t take too much falling down the YouTube rabbit hole to figure out what the issue was. It was me!
Well, I was lazy. Got myself some cheap ass hosting and slapped a WordPress site. And like basically every beginner ever, I just used whatever was easy and convenient.
Page builders, plugins galore, third-party junk and to top it off … some random paid tools. I fed my site too much fat and it was running slow cause it gained too much weight.
By the time I achieved a 97 PSI score, there were still several things I had to iron out. The key takeaway is that there is no such thing as ‘enough’.
So, I hired an expert to look at things I missed. (I’ll tell you more about this below).
What Makes Your Site Fast?
I’ll keep this simple.
Avoid Crappy Hosting (Use Litespeed Server)
Your Images Suck Big Time
Remove All Plugins (Okay May Be not All)
Clean Up and Minify Code/JavaScript
Use a CDN (Caching Matters)
Self-host Fonts Don’t Use Google Fonts
Lazy load and Pre-load Resources
Avoid Crappy Hosting
One of my biggest early mistakes was definitely signing up with HostGator. They were so bad. (Remember that agonizing 8-14 second loading time I mentioned before)?
Most posts/videos online won’t tell you that though cause they are affiliates with fake “best hosting” reviews. What can I say, honesty doesn’t always pay the bills.
Here are some hosting companies that I would avoid entirely:
Here is what to look for when choosing your hosting service:
Lite Speed and NVMe
Server Uptime in SLAs
Server Location and CDN
Unlimited Bandwidth?
Lite Speed and NVMe
Your host’s server is basically just another computer, too. The main difference is that it’s running specialized webserver software. (Instead of Windows, macOS or Linux).
Now Apache is probably one of the oldest and most widely used ones, but I’ve also seen Nginx.
I wouldn’t waste my time with both of these though, Litespeed is literally built from ground up for speed and performance.
To be honest 40% or more of the speed gains I got were from my hosting side.
@Author
And why NVMe?
@Reader
There were HDDs, then Solid State Drives (SSDs) and now NVMes. It bypasses the SATA interface, connecting directly to the server’s CPU via the PCIe bus.
Translation = Higher bandwidth.
Hosting companies like NameHero, ChemiCloud and Hostinger all have NVMe drives.
24X7 Support
A very common thing I noticed was a phenomenon called the “blamesell” game.
Almost makes you feel like you’re getting played!
A very simple way to detect red flags is:
The support is not available 24X7.
They’ll blame anything but themselves when things slow down.
They immediately push you to upgrade.
Always check their uptime guarantee (just Google “[Host name] + Uptime Guarantee”).
Server Location and CDN
The goal is to make sure those main servers are right there in the same country as most of your visitors, or at least super close by.
Again Google: “[Host name] + Server Locations”.
Most hosting companies will let you choose which datacenter to use on initial setup. That way, when you add a CDN later, you’ll get the best possible results.
Unlimited Bandwidth?
Most web hosts advertise “unlimited bandwidth” on their pages. The thing is by definition, there’s really no such thing.
They say that so they don’t have to explain the technical limits (like, “you get 40GB, but you’ll never hit it”) and end up confusing you, to be completely honest.
Bandwidth is important though, especially when your site starts getting some visitors.
@Author
Isn’t that a little scammy?
How do I know the actual bandwidth?
@Reader
They usually hide it somewhere in the “Fair Usage Policy”.
Anything below 50 is trash, 50-80 is acceptable but needs improvement, and 90-100 is excellent.
Unfortunately, 80% of websites don’t even pass web vital scores. (That’s a stat).
@Author
So I should aim for Green? 🟢
@Reader
You should ideally aim for a 100!
@Reader
That’s because your score could fluctuate due to external factors. (Not inherently because of Lighthouse).
Aiming for a specific score isn’t reliable. Focus on optimizing your site as much as possible to achieve the highest score you can.
@Author
What are those external factors you mentioned?
@Reader
External Factors Affecting Website Speed
Here are some things you may not be able to control:
Dynamic Pages. Sometimes your pages can change based on different conditions you’ve set. For example, based on location, logged-in/out users, user-generated content, and so on …
Bad Network. Your cheap wifi or data network can be unstable or just outright suck.
Distance. Requests between distant locations (e.g., US to France) can cause minor delays. Throttling helps mask these delays.
Web Server. Are you on a shared hosting plan? Then you are likely more susceptible to this.
Your Hardware. Yeah! Like your actual CPU … Running Lighthouse multiple times at once can also cause issues.
Browser Issues. This is unavoidable! Maybe test using different browsers to see any changes.
When you measure your website speed in PSI, underneath your score, you will see a list of potential sources of delay, or culprits.
This is found under the “DIAGNOSTICS” tab.
Google says that only METRICS directly affects your Lighthouse Performance score.
But these suggestions directly affect the METRICS, themselves.
@Author
What are METRICS? 🤔
@Reader
There are currently five: FCP, SI, LCP, TBT, and CLS.
Although now, the Chrome team and W3C have come up with a new standard: The Lighthouse Performance Score is a weighted average of these core web vitals standards.
@Author
Weighted average?
@Reader
A weighted average is like a regular average but gives more importance to some numbers than others.
Say you have three numbers: 2, 4, and 6.
If you just average them, you add them up (2 + 4 + 6 = 12) and divide by 3, which gives you 4.
But if each number has different importance (weight), you multiply each number by its weight before averaging. For example:
2 – is worth 20% (0.2)
4 – is worth 30% (0.3)
6 – is worth 50% (0.5)
You calculate it like this:
( 2 \times 0.2 = 0.4 )
( 4 \times 0.3 = 1.2 )
( 6 \times 0.5 = 3 )
Then you add these up (0.4 + 1.2 + 3 = 4.6). So, the weighted average is 4.6, which takes into account the different importance of each number.
PSI reports metrics over a 28-day period based on CrUX data.
@Author
Okay but how do the weights …
become a score out of 100?
@Reader
Using a scoring curve that reflects real-world website performance data. (HTTPArchive data).
Two important points on this curve are:
25th Percentile. This represents average performance across websites. A metric value at this level translates to a score of 50.
8th Percentile. This represents good or better-than-average performance. A metric value at this level translates to a score of 90.
@Author
Why should I bother about all this?
@Reader
Why Are Lighthouse Scores Important?
Website UX
Higher Lighthouse scores typically correlate with faster-loading websites and smoother interactions. This directly enhances user experience by reducing waiting times and improving usability.
SEO Impact
Search engines like Google consider website speed and performance as ranking factors. Websites with higher Lighthouse scores often rank better in search results, leading to increased visibility and organic traffic.
Conversion Rates
Faster websites tend to have higher conversion rates. Improved performance means visitors are more likely to stay engaged, complete transactions, or interact positively with content.
FAQs
•••
Does Lighthouse consider server response times in its performance scoring?
Yes, Lighthouse measures metrics like Time to First Byte (TTFB), which reflects server response speed. Optimizing server response times can improve Lighthouse scores and overall website performance.
How does Lighthouse handle websites with dynamic content or single-page applications (SPAs)?
Lighthouse can evaluate performance for SPAs by simulating user interactions and measuring metrics like First Contentful Paint (FCP) and Time to Interactive (TTI) after initial load. Optimizing code and resource delivery for SPAs can enhance these metrics.
What impact does third-party content (e.g., ads, social widgets) have on Lighthouse scores?
Third-party content can significantly affect performance metrics like Cumulative Layout Shift (CLS) and Total Blocking Time (TBT). Implementing lazy loading and asynchronous loading techniques can mitigate these impacts and improve scores.
How does Lighthouse evaluate the impact of JavaScript frameworks (e.g., React, Vue.js) on performance?
Lighthouse measures metrics like Time to Interactive (TTI) to assess how quickly JavaScript frameworks render and make a page usable. Techniques like code splitting and lazy loading can optimize framework usage and improve scores.
Summary
We saw that Lighthouse measures and converts each raw metric value into a metric score from 0 to 100 based on where it falls on a log-normal scoring distribution derived from real website performance data.
To boost your performance score, use the Lighthouse scoring calculator to understand your target thresholds.
