TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka parantaa staattisten HTML -verkkosivustojen sivujen latausnopeutta?

3

HTML on Internetin perusta ja web -palvelimet lähettävät HTML -sivuja selaimen käyttöliittymään. Chromen kaltaiset selaimet tulkitsevat HTML -merkinnät ja näyttävät sivun sisällön luettavalla tavalla. Tämä käsite on sama niille sivustoille, jotka käyttävät PHP: tä sisällönhallintajärjestelmillä, kuten WordPress. Verkkosivuston luominen ei kuitenkaan nykyään riitä. Sinun on optimoitava sivustosi nopeaan latautumiseen, jotta saat hyvän hakukonejärjestyksen ja käyttäjäkokemuksen. Tässä artikkelissa tutkimme, miten nopeutat staattista HTML -verkkosivustoasi ja parannat mahdollisuuksia nostaa sivustosi Googlen hakutulosten kärkeen.

Ennen kuin aloitamme – Staattiset HTML -sivustot

Muista, että tässä artikkelissa puhumme staattisista HTML -verkkosivustoista, jotka luot itse. Voit luoda HTML -verkkosivustoja omalla suunnittelullasi tai käyttää valmiita kehyksiä, kuten Bootstrap. Yleensä voit ladata palvelimellesi HTML -sivut ja muut resurssit (kuvat / CSS / JS) ja käyttää sivustoa selaimesta. Et tarvitse muita kolmannen osapuolen työkaluja tähän tarkoitukseen, paitsi verkkotunnuksen ja isäntätilin. Vaihtoehtoisesti voit käyttää kolmansien osapuolien työkaluja, kuten Mobirisea, staattisten HTML-sivujen luomiseen ja lataamiseen FTP: n kautta.

Emme keskustele seuraavista tapauksista:

  • Sisällönhallintajärjestelmät, kuten WordPress – WordPress tarjoaa täydellisen optimointipaketin verkkosivustosi latausnopeuden parantamiseksi. Tutustu artikkelimme WordPress -sivustojen sivujen latausajan optimointiin.
  • Verkkosivustojen rakennustyökalut, kuten Weebly, Wix jne. – nämä alustat eivät ole avoimen lähdekoodin ratkaisuja, mikä tarkoittaa käytännössä sitä, että sinulla on rajoitetut mahdollisuudet optimoida alustan sisällä. Voit käyttää joitain tässä artikkelissa ehdotettuja vaihtoehtoja. Et kuitenkaan voi optimoida sisältöä, kuten CSS/JS: n yhdistämistä, renderöinnin estävien resurssien poistamista jne., Koska et voi käyttää palvelinta.

Tarkista sivun nopeus Google PageSpeed ​​Insights -työkalussa

Nyt kun asiayhteys on selvä, siirrymme eteenpäin. Paras tapa aloittaa optimointi on ensin ymmärtää sivustosi perusongelmat. Jos haluat löytää nopeuteen liittyviä ongelmia, siirry Google PageSpeed ​​Insight -työkaluihin ja tarkista verkkosivustosi pisteet. Älä huolehdi pisteistä aluksi, vieritä alas ja tarkista mahdollisuudet -osio pisteiden parantamiseksi.

Kuinka parantaa staattisten HTML -verkkosivustojen sivujen latausnopeutta?

Google PageSpeed ​​Insights -ehdotuksia

Huomaa, että PageSpeed ​​Insights -työkalun tarjoamat mahdollisuudet EIVÄT vaikuta tulokseen. Yleensä pisteet ovat alhaiset, jos sivustosi sivun yläosassa (otsikko -osassa) on ongelmia. Se sisältää hahmonnuksen estoresurssit, kirjasimien ja kuvien esilataus, kumulatiivinen asettelun siirto kolmannen osapuolen koodilla jne. Siksi voit yhdistää mahdollisuudet ja yleiset säännöt parantaaksesi staattisten HTML-sivustojesi sivujen latausnopeutta.

Kuinka parantaa staattisten HTML -verkkosivustojen sivujen latausnopeutta?

Voit parantaa sivustosi nopeutta seuraavien ominaisuuksien avulla.

1 CSS- ja JS -tiedostojen yhdistäminen ja pienentäminen

