Boosting Frontend Speed: Quick Wins for Backend Developers - Paul Conroy

Boost frontend speed with quick wins for backend developers, including lazy loading, WebP images, Intersection Observer, and more. Learn how to improve page speed and core web vitals with expert tips and tools.

Key takeaways
  • Quick wins for boosting frontend speed as a backend developer
  • lazy loading is a simple but effective way to improve page speed
  • images are a major contributor to page size, with 60-65% of pages containing images
  • WebP is an image format that can reduce image size by up to 30%
  • Intersection Observer can be used to run JavaScript functions only when they come into view
  • Custom elements can be used to create reusable UI components
  • Core Web Vitals provide a new set of metrics for measuring page speed
  • First Contentful Paint (FCP) and Largest Contentful Paint (LCP) are important metrics for measuring page speed
  • Web.dev is a useful resource for learning about page speed and core web vitals
  • Lighthouse is a tool for running audits on website performance and providing suggestions for improvement
  • PageSpeed Insights is a tool for testing website performance and providing feedback on how to improve
  • Font loading can be a significant contributor to page loading time
  • Subseting fonts can help reduce font size and improve page loading time
  • WebP can be used to compress images and reduce page size
  • Lazy loading can be used to load images only when they come into view
  • HTML tags can be used to define the structure of a web page
  • Intersection Observer can be used to run JavaScript functions only when they come into view
  • Custom elements can be used to create reusable UI components
  • Font loading can be a significant contributor to page loading time
  • Subseting fonts can help reduce font size and improve page loading time
  • WebP can be used to compress images and reduce page size