TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man förbättrar sidladdningshastigheten för statiska HTML -webbplatser?

2

HTML är basen för internet och webbservrar skickar HTML -sidor till webbläsarens frontend. Webbläsare som Chrome, tolkar HTML -markeringen och visar sidinnehållet på ett läsbart sätt. Detta koncept är detsamma för de webbplatser som använder PHP med innehållshanteringssystem som WordPress. Det är dock inte tillräckligt att skapa en webbplats i dessa dagar. Du måste optimera din webbplats för snabb laddning för att få bra sökmotorrankning och användarupplevelse. I den här artikeln kommer vi att utforska hur du kan påskynda din statiska HTML -webbplats och förbättra möjligheterna att driva din webbplats till toppen i Googles sökresultat.

Innan vi börjar – Statiska HTML -webbplatser

Kom ihåg att i den här artikeln talar vi om statiska HTML -webbplatser som du skapar själv. Du kan skapa HTML -webbplatser med din egen design eller använda färdiga ramar som Bootstrap. I allmänhet kan du ladda upp HTML -sidorna och andra resurser (bilder / CSS / JS) på din server och komma åt webbplatsen från webbläsaren. Förutom domännamn och värdkonto behöver du inga andra tredjepartsverktyg för detta ändamål. Alternativt kan du använda tredjepartsverktyg som Mobirise för att skapa statiska HTML-sidor och ladda upp via FTP.

Vi diskuterar inte om följande fall:

  • Innehållshanteringssystem som WordPress – WordPress erbjuder en komplett optimeringssvit för att förbättra laddningshastigheten på din webbplats. Kolla in vår artikel om optimering av sidladdningstid för WordPress -webbplatser.
  • Verktyg för webbplatsbyggare som Weebly, Wix, etc. – dessa plattformar är inte lösningar med öppen källkod, vilket i huvudsak innebär att du har begränsade alternativ inom plattformen att optimera. Du kan använda några av alternativen som föreslås i den här artikeln. Du får dock inte optimera saker som att kombinera CSS/JS, ta bort resurblockerande resurser etc. eftersom du inte kan komma åt servern.

Kontrollera sidhastigheten i Google PageSpeed ​​Insights Tool

Nu när sammanhanget är klart kommer vi att gå vidare. Det bästa sättet att starta optimeringen är att först förstå de grundläggande problemen som finns på din webbplats. För att hitta de hastighetsrelaterade problemen, gå till Google PageSpeed ​​Insight -verktyg och kontrollera poängen på din webbplats. Oroa dig inte så mycket om poängen först, rulla ner och kolla möjlighetsavsnittet för att förbättra poängen.

Hur man förbättrar sidladdningshastigheten för statiska HTML -webbplatser?

Förslag på Google PageSpeed ​​Insights

Observera att de möjligheter som visas i PageSpeed ​​Insights -verktyget INTE direkt påverkar poängen. Som en allmän regel blir poängen låg när du har problem ovanför vikningen (rubriksektion) på din webbplats. Det inkluderar renderingsblockeringsresurser, förladdning av teckensnitt och bilder, kumulativt layoutskift med tredjepartskod, etc. Därför kan du kombinera möjligheterna och de allmänna reglerna för att förbättra sidladdningshastigheten för dina statiska HTML-webbplatser.

Hur man förbättrar sidladdningshastigheten för statiska HTML -webbplatser?

Du kan använda följande funktioner för att förbättra webbplatsens hastighet.

1 Kombinera och förminska CSS- och JS -filer

En statisk HTML -webbplats kommer att ha ett CSS -stilblad som en minsta resurs för att definiera elementets stil på din HTML -sida. Dessutom kan du använda ytterligare JavaScript -filer för att lägga till andra funktioner som skjutreglage på din webbplats.

  • Det första du behöver är att ta bort onödiga mellanslag och kommentarer i dina CSS / JS / HTML -filer. Detta kallas minifiering vilket minskar filstorleken och förbättrar sidhastigheten. Använd dessa CSS-, JS- och HTML -minifieringsverktyg för att ta bort onödigt röran från filerna. Kom ihåg att de minifierade CSS- och JS -filerna har tillägg som .min.css och .min.js.
  • Kontakta ditt webbhotell och aktivera GZIP -komprimering för att komprimera ditt HTML -innehåll. Detta kommer att minska filstorleken som visas i webbläsaren och drastiskt förbättra sidhastigheten. Du kan verifiera om din webbplats använder GZIP -komprimering med det här verktyget och hitta besparingar i storlek.
  • Genom att kombinera CSS- och JS -filer kan du minska antalet HTTP -förfrågningar till din server. Därför kan du kombinera CSS -filer istället för att använda stilar i olika formatmallar. Detta krävs dock inte om din webbserver stöder HTTP/2 -protokoll som stöder parallella HTTP -begäranden. Dessutom kan kombinationen av JS -filer bryta layouten om du inte vet hur du kombinerar koden ordentligt inuti filen.

2 Ta bort resursblockeringsresurser

Nästa steg är att ta bort renderingsblockeringsresurserna ovanför vikningsrubriken (rubrik) på din webbplats. Som tumregel, se till att länka alla JS -filer efter kroppsdelen på din HTML -sida. Detta hjälper dig att fördröja läsning av skript och undvika problem med blockering av render.

  • Gå till Google PageSpeed ​​Insights -verktyget och testa din webbplats för att mäta sidhastighet.
  • Om du har några varningar för resurser som blockerar resurser, notera filnamnet.
  • Flytta filen från sidhuvudet till sidfoten.

