I have a problem that I have been trying to solve for weeks (now even months). It's about a LCP and FCP problem on a website. The LCP problem is on the landing page caused by a DIV. Unfortunately the site is hosted on Webflow, so the options are somewhat limited.
I have optimized the page with regard to the following topics:
- CSS as small as possible
- Fonts are minified and in the latest formats
- Images, CSS and JS are minified and preloaded via preload and preconnects
- The subpages are preloaded via preload.
- The CDN servers should be set as well as possible in Webflow.
I'm trying to get to the bottom of the problem, but I'm slowly running out of ideas as to what the cause could be and I've been searching for a very, very long time now. The Chrome Web Tools don't really help me either.
The site is https://www.sandravongneisenau.de
I just can't get a grip on the two metrics on Google page speed.
If anyone would be so kind as to give me an idea of what I can do to make the page perform better, I would be very grateful.
Best regards Onewaypub
- CSS as small as possible
- Fonts are minified and in the latest formats
- Images, CSS and JS are minified and preloaded via preload and preconnects
- The subpages are preloaded via preload.
- The CDN servers should be set as well as possible in Webflow.
First Contentful Paint is the time it takes to see the first piece of content. Largest Contentful Paint is the time it takes to see the biggest element (the background image).
When optimizing loading speeds, you want to prioritize images and CSS -- the things mandatory to render the site -- and load JavaScript last.
I noticed in the
<head>of your site, there are a lot of<script async src="...">. With these JS files, it may be better to load them withdeferinstead ofasyncso the JS doesn't run until after the rest of the DOM loads (https://www.w3schools.com/tags/att_script_async.asp).As well, there are
<link preload...'s that setfetchprioritytohigh. The ones that link to JS files should probably be ommitted. The purpose of prefetch/preload is to load the crucial assets (CSS/images/fonts/etc.) as soon as possible.Similar to the first one, every
scripttag should have thedeferkeyword unless it absolutely cannot.If you want to go further, check out squoosh.app which has very high quality image compression without noticeable differences, which may help with loading the big background image. As well, you could make an extremely low-resolution version of it, blur it with CSS, and display that until the full image loads (lazy loading).