TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan forbedre sideinnlastingshastigheten til statiske HTML -nettsteder?

3

HTML er grunnlaget for internett og webservere sender HTML -sider til nettleserens frontend. Nettlesere som Chrome, tolker HTML -koden og viser sideinnholdet på en lesbar måte. Dette konseptet er det samme for de nettstedene som bruker PHP med innholdshåndteringssystemer som WordPress. Imidlertid er det ikke tilstrekkelig å opprette et nettsted i disse dager. Du må optimalisere nettstedet ditt for rask lasting for å få god søkemotorrangering og brukeropplevelse. I denne artikkelen vil vi undersøke hvordan du kan øke det statiske HTML -nettstedet ditt og forbedre mulighetene for å presse nettstedet ditt til topps i Googles søkeresultater.

Før vi begynner – Statiske HTML -nettsteder

Husk at i denne artikkelen snakker vi om statiske HTML -nettsteder du lager selv. Du kan lage HTML -nettsteder med ditt eget design eller bruke ferdige rammer som Bootstrap. Generelt kan du laste opp HTML -sidene og andre ressurser (bilder / CSS / JS) på serveren din og få tilgang til nettstedet fra nettleseren. Annet enn domenenavn og hostingkonto trenger du ikke andre tredjepartsverktøy for dette formålet. Alternativt kan du bruke tredjepartsverktøy som Mobirise til å lage statiske HTML-sider og laste opp via FTP.

Vi diskuterer ikke om følgende saker:

  • Innholdshåndteringssystemer som WordPress – WordPress tilbyr en komplett optimaliseringspakke for å forbedre lastehastigheten til nettstedet ditt. Sjekk artikkelen vår om optimalisering av sidelastetid for WordPress -nettsteder.
  • Nettstedsbyggerverktøy som Weebly, Wix, etc. – disse plattformene er ikke åpen kildekode -løsninger, noe som i hovedsak betyr at du har begrensede alternativer på plattformen for å optimalisere. Du kan bruke noen av alternativene som er foreslått i denne artikkelen. Imidlertid kan det hende du ikke optimaliserer ting som å kombinere CSS/JS, fjerne render -blokkerende ressurser osv. Ettersom du ikke får tilgang til serveren.

Sjekk sidehastigheten i Google PageSpeed ​​Insights Tool

Nå som konteksten er klar, vil vi gå videre. Den beste måten å starte optimaliseringen på er å først forstå de grunnleggende problemene som finnes på nettstedet ditt. For å finne hastighetsrelaterte problemer, gå til Google PageSpeed ​​Insight -verktøyene og sjekk poengsummen til nettstedet ditt. Ikke bekymre deg mye om poengsummen først, rull ned og sjekk mulighetsdelen for å forbedre poengsummen.

Hvordan forbedre sideinnlastingshastigheten til statiske HTML -nettsteder?

Forslag til Google PageSpeed ​​Insights

Vær oppmerksom på at mulighetene som vises i PageSpeed ​​Insights -verktøyet IKKE direkte påvirker poengsummen. Som hovedregel vil poengsummen være lav når du har problemer over delen (overskriften) på nettstedet ditt. Den inkluderer gjengivelsesblokkerende ressurser, forhåndsinnlasting av fonter og bilder, kumulativt layoutskifte med tredjepartskode, etc. Derfor kan du kombinere muligheten og de generelle reglene for å forbedre sideinnlastingshastigheten til dine statiske HTML-nettsteder.

Hvordan forbedre sideinnlastingshastigheten til statiske HTML -nettsteder?

Du kan bruke følgende funksjoner for å forbedre hastigheten på nettstedet ditt.

1 Kombinere og minimere CSS- og JS -filer

Et statisk HTML -nettsted vil ha et CSS -stilark som en minimumsressurs for å definere stilen på elementene på HTML -siden din. I tillegg kan du bruke flere JavaScript -filer for å legge til andre funksjoner som glidebrytere på nettstedet ditt.

  • Det første du trenger er å fjerne unødvendige mellomrom og kommentarer i CSS / JS / HTML -filene. Dette kalles minification som reduserer filstørrelsen og forbedrer sidehastigheten. Bruk disse CSS, JS og HTML minifisering verktøy for å fjerne unødvendig rot fra filene. Husk at de minifiserte CSS- og JS -filene vil ha utvidelser som .min.css og .min.js.
  • Ta kontakt med vertsselskapet ditt, og aktiver GZIP -komprimering for å komprimere HTML -innholdet ditt. Dette vil redusere filstørrelsen som vises i nettleseren og drastisk forbedre sidehastigheten. Du kan bekrefte om nettstedet ditt bruker GZIP -komprimering ved å bruke dette verktøyet og finne besparelsene i størrelse.
  • Ved å kombinere CSS- og JS -filer kan du redusere antallet HTTP -forespørsler til serveren din. Derfor kan du kombinere CSS -filene i stedet for å bruke stiler i forskjellige stilark. Dette er imidlertid ikke nødvendig hvis vertsserveren din støtter HTTP/2 -protokoll som støtter parallelle HTTP -forespørsler. I tillegg kan kombinasjon av JS -filer bryte oppsettet med mindre du vet hvordan du kombinerer koden riktig inne i filen.

2 Fjerne Render -blokkeringsressurser

