Locate element render delay in LCP
Hello, I am new in creating websites, and launched PageInsights after finishing a project and the performance isn't very good on mobile devies. Also it sometimes show 91 performance, sometimes 67 and now it's stable 79. How can I improve the LCP and FCP? I was spectating Coverage, Network and Performance tabs, but I don't know what's causing the render delay. I tried doing critical CSS, Image CDN, compressing the images size (the hero background is 37.69 KB in full size so it shouldn't take too much to download it), adding the lazy loading, but nothing seems to be working. PageInsights shows that hero section is loading for about 5s, but I don't really know why.
Thanks for response.
EDIT. I was thinking about downloading the material icons and montserrat font from Google, but I couldn't find anything about improving the performance or whether I would host fonts locally is better than importing them directly from Google Fonts
github: https://github.com/Jakub-Gryczka/pomoc_drogowa
live: https://jakub-gryczka.github.io/pomoc_drogowa/
GitHub
GitHub - Jakub-Gryczka/pomoc_drogowa
Contribute to Jakub-Gryczka/pomoc_drogowa development by creating an account on GitHub.
AUTO-MAX Jarosław Gryczka | Transport pojazdów | Pomoc dro...
Profesjonalna pomoc drogowa 24/7 - holowanie, naprawy, awaryjne otwieranie samochodów. Skorzystaj z naszych usług w razie kłopotów na drodze. Firma świadczy usługi pomocy drogowej oraz transportu pojazdów od ponad 25 lat.
20 Replies
When I'm available in a few hours I'll fork the repo and try my hand at it, seems fun
Okay just sat down at my computer
All I did was put it into Netlify and it scores all greens
I believe Netlify automatically puts all your files into a CDN so it's really fast
Not sure if that's an option for you
Netlify is free by the way and really easy to set up so if that's something you would like to do I can help you if you need it - but it's pretty straightforward
I will try handle it, because I was hosting some files on the netlify in the past
There are more opportunities to increase the performance beyond Netlify:
See screenshots.
I believe
Ensure text remains visible during load can be solved by putting a font-display: swap on your @font-face rules.
Images do not have explicit width/height just means you need to put width and height attributes on your image. So if you go into dev tools and see that your image loads as 500px width and 300px height, just set those attributes on your img tag.
Avoid chaining critical requests - I didn't look into your code, but just looking at the report - it looks like you're importing 2 Google fonts. Don't import Google fonts - 1) it is a privacy issue and 2) it's very slow performance wise. Download the fonts from Google and include them locally into your project inside something like a public/fonts directory, and convert the fonts from TTF file type to Woff2 - much better performance that way.
I wouldn't worry about the LCP warning - not sure why it's giving you that but I'm not an expert. It might be because of the Ensure text remains visible during load issue from before - so try to add that fix and see what happens.
Avoid large layout shifts - again, wouldn't worry too much about this. You only have 3 elements here and they're relatively minor shifts if anything, so I don't believe it will increase performance all that much, but if you have time it would elevate the User Experience for you to fix that. Same thing as the explicit width/height - generally you want to put some width/height attributes on elements that have that warning I believe.
Avoid non-composited animations - never seen this one before, but it's saying Animations which are not composited can be janky and increase CLS. on your <a href="#about-company" class="btn nav__btn"> and also saying that there's an unsupported margin-bottom animation - not sure on the fix for that, but maybe see if you're animating a margin and take it off to see if that fixes it.
You also have some accessibility issues.
Basically all this means is that your 2 anchor links aren't contrasting enough with the background. Use something like https://webaim.org/resources/contrastchecker/ to check the contrast ratio and fix it so that they pass.
And then the headers are not in sequential order - you should always have your heading elements be in sequential order. So only 1 h1 on a page, and then h2, then h3... you don't want to do h1 > h3 > h2.
Not sure how long ago you tried but they made it really easy; you can connect your GitHub account and have your Netlify site connected to your repo so it just pulls all the changes automatically. The free tier is very generous - unless you have thousands of people every month going to your website or you're adding tons and tons of changes you won't have to pay for it.
I was going to fork it and try some changes but that's a lot of work 😂 but if you have any questions let me know and I'll try to guide you in the right direction
Yeah it's plenty of work, when I was starting the project I didn't expect it to be that complicated hah
Thank you very much for your help
Once you go through it a few times you start to set up your projects so that it's not a ton of upfront work at least in my experience.
I also like using Astro (framework) because it handles a lot of this stuff for me, like for example there's a plugin that automatically puts the right widths/heights on images when the site is built and more
But by no means do you need to use Astro, just a suggestion in case you ever want to look into it
I heard about it and I think it's really nice. Especially for multipage applications, but at that moment I'm learning JavaScript, currently I finished only 1/3 of JS course that I am taking so I think I will try to learn some JS first and then look at the frameworks
I was wondering to learn Astro or React, but I think my knowledge about JS is too little for now 😆
I also heard about webpack, post-css and other cool things that would help me like minifying the CSS or copying files from src folder to public folder etc.
Astro is a Static Site Generator (SSG) and in my experience, you don't really need to know a whole lot of JS for it. You can pretty much plop in your html and css and build marketing websites (which is what I do), and then sprinkle in your JS as needed (like for example, navigation menus etc). You'll need to learn the ecosystem and how it works though to do certain things you want.
React is for web applications, and it's all written in JS so yea you'd need to know a lot of JS for that haha
I don't know how to work with webpack/post-css (never really looked into post-css so idk what it is tbh) but I know that Astro automatically minifies your css and js
I think they use Vite (which I think is in the same vein as webpack) to do it and you'd only need to configure it if you want to do something specific with it
I will have a look at it and maybe use it in future project
Yup yup I think that's a good way to approach it; once you learn how to fix these errors you can get a tool or an ecosystem like Astro to do a lot of the mudane heavy lifting for you so you can spend more time building websites
I just uploaded it on netlify, I don't know why it's 68 now 🥲
Huh that's weird
Yeah, like I said in the beginning of the post, once it shows performance 91, once 60, once 68, once 75 etc. it just feels like its random 😆
Yea idk maybe try those optimization fixes and see if that helps
Hello, I think I found one of the issues. It may be the MaterialSymbols font face. It weights about 3MB 🫣
Do you maybe know how can I reduce it? It's already woff2 file
All I can think of is downloading all the icons that I'm using as svg and host them on CDN for faster loading, but I think using them in single variable font file would be better
Oof idk, I've never used a font face like that recently
I'm sure it's a common issue tho, have you seen if they maybe have a production version?