Improving core web vitals with Drupal: A step by step approach
Time: Thursday 20th October 13:20-13:55
Room: Elevate
Track: Web Tools & Technologies
Core Web Vitals (CWV) is not just another three letter ancronym (TLA) you need to have an understanding of if you work in the web space. It's actually a series of TLAs you need to be familiar with 😜
Comprising Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) you'd be forgiven for feeling Overwhelming Acronym Overload (OAO).
Getting the best score you can for Core Web Vitals (CWV) is a vital element of making sure your site is performing at its best and giving your users the best experience. Numerous studies have shown that improving your CWV leads to improved business outcomes.
In addition, Google now use these scores to influence search result ranking on mobile devices, penalizing sites that don't offer a good experience.
But improving your scores can be a difficult process, particularly with Drupal's out of the box setup.
In this session we'll look at:
* A brief introduction to Core Web Vitals and what each of the acronyms is for.
* How to digest the output from Lighthouse
* Low hanging fruit for easy wins with Drupal
* Diving deep and swapping out Drupal CSS renderer for further gains
* Diving deeper still and generating critical CSS to render inline for even more gains
* Adding monitoring to your build process to ensure you catch and regressions before they happen
Comprising Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) you'd be forgiven for feeling Overwhelming Acronym Overload (OAO).
Getting the best score you can for Core Web Vitals (CWV) is a vital element of making sure your site is performing at its best and giving your users the best experience. Numerous studies have shown that improving your CWV leads to improved business outcomes.
In addition, Google now use these scores to influence search result ranking on mobile devices, penalizing sites that don't offer a good experience.
But improving your scores can be a difficult process, particularly with Drupal's out of the box setup.
In this session we'll look at:
* A brief introduction to Core Web Vitals and what each of the acronyms is for.
* How to digest the output from Lighthouse
* Low hanging fruit for easy wins with Drupal
* Diving deep and swapping out Drupal CSS renderer for further gains
* Diving deeper still and generating critical CSS to render inline for even more gains
* Adding monitoring to your build process to ensure you catch and regressions before they happen
Lee Rowlands
Lee (larowlan) has been contributing to Drupal for over 13 years (http://drupal.org/u/larowlan). Lee is a major Drupal 8/9 contributor, starting the #PatchADay campaign which saw him contribute one patch a day for almost two years. Lee is been part of the Drupal core committer team in the role of Framework Manager, a member of the Drupal security team and passionate about code quality. Lee has worked on several of Australia's largest Drupal sites during his 10 years as a Senior Developer with one of Australia's oldest Drupal agencies: PreviousNext.
Speaker history:
React Summit 2022 - Recording still behind git nation paywall
Drupal South Shorts 2021 - https://www.youtube.com/watch?v=Q8-I-fhVTUg (Keynote)
React Advanced London 2021 - https://www.youtube.com/watch?v=1gxsKxoIkQs
Decoupled Days 2021 - No recording
React Summit 2021 - https://www.youtube.com/watch?v=MyiBAziEWUA
DrupalCon North America 2021 -https://www.youtube.com/watch?v=eRbujK3paSk
DrupalSouth Auckland 2017 - https://www.youtube.com/watch?v=jCN0Hr-XswU
Drupal South Gold Coast 2016 - https://www.youtube.com/watch?v=xNzF2QXlY3o
Drupal South Melbourne 2015 - https://www.youtube.com/watch?v=leE5tH1wCQg
Drupalcon Amsterdam 2014 (remote co-presenter) - https://www.youtube.com/watch?v=ZaBvq8YlLm0
Drupal South Wellington 2014 - (not recorded but represented via Jam's virtual Drupalcamp - https://www.youtube.com/watch?v=3E0eOqPM1kA)
Drupalcon Sydney 2013 - https://www.youtube.com/watch?v=fk17s1V6ofw
Drupal Downunder Melbourne 2012 - https://www.youtube.com/watch?v=MPUmsuXww94
Speaker history:
React Summit 2022 - Recording still behind git nation paywall
Drupal South Shorts 2021 - https://www.youtube.com/watch?v=Q8-I-fhVTUg (Keynote)
React Advanced London 2021 - https://www.youtube.com/watch?v=1gxsKxoIkQs
Decoupled Days 2021 - No recording
React Summit 2021 - https://www.youtube.com/watch?v=MyiBAziEWUA
DrupalCon North America 2021 -https://www.youtube.com/watch?v=eRbujK3paSk
DrupalSouth Auckland 2017 - https://www.youtube.com/watch?v=jCN0Hr-XswU
Drupal South Gold Coast 2016 - https://www.youtube.com/watch?v=xNzF2QXlY3o
Drupal South Melbourne 2015 - https://www.youtube.com/watch?v=leE5tH1wCQg
Drupalcon Amsterdam 2014 (remote co-presenter) - https://www.youtube.com/watch?v=ZaBvq8YlLm0
Drupal South Wellington 2014 - (not recorded but represented via Jam's virtual Drupalcamp - https://www.youtube.com/watch?v=3E0eOqPM1kA)
Drupalcon Sydney 2013 - https://www.youtube.com/watch?v=fk17s1V6ofw
Drupal Downunder Melbourne 2012 - https://www.youtube.com/watch?v=MPUmsuXww94