Logo

dev-resources.site

for different kinds of informations.

Why should you care about website performance?

Published at
11/21/2024
Categories
frontend
webperf
webdev
Author
dfirestone
Categories
3 categories in total
frontend
open
webperf
open
webdev
open
Author
10 person written this
dfirestone
open
Why should you care about website performance?

Picture this: You're on your phone, waiting with bated breath for midnight, when the latest greatest game console finally gets released. You Google the console to track down where to order it - the site is a few results down on the page, but you find it eventually. You click the link. The loading bar creeps tantalizingly across the screen...and then grinds to a halt! Not to be deterred, you toss your phone aside, open your laptop, and try the ordering site again. It takes a minute, but eventually loads. Huzzah! You hit the button to add the console to your cart...but your browser freezes! By the time you restart it and try the site again, the console is SOLD OUT. Furious, you vow then and there never to buy that brand of console again.

Ok, so perhaps it's a bit dramatic and contrived, but the purpose of this story is to illustrate the perils of poor site performance. Delayed page loads, slow interactions, and many other performance problems can lead to a frustrating user experience, and make it more likely that potential customers will bounce from your site.

Performance issues can be even more pronounced on mobile devices due to less processing power and slower network connections. This is especially significant considering that, in 2023, people used their mobile devices for browsing over 3 times more than desktop. Let that sink in. 75% of the time, your users will be using mobile devices that, by their very nature, increase the likelihood of encountering performance problems if you haven't put in the work to optimize. 75% of the time, there is an increased chance of a potential customer giving up on your site.

Google also factors your pages' performance into their search results ranking algorithm. That means it's theoretically possible that your page could get bumped down below a similarly relevant page if it doesn't perform as well, all other factors being equal. The farther your site is from the top of the search results, the less likely it is to be clicked on. The following chart illustrates the exponential drop-off in click-through rates as you go farther down the list of search results:

A horizontal bar graph showing click-through rates for positions 1 through 10 of the first page of Google search results. Click-through rates start off at 28.5% at position 1, then drop off exponentially until they reach 2.5% at position 10.
Source: https://www.searchenginejournal.com/google-first-page-clicks/374516/

Note how the click-through rate at position 2 in the list is almost HALF that of the top position. And if your site gets bumped to the dreaded second page of results? Well, less than 0.5% of users will even bother to look.

Going back to our would-be gamer at the start of this post, let's step through the story again with a newfound understanding of what happened. Our gamer started out using a mobile device, which automatically made everything run slower (certainly not the user's fault, but a factor nonetheless). When they Googled the console site, it took a tad longer to find since it showed up farther down the page than expected. This lower Google ranking likely resulted from the site itself having performance issues - as our gamer soon discovered for themself, first on their phone, then on their laptop. In the precious minutes they wasted in trying to find and load the website, the product they were seeking was sold out, and the console company lost a loyal customer.

Let this be a lesson: when setting up your website, you might be immediately concerned with making sure the core functionality works properly, the interface flows well, and the homepage design looks awesome - all important considerations, to be sure. But you should also be factoring site performance into every stage of your site's development, ESPECIALLY when thinking about the mobile user's experience. I'll show you how in future posts!

webperf Article's
30 articles in total
Favicon
Redefining Web Performance Standards with INP
Favicon
How to avoid frontend tech making us resentful
Favicon
Understanding PHP-FPM: Key Differences from Traditional PHP Processes and Benefits
Favicon
How Mentimeter deliver reliable live experiences at scale
Favicon
The ArtΒ of Prefetching and Preloading: Enhancing Web Performance
Favicon
The curious case of the paragraph with the bad CLS
Favicon
JavaScript Frameworks - Heading into 2025
Favicon
Technical SEO for Developers: Mastering Site Structure and Performance
Favicon
Extending Lighthouse for custom image and video optimization analysis
Favicon
Assassin ⚑️ - An open source, free database for killing slow webpages
Favicon
A Comprehensive Guide to Web Vitals: Metrics That Matter for Performance
Favicon
Why should you care about website performance?
Favicon
Screener.in Search API: A Performance Checkup! πŸ”Ž
Favicon
How Sportsbet handles 4.5M daily chat messages on its 'Bet With Mates' platform
Favicon
Enhancing React Performance with Concurrent Rendering
Favicon
Optimizing React Performance: Avoiding Unnecessary Re-renders
Favicon
Master React Profiler: Optimize Your App's Performance
Favicon
Lightweight, Transparent, Animated: Get All of Them by WebP Format
Favicon
Prerender Pages in Browser For Faster Page Load
Favicon
How we optimized perceived performance to improve our KPIs: a Hotjar case study
Favicon
Sites speed optimisation is a destination, not a journey
Favicon
How to Build a High-Performance WordPress Website: A Developer’s Guide
Favicon
Performance Optimization in React
Favicon
Subsequent Page Load Optimization πŸš€
Favicon
How to Build Blazing Fast Websites with Any Framework
Favicon
Everything to know about Mobile App Performance Test Tools, Metrics, & Techniques
Favicon
Efficient State Management in Next.js: Best Practices for Scalable Applications
Favicon
Top 5 Tips to Supercharge Your Express.js App for Lightning-Fast Performance
Favicon
A useState performance tip you may not have known
Favicon
πŸš€ V8 Engine Secrets How We Slashed Memory Usage by 66% with TypedArrays

Featured ones: