- Web performance is a term describing how fast
a website or web application is perceived to be.
Good web performance means the site loads quickly
and the user can interact with the components quickly.
This is measured with metrics like first contentful paint,
first meaningful paint, time to interactive,
max potential first input delay and so on.
Web performance has become a central focus
for web developers and web services for several reasons.
Web applications are becoming more and more complex.
With that complexity comes increased file sizes,
users of the web expect things to work faster
and more effectively.
There is extreme disparity in web services, both nationally
and internationally with some people having blazing fast
unlimited broadband internet providers
through fiber optic cables
while others access the same internet through
spotty 2G networks would severe bandwidth restrictions.
And finally, there's a large variance in devices
and software used to access the web.
From top of the line ultra high resolution computers
to old low power feature phones
and nonstandard devices like smart TVs
and handheld gaming platforms.
To be successful, websites and applications need to be fast
and efficient for all users
no matter what combination of these conditions
they're working under.
To make that happen we use performance optimizations
to make our services as fast as possible
to get the most important pieces of the services
to the user as fast as possible.
The MDN web docs breaks down by performance optimization
into four major areas.
Number one, reducing overall load time.
This is done by compressing and minifying all files,
reducing the number of file and other HTTP requests
sent back and forth between the server and the user agent,
employing advanced loading and caching techniques
and conditionally serving the user with only what they need
when they actually need it.
Number two, making the site usable as soon as possible.
This is done by loading critical components first
to give the user initial content and functionality
and then deferring less important features for later
using lazy loading to request and display content
only when the user gets to or interacts with it.
And by pre-loading features,
the user is likely to interact with next.
Number three, smoothness and interactivity.
This is about improving the perceived performance
of a site through skeleton interfaces, visual loaders
and clear indication that something is happening
and things are going to work soon.
And finally, number four, performance measurements.
We use tools and metrics to monitor performance
and validate up my station efforts.
The best method for improving and optimizing the performance
of a website or app depends on a wide variety of factors.
So the best approach for this task
is to do as much as possible within reasonable limits.
In other words, this is not a do everything
otherwise you're doing something wrong type scenario.
It's rather a do what you can
and not everything will fit your needs type scenario.
Keep that in mind as we move through the course.