{"id":29970,"date":"2023-04-22T03:06:09","date_gmt":"2023-04-22T03:06:09","guid":{"rendered":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/"},"modified":"2024-07-03T05:19:49","modified_gmt":"2024-07-03T05:19:49","slug":"enhancing-core-web-vitals-what-web-development-processes-to-change","status":"publish","type":"knowledgebase","link":"https:\/\/www.wpstaq.com\/nz\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/","title":{"rendered":"Enhancing Core Web Vitals: What web development processes to change"},"content":{"rendered":"<p>To achieve top scores in PageSpeed Insights and GTMetrix, focusing on Core Web Vitals optimization is crucial. Here are some lesser-known techniques for web designers and developers to consider when building a WordPress website with high PageSpeed Insights scores in mind, as part of Google&#8217;s Core Web Vital signals:<\/p>\n<h2>Eliminate Above-the-Fold Element Animations<\/h2>\n<p>Disable animations for all elements appearing above the fold. Total Blocking Time (TBT) greatly influences Core Web Vital metrics, and reducing TBT can be achieved by using JavaScript delaying techniques. As a result, you&#8217;ll need to avoid animations above the fold. From a user&#8217;s perspective, this is how a visitor experiences the website when JavaScript is delayed:<\/p>\n<div style=\"width: 1616px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-29970-1\" width=\"1616\" height=\"806\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/04\/delay-js.mp4?_=1\" \/><a href=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/04\/delay-js.mp4\">https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/04\/delay-js.mp4<\/a><\/video><\/div>\n<h2>Optimize Video\/Image Placement<\/h2>\n<p>This tip is particularly relevant to mobile scores, but it&#8217;s recommended to position videos and images below the fold. Doing so allows lazy loading to work effectively, preventing Cumulative Layout Shift (CLS) and First Contentful Paint (FCP) issues.<\/p>\n<h2>Exclude Above-the-Fold Images from Lazy Loading<\/h2>\n<p>Beginner optimizers may overlook images on both mobile and desktop that appear within the fold. To prevent CLS problems, exclude all above-the-fold images from lazy loading.<\/p>\n<h2>Reassess SVG Images<\/h2>\n<p>For extra optimization points, if your logo or an image within the fold is an SVG, try using a PNG or JPG version instead and test the results. You may be surprised to find that using an image format can increase your PageSpeed Insights score upon testing.<\/p>\n","protected":false},"featured_media":29693,"parent":0,"template":"","class_list":["post-29970","knowledgebase","type-knowledgebase","status-publish","has-post-thumbnail","hentry","categories-optimize-scale"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Enhancing Core Web Vitals: What web development processes to change - Managed Hosting Platform for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enhancing Core Web Vitals: What web development processes to change - Managed Hosting Platform for WordPress\" \/>\n<meta property=\"og:description\" content=\"To achieve top scores in PageSpeed Insights and GTMetrix, focusing on Core Web Vitals optimization is crucial. Here are some lesser-known techniques for web designers and developers to consider when building a WordPress website with high PageSpeed Insights scores in mind, as part of Google&#8217;s Core Web Vital signals: Eliminate Above-the-Fold Element Animations Disable animations&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/\" \/>\n<meta property=\"og:site_name\" content=\"Managed Hosting Platform for WordPress\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/staqhosting\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-03T05:19:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/Page-Speed.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/\",\"name\":\"Enhancing Core Web Vitals: What web development processes to change - Managed Hosting Platform for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Page-Speed.png\",\"datePublished\":\"2023-04-22T03:06:09+00:00\",\"dateModified\":\"2024-07-03T05:19:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/#breadcrumb\"},\"inLanguage\":\"en-nz\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Page-Speed.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Page-Speed.png\",\"width\":1000,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/knowledgebase\\\/enhancing-core-web-vitals-what-web-development-processes-to-change\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.wpstaq.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enhancing Core Web Vitals: What web development processes to change\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#website\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"name\":\"Managed Hosting Platform for WordPress\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wpstaq.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-nz\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#organization\",\"name\":\"Staq\",\"alternateName\":\"WPStaq\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-nz\",\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"contentUrl\":\"https:\\\/\\\/www.wpstaq.com\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/cropped-LogoNoText.png\",\"width\":512,\"height\":512,\"caption\":\"Staq\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wpstaq.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/staqhosting\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wpstaq\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Enhancing Core Web Vitals: What web development processes to change - Managed Hosting Platform for WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/","og_locale":"en_US","og_type":"article","og_title":"Enhancing Core Web Vitals: What web development processes to change - Managed Hosting Platform for WordPress","og_description":"To achieve top scores in PageSpeed Insights and GTMetrix, focusing on Core Web Vitals optimization is crucial. Here are some lesser-known techniques for web designers and developers to consider when building a WordPress website with high PageSpeed Insights scores in mind, as part of Google&#8217;s Core Web Vital signals: Eliminate Above-the-Fold Element Animations Disable animations&hellip;","og_url":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/","og_site_name":"Managed Hosting Platform for WordPress","article_publisher":"https:\/\/www.facebook.com\/staqhosting\/","article_modified_time":"2024-07-03T05:19:49+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/Page-Speed.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/","url":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/","name":"Enhancing Core Web Vitals: What web development processes to change - Managed Hosting Platform for WordPress","isPartOf":{"@id":"https:\/\/www.wpstaq.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/#primaryimage"},"image":{"@id":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/Page-Speed.png","datePublished":"2023-04-22T03:06:09+00:00","dateModified":"2024-07-03T05:19:49+00:00","breadcrumb":{"@id":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/#breadcrumb"},"inLanguage":"en-nz","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/"]}]},{"@type":"ImageObject","inLanguage":"en-nz","@id":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/#primaryimage","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/Page-Speed.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/Page-Speed.png","width":1000,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/www.wpstaq.com\/knowledgebase\/enhancing-core-web-vitals-what-web-development-processes-to-change\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.wpstaq.com\/"},{"@type":"ListItem","position":2,"name":"Enhancing Core Web Vitals: What web development processes to change"}]},{"@type":"WebSite","@id":"https:\/\/www.wpstaq.com\/#website","url":"https:\/\/www.wpstaq.com\/","name":"Managed Hosting Platform for WordPress","description":"","publisher":{"@id":"https:\/\/www.wpstaq.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wpstaq.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-nz"},{"@type":"Organization","@id":"https:\/\/www.wpstaq.com\/#organization","name":"Staq","alternateName":"WPStaq","url":"https:\/\/www.wpstaq.com\/","logo":{"@type":"ImageObject","inLanguage":"en-nz","@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","contentUrl":"https:\/\/www.wpstaq.com\/wp-content\/uploads\/2023\/05\/cropped-LogoNoText.png","width":512,"height":512,"caption":"Staq"},"image":{"@id":"https:\/\/www.wpstaq.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/staqhosting\/","https:\/\/www.linkedin.com\/company\/wpstaq"]}]}},"_links":{"self":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/knowledgebase\/29970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/types\/knowledgebase"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/media\/29693"}],"wp:attachment":[{"href":"https:\/\/www.wpstaq.com\/nz\/wp-json\/wp\/v2\/media?parent=29970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}