Staattisella HTML -sivustolla on CSS -tyylitaulukko vähimmäisresurssina HTML -sivun elementtien tyylin määrittämiseen. Lisäksi voit lisätä JavaScript -tiedostoja lisäämällä muita toimintoja, kuten liukusäätimiä sivustollesi.

  • Ensimmäinen asia, jonka tarvitset, on poistaa tarpeettomat välilyönnit ja kommentit CSS / JS / HTML -tiedostoistasi. Tätä kutsutaan minifioimiseksi, joka pienentää tiedoston kokoa ja parantaa sivun latausnopeutta. Käytä näitä CSS-, JS- ja HTML -minimointityökaluja tarpeettoman sotkun poistamiseen tiedostoista. Muista, että pienennettyjen CSS- ja JS -tiedostojen laajennukset ovat .min.css ja .min.js.
  • Tarkista isäntäyritykseltäsi ja ota GZIP -pakkaus käyttöön pakataksesi HTML -sisältösi. Tämä pienentää selaimen tiedostokokoa ja parantaa sivun nopeutta huomattavasti. Voit tarkistaa tämän työkalun avulla, käyttääkö sivustosi GZIP -pakkausta, ja löytää säästöt koossa.
  • CSS- ja JS -tiedostojen yhdistäminen auttaa vähentämään palvelimelle tulevien HTTP -pyyntöjen määrää. Siksi voit yhdistää CSS -tiedostot sen sijaan, että käyttäisit tyylejä eri tyylitaulukoissa. Tätä ei kuitenkaan vaadita, jos isäntäpalvelimesi tukee HTTP/2 -protokollaa, joka tukee rinnakkaisia HTTP -pyyntöjä. Lisäksi JS -tiedostojen yhdistäminen voi rikkoa asettelun, ellet tiedä kuinka koodia voidaan yhdistää oikein tiedoston sisällä.

2 Render -estoresurssien poistaminen

Seuraava vaihe on poistaa renderöinnin estävät resurssit sivustosi taitto -osion yläosasta. Muista linkittää kaikki JS -tiedostot HTML -sivusi body -osion jälkeen. Tämä auttaa sinua viivyttämään komentosarjojen lataamista ja välttämään renderöinnin esto -ongelmia.

  • Siirry Google PageSpeed ​​Insights -työkaluun ja testaa verkkosivustosi sivun latausnopeuden mittaamiseksi.
  • Jos sinulla on varoituksia hahmonnusestoresursseista, kirjoita tiedoston nimi muistiin.
  • Siirrä tiedosto otsikko -osiosta alatunnistealueelle.

Muista, ettei kaikissa tilanteissa ole mahdollista siirtää tiedostoa alatunnistealueelle. Tarkista, että sivustosi ulkoasu ja toiminnot toimivat hyvin, kun järjestät tiedostot uudelleen. Lisäksi sinun on ehkä poistettava tiedostojen yhdistäminen käytöstä löytääksesi, mikä resurssitiedosto aiheuttaa ongelman.

3 Käytä sisällön toimitusverkkoja (CDN)

Yllä olevat kaksi vaihtoehtoa ovat luonteeltaan teknisempiä, mikä voi olla sinulle vaikeaa. Ajan tuhlaamisen ja sivustosi asettelun rikkomisen välttämiseksi paras mahdollinen ratkaisu on käyttää sisällön toimitusverkkoa (CDN), kuten Cloudflare StackPath.

  • Voit yhdistää ja pienentää tiedostoja CDN -verkon avulla sen sijaan, että teet sen palvelimellasi.
  • Lisää nopeutta etenkin, jos tarjoat sisältöä kansainvälisille käyttäjille.
  • Paranna tietoturvaa estämällä automaattiset robotit ja käyttämällä raakaa voimaa ja DDoS -suojauksia.

Cloudflaren perus -CDN on ilmainen, mikä riittää useimmille staattisille HTML -sivustoille. Voit yhdistää ja pienentää tiedostoja yhdellä napsautuksella ja testata, miten se vaikuttaa sivusi latausnopeuteen Google PageSpeed ​​Insights -työkalulla. Jos käytät Bootstrapin kaltaisia ​​kehyksiä, muista sisällyttää CDN -resurssi palvelimen lähdetiedoston huoltamisen sijaan.

4 Vältä kolmannen osapuolen koodeja