Kom ihåg att det inte är möjligt i alla situationer att flytta filen till sidfoten. Kontrollera att webbplatsens layout och funktioner fungerar bra när du ordnar om filerna. Dessutom kan du behöva inaktivera att kombinera filer för att hitta vilken resursfil som orsakar problemet.

3 Använd innehållsleveransnätverk (CDN)

Ovanstående två alternativ är mer tekniska, vilket kan vara svårt för dig. För att undvika att slösa tid och bryta webbplatsens layout är den bästa möjliga lösningen att använda ett innehållsleveransnätverk (CDN) som Cloudflare StackPath.

  • Du kan kombinera och minifiera filer med CDN -nätverk istället för att göra det på din server.
  • Öka hastigheten, särskilt om du serverar innehåll för internationella användare.
  • Förbättra säkerheten genom att blockera automatiserade bots och med brutal kraft och DDoS -skydd.

Den grundläggande Cloudflare CDN är gratis vilket är tillräckligt för de flesta statiska HTML -webbplatser. Du kan kombinera och förminska filer med ett enda klick och testa hur det påverkar din sidhastighet i Google PageSpeed ​​Insights -verktyget. Om du använder ramar som Bootstrap, se till att inkludera CDN -resursen istället för att serva källfilen från din server.

4 Undvik koder från tredje part

En av de viktigaste faktorerna för att förbättra din sidladdningstid är att begränsa användningen av tredjepartskoder på din webbplats. Problemet är att du inte kan kontrollera laddningsbeteendet för tredjepartskoder. Det dynamiska laddningsbeteendet påverkar hastighetsparametrarna som kumulativt layoutskift och största innehållsrika färg.

  • Placera annonserna som Google AdSense under det synliga området när sidan laddas. Tyvärr påverkar detta dina intäkter direkt genom att minska CTR och sidvisningar.
  • Sätt in Google Analytics eller någon annan spårningskod efter kroppsavsnittet.
  • Undvik att infoga koder i rubriken för social delning.
  • Om du använder Googles teckensnitt, se till att använda det på ett förenklat sätt med mindre teckensnittsvikter och teckensnittsfamiljer. Detta hjälper dig att minska antalet filer och få dem snabbare från Googles server.

5 Förladdning av teckensnitt och bilder

Ett annat populärt sidhastighetsproblem handlar om förladdning av teckensnitt och bilder som du läser in i rubriksektionen. Om du ser varningsmeddelanden i Google PageSpeed ​​lägger du till följande koder i rubriken. Se till att ersätta filnamnen med de du ser i Google PageSpeed ​​Insights.

<link rel="preload" href="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="image-file">

Detta är mycket användbart, särskilt när du använder fantastiska teckensnittsikoner på din webbplats.

6 bilder-Komprimera och använd nästa generations format

Det sista alternativet vi förklarar här är att komprimera bilderna du använder på din webbplats. Eftersom statiska HTML-webbplatser inte har något inbyggt alternativ för att minska storleken på bilderna måste du komprimera dem manuellt innan du laddar upp dem på din server.

  • Vissa webbservrar har möjlighet att komprimera bilder vid uppladdning. Kontrollera med ditt värdföretag om de erbjuder något verktyg för detta ändamål.
  • Använd annars bildkomprimeringsverktyg för att minska storleken på dina bilder utan att förlora kvaliteten.
  • Dessutom kan du konvertera bildformatet till JPEG-2000 eller JPEG XR. I allmänhet har VPS -servrar ett alternativ att servera bilder i WebP -format som du kan bekräfta med ditt webbhotell. I det här fallet behöver du ingen konvertering eftersom det automatiskt kommer att ske från serversidan för varje bild. Användning av bilder i WebP, JPEG-2000 eller JPEG XR hjälper dig att fixa serverbilder i nästa generations formatproblem i Google PageSpeed ​​Insights-verktyget

7 Använd Critical CSS

När du har samma rubriksektion på hela webbplatsen finns det ett enkelt sätt att förbättra laddningshastigheten. Istället för att ladda hela CSS -filen i rubriken kan du bara använda CSS för den synliga rubriken när sidan laddas i ett webbläsarfönster. Detta kallas kritisk CSS som du kan generera från tredjepartsverktyg.

  • Gå till det viktiga CSS -generatorverktyget och ange din webbadress.
  • Skapa kritisk CSS och kopiera innehållet.
  • Bläddra bland de kopierade stilarna mellan … taggar i rubriksektionen på din HTML -webbplats.
  • Du kan skjuta upp huvudmallen för sidfot för att undvika att CSS -problem blockeras.

Hur man förbättrar sidladdningshastigheten för statiska HTML -webbplatser?

Kritisk CSS -generator

Slutliga ord

Som nämnts beror sidhämtningshastigheten för din statiska HTML -webbplats på hur ovanstående område visas i webbläsaren. Du kan minska CSS och skript i rubriksektionen för att åtgärda de flesta problem och möjligheter som visas i Google PageSpeed ​​Insights -verktyget. Det bästa alternativet är att använda CDN och undvika innehåll från tredje part i rubriksektionen.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer