Skapa användbara link rel preload-taggar

Webbteam använder det när en avgörande resurs förtjänar prioritet men förladdning av allt skulle slösa bandbredd.

Skapa användbara link rel preload-taggar. Dina uppgifter stannar lokalt medan resultatet är lätt att kontrollera och återanvända.

Så använder du

Lista en resurs per rad, till exempel en teckensnittsfil eller en viktig bild.
Använd de exakta sökvägar som din sida begär.
Kör generatorn för att skapa länktaggarna link rel preload.
Infoga dessa taggar i head före andra prioriterade resurser.

Exempel

Ett team märker att rubrikteckensnittet anländer sent och förskjuter layouten. De listar teckensnittsfilen som används av sidan, genererar preload-taggarna och placerar dem i head. Detta hjälper dem att undvika att förladda varje resurs på webbplatsen. Ett test på långsamt nätverk visar sedan om teckensnittsprioriteringen är användbar.

Indata

/assets/font.woff2
/assets/hero.webp

Gränser och format

Förladdning är bara användbart för några få verkligt kritiska resurser.
En felaktig sökväg gör att webbläsaren inte kan hitta filen.
För många taggar kan fördröja andra användbara element.
Verktyget kontrollerar inte om resursen redan finns i cache.
Webbläsare kan ignorera en förladdning som är onödig eller felaktig.

Var bearbetningen sker

Sökvägarna du anger omvandlas till taggar i din webbläsare. Ingen fil skickas iväg och verktyget utlöser inga nätverksanrop. Den genererade koden finns kvar för dig att kopiera.

Vanliga frågor

Vilka resurser bör jag förladda?

Reservera förladdning för filer som behövs i den första renderingen, till exempel ett rubrikteckensnitt eller en hero-bild. Att förladda för många objekt försvagar prioritetssignalen. Kontrollera med webbläsarverktyg om ändringen hjälper.

Hur skiljer sig detta från lazy loading?

Förladdning ber webbläsaren att hämta en resurs tidigare. Lazy loading fördröjer resurser som ännu inte behövs. De löser motsatta problem och bör användas för olika resurser.

Kan jag förladda ett externt teckensnitt?

Du kan ange en relativ eller absolut sökväg beroende på din uppsättning. Se till att den matchar filen som din sida faktiskt levererar. Regler för korsdomän och säkerhet kan fortfarande påverka hur webbläsaren använder den.

Vad händer om sökvägen till resursen är fel?

Om sökvägen är fel kan webbläsaren inte hitta filen. Verktyget skapar bara länkar utifrån de sökvägar du anger och kontrollerar inte om resursen finns eller redan är cachad. Därför bör du använda exakt de sökvägar som sidan faktiskt begär. Kontrollera resultatet i webbläsarens utvecklarverktyg innan du publicerar ändringen.

Kan för många förladdningstaggar göra mer skada än nytta?

Ja. Förladdning är bara användbar för några få verkligt kritiska resurser. För många taggar kan fördröja andra användbara element och försvaga prioritetssignalen. Verktyget genererar taggarna i webbläsaren och skickar inga filer någonstans. Håll listan kort och kontrollera med webbläsarverktyg om ändringen hjälper. Följ upp efter publicering för att se om beteendet förbättras.