{"id":69,"date":"2023-10-09T22:57:37","date_gmt":"2023-10-10T03:57:37","guid":{"rendered":"https:\/\/alexgurkin.com\/blog\/core-web-vitals-in-my-web-development-experience\/"},"modified":"2023-10-13T21:03:49","modified_gmt":"2023-10-14T02:03:49","slug":"core-web-vitals-in-my-web-development-experience","status":"publish","type":"post","link":"https:\/\/alexgurkin.com\/blog\/core-web-vitals-in-my-web-development-experience\/","title":{"rendered":"Core Web Vitals in my web development experience"},"content":{"rendered":"\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#Core_Web_Vitals_in_my_Web_Development_Experience\"><span class=\"toc_number toc_depth_1\">1<\/span> Core Web Vitals in my Web Development Experience<\/a><ul><li><a href=\"#1_Largest_Contentful_Paint_LCP\"><span class=\"toc_number toc_depth_2\">1.1<\/span> 1. Largest Contentful Paint (LCP)<\/a><\/li><li><a href=\"#2_First_Input_Delay_FID\"><span class=\"toc_number toc_depth_2\">1.2<\/span> 2. First Input Delay (FID)<\/a><\/li><li><a href=\"#3_Cumulative_Layout_Shift_CLS\"><span class=\"toc_number toc_depth_2\">1.3<\/span> 3. Cumulative Layout Shift (CLS)<\/a><\/li><\/ul><\/li><\/ul><\/div>\n<h1 class=\"wp-block-heading\"><span id=\"Core_Web_Vitals_in_my_Web_Development_Experience\">Core Web Vitals in my Web Development Experience<\/span><\/h1>\n\n\n\n<p>As a web developer, ensuring optimal user experience is crucial. One of the key aspects that I have come across in my web development experience is the concept of Core Web Vitals. Core Web Vitals are a set of specific metrics that Google uses to measure and evaluate user experience on websites. These metrics focus on three main areas: loading, interactivity, and visual stability. In this article, I will discuss these metrics and share my experiences in optimizing them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"1_Largest_Contentful_Paint_LCP\">1. Largest Contentful Paint (LCP)<\/span><\/h2>\n\n\n\n<p>Largest Contentful Paint measures the time it takes for the largest element in the viewport to fully render. To optimize LCP, I ensure that the main content of my webpages loads quickly. This can be achieved by optimizing images and prioritizing the loading of critical resources. Lazy loading is another technique that I employ to defer the loading of non-critical elements, thereby improving the overall LCP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"2_First_Input_Delay_FID\">2. First Input Delay (FID)<\/span><\/h2>\n\n\n\n<p>First Input Delay measures the time it takes for the webpage to respond to a user&#8217;s first interaction, such as clicking a button or tapping a link. To improve FID, I focus on minimizing JavaScript execution time by eliminating any unnecessary blocking scripts. By optimizing and deferring JavaScript, I ensure that the webpage remains responsive and interactive.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"3_Cumulative_Layout_Shift_CLS\">3. Cumulative Layout Shift (CLS)<\/span><\/h2>\n\n\n\n<p>Cumulative Layout Shift measures the visual stability of a webpage by quantifying unexpected layout shifts that occur during the page loading process. To minimize CLS, I make sure to specify width and height dimensions for images and videos. This prevents content from shifting as resources load. Additionally, I avoid using dynamically injected content that can cause layout shifts.<\/p>\n\n\n\n<p>Optimizing Core Web Vitals is not only important for providing a better user experience but also for improving search engine rankings. By focusing on metrics like Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift, I have been able to enhance the performance and usability of the websites I develop. In an increasingly competitive online landscape, paying attention to Core Web Vitals is essential for staying ahead and delivering websites that users love to visit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents1 Core Web Vitals in my Web Development Experience1.1 1. Largest Contentful Paint (LCP)1.2 2. First Input Delay (FID)1.3 3. Cumulative Layout Shift (CLS) Core<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"yst_prominent_words":[],"class_list":["post-69","post","type-post","status-publish","format-standard","hentry","category-experience"],"_links":{"self":[{"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/posts\/69"}],"collection":[{"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":2,"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/posts\/69\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/tags?post=69"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/alexgurkin.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}