Search for a command to run...
Summary of a case study
I am a Journalist-turned-Software Engineer. I love coding and the associated grind of learning every day. A firm believer in social learning, I owe my dev career to all the tech content creators I have learned from. This is my contribution back to the community.
No comments yet. Be the first to comment.
📖 Introduction In modern AI applications, communication between clients and tools isn’t always as simple as calling an API. The Model Context Protocol (MCP) provides a standardized way for clients to exchange information, invoke tools, and maintain ...
If you’re curious about how to build an intelligent agent using Model Context Protocol (MCP), you’re in the right place. In this post, I’ll walk you through how to: Create an MCP Server using FastMCP Expose a tool that calculates BMI Build a Clien...
In our previous tutorial, we built a restaurant customer support chatbot using OpenAI's Agents SDK. In this follow-up, we’ll explore guardrails—a critical feature that enhances AI chatbot safety and reliability. What Are Guardrails in AI Agents? Guar...
Video https://www.youtube.com/watch?v=UPBMkFSJdBI The Problem at Hand Uber's data platform processes approximately 1.2 million interactive queries monthly, with 36% of these coming from the operations organization. This group—comprising engineers...
Video https://www.youtube.com/watch?v=FgRGwnpd2HY Google's recent white paper on "Agents" has created quite a buzz. The paper explores the concept of AI agents and delves into their architecture and potential. Let's break down what this white paper...
I am Zahiruddin Tavargere (Zahere). A social-learner, here to learn, share and grow with the tech community.
74 posts
I am Zahiruddin Tavargere (Zahere). A firm believer in social learning, I owe my dev career to all the tech content creators I have learned from - this is my contribution back to the community.
YouTube aimed to improve its website's performance and user experience, particularly for users in developing markets like Brazil, India, and Indonesia who may have slower devices and limited network bandwidth.
To do this, YouTube focused on optimizing performance metrics such as Core Web Vitals through techniques like lazy-loading and modernizing its code.
YouTube checked how fast videos and other content were loading on mobile devices in different parts of the world using Chrome User Experience Repor(CrUX)
They found Largest Contentful Paint (LCP) was taking as long as 4-6 seconds to load. The optimal time is less than 2.5 seconds.
They used Lighthouse to audit their watch pages and found their First Contentful Paint (FCP) was 3.5 seconds and their LCP was 8.5 seconds
The team found that they could make the webpage load faster by changing the order of some of the code. They moved the HTML code for the video player to the top of the webpage, above the script that makes the video player interactive.
YouTube tested this change using a tool called Lighthouse and saw that it improved the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) from 4.4 seconds down to 1.1 seconds.
Image credit: web.dev
The YouTube team made another important discovery while they were working on improving the Largest Contentful Paint (LCP) of their webpage.
They found that LCP only measures how long it takes for the poster image of a video to load, not the actual frames of the video.
This was surprising because YouTube had always focused on making the video start playing as quickly as possible.
To improve LCP, the team started working on how fast they could deliver the poster image for their videos.
They tested different versions of the poster image and chose the one that was the best in user testing. As a result of this work, both the First Contentful Paint (FCP) and LCP improved a lot.
The LCP in the field (i.e., for real users) went from 4.6 seconds down to 2.0 seconds. This was a big improvement and would make a huge difference in the user experience.
YouTube also used an attribute called "fetchpriority" with the "link rel=preload" element. This helped them prioritize the loading of the poster image so that it would be discovered and loaded quickly. They used these optimizations on all platforms to improve the user experience.
<link as="image" rel="preload" href="poster.jpg" fetchpriority="high">
“76% of YouTube's mobile web URLs now pass the Core Web Vitals metrics, with improvements to business metrics like watch time as a result.”
If you liked what you read, please subscribe for interesting articles on System Design, UI/UX, and engineering careers.