Day 1 of #30DaysOfWebPerf - Dealing with images on the #web @Akamai claims that Images form about 63% of the total web pages weight. #HTTPArchive claims that in the last year alone, the number of images served have doubled - httparchive.org/reports/state-… What this tells us...05:34 AM - 22 Nov 2019
0
0
When working on #webperf always remember that "Less is Better". So start thinking🤔how you can serve the images that are most critical to the user (most likely within the first fold) & then delay the loading of those images that the user is not going to interact with right away.05:34 AM - 22 Nov 2019
This illustration will help explain what "Above the fold" means. Image source - miro.medium.com/max/2596/1*DoJ…05:34 AM - 22 Nov 2019
The strategy to request images on demand is commonly referred to as "image lazy loading". What this essentially does is requests for only those images that are within the visible fold and loads the remaining images only when the user scrolls to those images. #lazyloading #images05:35 AM - 22 Nov 2019
This article provides details on implementation and also examples - developers.google.com/web/fundamenta… This is a great resource for implementing image lazy loading. #Optimization #images #lazyloading #webdevelopment #webdev05:35 AM - 22 Nov 2019
We spoke about how to deliver fewer images. This leaves us with 2 important questions.
1. How much performance🧪improvements can we expect?
2. How do we measure the improvements?👩🔬
Image #lazylaoding can yield you ~ 40-45% improvement in your site's #frontend #loadtime 👀 ⬇️⬇️05:35 AM - 22 Nov 2019
The report above shows some real-time results of image lazy loading. Let the results seep in a bit. Think how much more impactful this would be on low performance mobile devices compared to your standard desktop. #webdevelopment #UserExperience05:35 AM - 22 Nov 2019
In countries where users have to pay💰for mobile data by usage or even otherwise, by shipping less bytes (less images) over the wire, you are allowing the user to stay on your site longer, browse longer & then possibly convert the visit into a sale. #UserExperience #users05:36 AM - 22 Nov 2019
Performance is about retaining your users. We want users to interact meaningfully with what we build. If it's a blog, we want people to read posts. If it's an online store, we want them to buy stuff. #UserExperience #uxtalk05:36 AM - 22 Nov 2019
Now that we have seen how impactful image lazy loading proves to be be, let's discuss our performance measurement strategy. If you a large enterprise using a CDN provider like @Akamai, @Optimizely or @Cloudflare you can set up a custom dashboard to monitor the #frontend load time05:36 AM - 22 Nov 2019
If you are not using a large CDN provider or just have no access to their dashboards, you can always write a #Puppeteer script to measure your performance metrics. pptr.dev talks more about #Puppeteer. You can try it out at try-puppeteer.appspot.com05:36 AM - 22 Nov 2019
Some important metrics that you can measure here are First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to Interactive (TTI) and the pageLoad. More about these metrics is detailed in this awesome #WebDev article - web.dev/metrics/05:36 AM - 22 Nov 2019
Final piece of this #webperf enhancement is to actually measure how much revenue impact does this cause to your site. If you have some kind of #analytics set up on your site like a @Adobe Analytics or @googleanalytics you can very easily measure this. #GoogleAnalytics05:36 AM - 22 Nov 2019
There might be other KPIs like the #BounceRate, #ExitRate and Click to Product, Click to article rate (#ClickRate) that you might be interested in. With image lazy loading your sites #bouncerate and #exitrate should go down ⬇️⬇️⬇️05:36 AM - 22 Nov 2019
For those obsessed with improving their sites @Google #Lighthouse score, with image lazy loading you will notice that the "Defer Offscreen Images" error/warning⚠️ will disappear and the #GoogleLighthouse score will improve.05:36 AM - 22 Nov 2019
That's it for Day #1 of #30DaysOfWebPerf. Continue to follow me for more insights into improving #web #performance Please share your thoughts and experiences with image lazy loading. Also comments and feedback are highly appreciated. #perfmatters #UserExperience #ux #users05:36 AM - 22 Nov 2019
Top comments (0)