This content originally appeared on DEV Community and was authored by Ashutosh Sarangi
Web Vitals
- FCP (First Contentful Paint) (Response Quick)
- LCP (Largest Contentful Paint) (get to the point) Big Images/article
- CLS (Cumulative layout Shift) (Don't move Elements)
- First input Delay (Don't load Too Much Data) Brower in the background handling the Asyc works and because of that it puts delay
NOTE:-
Cumulative layout Shift
- The movement that impacts the page elements, in the entire lifetime of the document the user sees.
- also, this is costly as the layout will change, and then it it do the Layout, paint, and composite again. Also post that if there are any damaged pixels it will re-render again
Bench Marks
LCP:
good < 2.5 sec < Need Improvement < 4.0 sec < Poor
FID:
good < 100 M.sec < Need Improvement < 300 M.sec < Poor
CLS:-
good < 0.1 sec < Need Improvement < 0.25 sec < Poor
*tools:- *
field data (Actual user data) for Application performance monitoring
- Light House (Local Performance Monitoring is specific depending on your system preferences)
- https://developer.chrome.com/docs/crux/dashboard/
- https://www.lightest.app/ (Compare with similar applications)
- https://www.performancebudget.io/
Improving on FCP:
- If your users are far away from the server better to use CDNS.
- Its is the big impact (Can consider gzip as well)
Improving LCP
- Defer resources until later (defer/ async in the script)
<script src="/assets/js/abc.js" defer></script>
// For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element.
2. Optimize images (Very Important)
As I mentioned above along with this even we load bit latter but some images are 2Mb size and which is not needed
there are 2 approaches
a. use image compressor (tinyPng) (imagemin npm package)
b. use kind of srcset for various responsive designs,as mentioned below
<img
data-src="pic-1200.min.png"
src=""
data-srcset=""
data-srcset="pic-600.png 600w, pic-900.png 900w, pic-1200.png 1200w"
sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, 1200px"
/>
3. reduce request Overhead
preload and preconnect
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preload" href="/assets/css/index.css" />
Improving CLS
- Please don't move Elements , i.e thumb rule
- for Advertise we need to mention this is the max height with allocated div
- Let's say the cookie banner we can fix ed at the bottom. Then there would be a major boost compared to we show them on top and when the user clicks accept and disappear our layout structure will not impacted
- We can target for 0.01 (0.059) (CLS)(LightBox)
- for image tags we can specify the width and height attributes
Improving FID
a. Don't defere everything to the end, because let's say your LCP is done and the user trying to interact with the UI but as we did everything defer the Browser till loading those on background so not a good Idea to all to defer.
Only not required immediately js files we can defer.
Reference:-
https://frontendmasters.com/courses/web-perf
This content originally appeared on DEV Community and was authored by Ashutosh Sarangi
Ashutosh Sarangi | Sciencx (2024-08-24T18:26:10+00:00) Performance Improvement for Web Applications. Retrieved from https://www.scien.cx/2024/08/24/performance-improvement-for-web-applications/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.