Web Development
Guidelines
Core Web Vitals

Core Web Vitals Tips

Tips & tricks to minimize site speed & cwv issues

How To Test

https://pagespeed.web.dev/ (opens in a new tab)

Critical CSS

https://criticalcss.com/ (opens in a new tab) - John has un/pw

General images

  • Always set width and height attributes on all img tags, including svgs
  • Inline lcp image for best result. If not, add a preload link for lcp image
  • Avoid png format for bitmap photos
  • Avoid using css classes to hide images/videos on mobile
  • Example:
<!-- Very bad -->
<img src="/huuuuge-desktop-image.jpeg"
    width="1920" height="700"
    decoding="async" alt="alt text"
    class="hide-for-small"
/>
 
<!-- Sort of good, using data svg to avoid larger image load on mobile -->
[Reference](https://swimburger.net/blog/web/web-performance-prevent-wasteful-hidden-image-requests#solution-code)
<picture>
    <source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 640px)">
    <img src="/huuuuge-desktop-image.jpeg"
        width="1920" height="700"
        decoding="async" loading="lazy"
        alt="alt text"
        class=""
    />
</picture>
  • For responsive background images, wrap default size in @media to avoid downloading multiple images
  • Example:
<!-- this will still download the default image as well as the media queried image -->
.main-slide.slide1 { background:url('/slide-1.jpg'); }
@media screen (min-width:641px) and (max-width:1024px) {
    .main-slide.slide1 {background:url('/slide-1-md.jpg');}
}
@media screen and (max-width:640px) {
    .main-slide.slide1 { background:url('/slide-1-sm.jpg'); }
}
 
<!-- avoid by wrapping default image in it's own media query -->
@media screen (min-width:1025px) {
    .main-slide.slide1 { background:url('/slide-1.jpg'); }
}
@media screen (min-width:641px) and (max-width:1024px) {
    .main-slide.slide1 {background:url('/slide-1-md.jpg');}
}
@media screen and (max-width:640px) {
    .main-slide.slide1 { background:url('/slide-1-sm.jpg'); }
}

Main message images

  • Inline for main message instead of using background images when possible

Preload LCP

  • Set up preload for your LCP and always check if an existing one needs to be updated when main message changes
  • Example:
<!-- preloads for main message image -->
<?php if ($thePage == "index") { ?>
<link rel="preload" fetchpriority="high" href="https://cdn.treehouseinternetgroup.com/cdn-cgi/image/format=auto,quality=70/cms_images/606/mm-500.jpeg" as="image" media="(max-width: 499px)">
<link rel="preload" fetchpriority="high" href="https://cdn.treehouseinternetgroup.com/cdn-cgi/image/format=auto,quality=70/cms_images/606/mm-800.jpeg" as="image" media="(min-width: 500px) and (max-width: 799px)">
<link rel="preload" fetchpriority="high" href="https://cdn.treehouseinternetgroup.com/cdn-cgi/image/format=auto,quality=70/cms_images/606/mm-1600.jpeg" as="image" media="(min-width: 800px)">
<?php } ?>

Lazyloading

  • Don't lazy load above the fold images
  • To lazyload for mobile only, you can use the following php snippet
<img src="/big-desktop-image.jpeg"
    width="300"
    height="200"
    decoding="async"
    alt="alt text"
    class=""
    <?php if($isMobile) echo 'loading="lazy"' ?>
/>

Youtube Videos

<iframe width="600"height="373"src="https://www.youtube.com/embed/t-2x2bEVQW0"srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/t-2x2bEVQW0?autoplay=1><img src=https://img.youtube.com/vi/t-2x2bEVQW0/hqdefault.jpg alt='[company] - How It Works'><span>▶</span></a>"frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"allowfullscreenloading="lazy"title="[company] - How It Works"> </iframe>

Lazy Load CSS

The below snippet will load almost last.

<link rel="stylesheet" href="https://use.typekit.net/uhd6ouc.css" media="print" onload="this.media='all'">

Preload Fonts

<link rel="preload" href="/core/v2/fonts/texgyreadventor-regular-webfont.woff" as="font" type="font/woff" crossorigin><link rel="preload" href="/core/v2/fonts/texgyreadventor-bold-webfont.woff" as="font" type="font/woff" crossorigin>

DOM Size

https://web.dev/dom-size (opens in a new tab)

Preload Hero Images

https://addyosmani.com/blog/preload-hero-images (opens in a new tab)

Total Blocking Time

https://www.holisticseo.digital/pagespeed/tbt (opens in a new tab)

Bbb BadgeGoogle Analytics