Optimizing LCP in an Angular Application

One of the most important metrics in web performance is LCP.
Getting this metric right is essential for good UX and google rank.

We will take a deep dive into Largest Contentful Paint, what it measures, and why it's important. Based on a real life application we will introduce easy to follow steps to optimize the LCP score. I will walk you through the different stages from optimizing for LCP.

Moving forward, we will refactor the architecture, component structure and template bindings to squeeze out the last bit. Furthermore, we will apply advanced tricks with the app initializer document headers and more.

As a bonus, you will learn about the latest tricks in image optimization techniques and how to automate them.


  • Basic performance knowledge and curiosity, no other special prerequisites are needed.


  • An in-depth understanding of Largest Contentful Paint (LCP)
  • An LCP optimization framework
  • The different stages where you can introduce HTTP requests in angular
  • Image optimization
  • Secret trick with header elements



Christopher Holder
Christopher Holder is a Full Stack Engineer at push-based.io. He does consulting and auditing on Angular applications to help companies optimize their application architecture and performance. As an Open Source contributor he collaborates on projects that help make the web faster and speed regression by making testing performance easier and scalable.


Du möchtest über die enterJS
auf dem Laufenden gehalten werden?