Yksi tärkeimmistä tekijöistä sivusi latausajan parantamisessa on rajoittaa kolmansien osapuolten koodien käyttöä sivustossasi. Ongelmana on, että et voi hallita kolmansien osapuolten koodien lataamista. Dynaaminen latauskäyttäytyminen vaikuttaa nopeusparametreihin, kuten kumulatiiviseen asettelun siirtoon ja suurimpaan sisällölliseen maaliin.

  • Aseta mainokset, kuten Google AdSense, näkyvän alueen alle, kun sivu latautuu. Valitettavasti tämä vaikuttaa tuloihisi suoraan vähentämällä napsautussuhdetta ja sivun katseluja.
  • Lisää Google Analytics tai jokin muu seurantakoodi tekstiosan jälkeen.
  • Vältä koodien lisäämistä otsikkoon sosiaalista jakamista varten.
  • Jos käytät Googlen fontteja, varmista, että käytät yksinkertaistettua fonttipainoja ja kirjasinperheitä. Tämä auttaa sinua vähentämään tiedostojen määrää ja saamaan ne nopeammin Googlen palvelimelta.

5 Fonttien ja kuvien esilataus

Toinen suosittu sivunopeusongelma liittyy otsikko -osioon ladattavien fonttien ja kuvien esilataamiseen. Jos näet Google PageSpeedissä varoitusviestejä, lisää seuraavat koodit otsikko -osioon. Muista korvata tiedostonimet Googlen PageSpeed ​​Insights -ohjelmassa näkyvillä nimillä.

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

Tämä on erittäin hyödyllistä erityisesti silloin, kun käytät mahtavia kirjasinkuvakkeita sivustossasi.

6 kuvaa-pakkaa ja käytä seuraavan sukupolven muotoa

Viimeinen vaihtoehto, jonka selitämme tässä, on pakata sivustossasi käyttämäsi kuvat. Koska staattisissa HTML-sivustoissa ei ole sisäänrakennettua vaihtoehtoa kuvien koon pienentämiseksi, sinun on pakattava ne manuaalisesti ennen lataamista palvelimellesi.

  • Joillakin verkkopalvelimilla on mahdollisuus pakata kuvat ladattaessa. Tarkista isännöintiyritykseltäsi, tarjoavatko he työkaluja tähän tarkoitukseen.
  • Muussa tapauksessa käytä kuvien pakkausvälineitä kuvien pienentämiseen menettämättä laatua.
  • Lisäksi voit muuntaa kuvamuodon JPEG-2000- tai JPEG XR -formaatiksi. Yleensä VPS -palvelimilla on mahdollisuus palvella kuvia WebP -muodossa, jonka voit vahvistaa isäntäyritykseltäsi. Tässä tapauksessa et tarvitse mitään muuntamista, koska se tapahtuu automaattisesti palvelimen puolelta jokaiselle kuvalle. Kuvien käyttäminen WebP: ssä, JPEG-2000: ssa tai JPEG XR: ssä auttaa sinua korjaamaan näyttökuvia seuraavan sukupolven muodossa Google PageSpeed ​​Insights -työkalussa

7 Käytä kriittistä CSS: ää

Kun sinulla on sama otsikko -osa koko sivustolla, on helppo tapa parantaa latausnopeutta. Sen sijaan, että lataisit koko CSS -tiedoston ylätunnisteeseen, voit käyttää CSS: ää vain näkyvään otsikko -osioon, kun sivu latautuu selainikkunaan. Tätä kutsutaan kriittiseksi CSS: ksi, jonka voit luoda kolmannen osapuolen työkaluista.

  • Siirry kriittiseen CSS -luontityökaluun ja anna verkkosivustosi URL -osoite.
  • Luo kriittinen CSS ja kopioi sisältö.
  • Sijoita kopioidut tyylit… -tagien väliin HTML -sivustosi otsikko -osiossa.
  • Voit siirtää tärkeimmän tyylitaulukon alatunnisteeseen välttääksesi renderöinnin estämisen CSS -ongelman.

Kuinka parantaa staattisten HTML -verkkosivustojen sivujen latausnopeutta?

Kriittinen CSS -generaattori

Lopulliset sanat

Kuten mainittiin, staattisen HTML -sivustosi sivujen latausnopeus riippuu selaimen taittoalueen yläpuolen renderöinnistä. Voit pienentää otsikko -osion CSS -tiedostoja ja komentosarjoja korjataksesi useimmat ongelmat ja mahdollisuudet, jotka näkyvät Google PageSpeed ​​Insights -työkalussa. Paras vaihtoehto on käyttää CDN: ää ja välttää kolmannen osapuolen sisältöä otsikko-osiossa.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. HyväksyäLisätietoja