![]() Reduce the impact of third-party code / Minimize third-party usage The difference in the loading time of your page is brutal, not to mention that initially you don't have a lot of iframes lengthening the interaction time. What I use → For Youtube videos I started using lite-youtube-embed package, following the advice of Debbie O'brien and web.dev! On click: The facade replaces itself with the third-party product.On mouseover: The facade preconnects to third-party resources.On load: Add facade to the page (as the cover of a video).Solution ( third party facades ) → Instead of adding a third-party embed directly to your HTML, load the page with a static element that looks similar to the embedded third-party. Consider replacing them with a facade until they are required. Some third-party embeds can be lazy loaded. Lazy load third-party resources with facades What I use → A good example of this could be a link to google fonts, in my case, as I have the font files inside my project itself I didn't need to have this into account.īut Nuxt already took this into account for you and they created a module to improve your font load performance: 3. This handles the DNS lookup only, but it's got wider browser support, so it may serve as a nice fallback. Link dns-prefetch is another type related to connections. Use-case: Knowing Where From, but not What You're Fetching.In general, it's better to use link rel="preload", as it's a more comprehensive performance tweak, but we can keep link rel="preconnect" for the edge cases like: This lets the browser know that the page intends to connect to example com and retrieve content from there. Solution ( uses rel preconnect ) → Informing the browser of your intention is as simple as adding a link preconnect tag to your page: ![]() ![]() Preconnect to required originsĬonsider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. What I use → As I use Nuxt as my static site generator, it is already leveraging my performance with this technique, check crazy fast static applications to learn more about how it's doing it for us. Solution ( uses rel preload ) → Preload critical assets to improve loading speed.ĭeclare preload links in your HTML to instruct the browser to download key resources as soon as possible. We will always consider using link rel=preload to prioritize fetching resources that are currently requested later in page load. I'm using Lighthouse as the tool that will show us all the opportunities we have to improve or fix the performance of our project. To build my website I have used technologies such as: Nuxt, my static site generator, Storyblok, as my headlessCMS with an image service provider, and Netlify to host my full static site. ![]()
0 Comments
Leave a Reply. |