Neste trinn er å fjerne gjengivelsesblokkerende ressurser ovenfra delen (header) på nettstedet ditt. Som en tommelfingerregel, sørg for å koble alle JS -filer etter brøddelen på HTML -siden din. Dette vil hjelpe deg med å forsinke innlasting av skript og unngå problemer med blokkering av gjengivelse.

  • Gå til Google PageSpeed ​​Insights -verktøyet og test nettstedet ditt for å måle sidehastighet.
  • Hvis du har noen advarsler for gjengivelsesblokkerende ressurser, noter du filnavnet.
  • Flytt filen fra toppteksten til bunntekstområdet.

Husk at det ikke er mulig i alle situasjoner å flytte filen til bunntekstområdet. Kontroller at nettstedets layout og funksjonalitet fungerer bra når du omorganiserer filene. I tillegg må du kanskje deaktivere kombinering av filer for å finne hvilken ressursfil som forårsaker problemene.

3 Bruk Content Delivery Networks (CDN)

De to alternativene ovenfor er mer tekniske, noe som kan være vanskelig for deg. For å unngå å kaste bort tid og bryte nettstedets layout, er den best mulige løsningen å bruke et innholdsleveringsnettverk (CDN) som Cloudflare StackPath.

  • Du kan kombinere og minifisere filer ved hjelp av CDN -nettverk i stedet for å gjøre det på serveren din.
  • Øk hastigheten, spesielt hvis du serverer innhold for internasjonale brukere.
  • Forbedre sikkerheten ved å blokkere automatiserte roboter og med brutal kraft og DDoS -beskyttelse.

Den grunnleggende Cloudflare CDN er gratis, noe som er tilstrekkelig for de fleste statiske HTML -nettsteder. Du kan kombinere og minifisere filer med ett klikk og teste hvordan det påvirker sideinnlastingshastigheten i Google PageSpeed ​​Insights -verktøyet. Hvis du bruker rammer som Bootstrap, må du inkludere CDN -ressursen i stedet for å betjene kildefilen fra serveren din.

4 Unngå tredjepartskoder

En av de viktigste faktorene for å forbedre sidens lastetid er å begrense bruken av tredjepartskoder på nettstedet ditt. Problemet er at du ikke kan kontrollere lasteatferden til tredjepartskoder. Den dynamiske lasteoppførselen vil påvirke hastighetsparametrene som kumulativt layoutskifte og største innholdsrike maling.

  • Plasser annonsene som Google AdSense under det synlige området når siden lastes inn. Dessverre vil dette påvirke inntektene dine direkte ved å redusere CTR og sidevisninger.
  • Sett inn Google Analytics eller annen sporingskode etter kroppsseksjonen.
  • Unngå å sette inn koder i overskriften for sosial deling.
  • Hvis du bruker Google -fonter, må du sørge for å bruke den på en forenklet måte med mindre skriftvekter og skriftfamilier. Dette vil hjelpe deg med å redusere antall filer og få dem raskere fra Googles server.

5 Forhåndsinnlasting av fonter og bilder

Et annet populært problem med sidehastighet handler om forhåndsinnlasting av fonter og bilder som du laster inn i toppteksten. Hvis du ser advarsler i Google PageSpeed, kan du legge til følgende koder i overskriftsdelen. Sørg for å erstatte filnavnene 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">

Dette er veldig nyttig, spesielt når du bruker fantastiske ikoner for skrifttyper på nettstedet ditt.

6 bilder-Komprimer og bruk neste generasjons format

Det siste alternativet vi forklarer her er å komprimere bildene du bruker på nettstedet ditt. Siden statiske HTML-nettsteder ikke har noen innebygd mulighet for å redusere bildestørrelsen, må du komprimere dem manuelt før du laster dem opp på serveren din.

  • Noen webservere har muligheten til å komprimere bilder når de lastes opp. Ta kontakt med vertsselskapet ditt om de tilbyr noe verktøy for dette formålet.
  • Ellers kan du bruke bildekomprimeringsverktøy for å redusere bildestørrelsen uten å miste kvaliteten.
  • I tillegg kan du konvertere bildeformatet til JPEG-2000 eller JPEG XR. Vanligvis har VPS -servere et alternativ til å servere bilder i WebP -format som du kan bekrefte med vertsselskapet ditt. I dette tilfellet trenger du ingen konvertering, da det automatisk vil skje fra serversiden for hvert bilde. Bruk av bilder i WebP, JPEG-2000 eller JPEG XR hjelper deg med å fikse serverbilder i neste generasjons formatproblem i Google PageSpeed ​​Insights-verktøyet

7 Bruk Critical CSS

Når du har samme topptekst på hele nettstedet, er det en enkel måte å forbedre lastehastigheten. I stedet for å laste hele CSS -filen i overskriften, kan du bare bruke CSS for den synlige overskriftsdelen når siden lastes inn i et nettleservindu. Dette kalles kritisk CSS som du kan generere fra tredjepartsverktøy.

  • Gå til det viktige CSS -generatorverktøyet og oppgi nettadressen til nettstedet ditt.
  • Generer kritisk CSS og kopier innholdet.
  • Legg inn de kopierte stilene mellom … tagger inne i toppteksten på HTML -området.
  • Du kan utsette hovedstilarket til bunntekst -delen for å unngå gjengivelse som blokkerer CSS -problem.

Hvordan forbedre sideinnlastingshastigheten til statiske HTML -nettsteder?

Kritisk CSS -generator

Siste ord

Som nevnt, er sidehastigheten for det statiske HTML -nettstedet avhengig av gjengivelse av området ovenfor brettet i nettleseren. Du kan redusere CSS og skript i overskriftsdelen for å fikse de fleste problemene og mulighetene som vises i Google PageSpeed ​​Insights -verktøyet. Det beste alternativet er å bruke CDN og unngå tredjepartsinnhold i overskriftsseksjonen.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon