Veebilehe jõudluse optimeerimine

Kuulake seda artiklit

Veebisaidid jagunevad tavaliselt kaheks osaks: esiotsa ja tagaosa. Saame aru, et tausta kasutatakse veebilehe funktsioonide realiseerimiseks, nagu: kasutajate registreerimise teostamine, paroolide muutmine, artiklite kommenteerimine jne. Aga kuidas on lood esiosaga? Tegelikult peaks see olema jõudlusfunktsioon. Enamik tegureid, mis mõjutavad kasutaja ligipääsetavust, on seotud saidi väliste lehtede optimeerimisega. Lehekülje optimeerimine – see artikkel annab sellest protsessist ülevaate.

Artikli sisu:

• 1. Lehe laadimisaja optimeerimine
• 2. Tihendage kõik tihendatavad ressursid
• 3. Saidi vahemälu optimeerimine
• 4. Kriitiline renderdamise tee

1. Lehe laadimisaja optimeerimine

Parem lehe optimeerimine - see on siis, kui ressursse ei laeta üldse. Seetõttu proovige allalaaditavate tarbetute ressursside arvu minimeerida.

1. Hinnake, kas teie saidi mõned sõltuvused on vajalikud, ja kaaluge plusse ja miinuseid.
2. Kas sõltuv laadimistee on usaldusväärne ja kas see blokeerib kogu lehe, kui see pole saadaval?

2. Tihendage kõik tihendatavad ressursid

1. Kogu kood peab olema tihendatud.
2. Kustutage soovimatud pildid.
3. Kasutage piltide asemel css3.
4. Kasutage suurema tihendusastmega pilte. Eriti GIF-id, mõned videovormingud (H.264 või WebM) on palju väiksemad kui GIF-id.
5. Kasutage WordArt-fonte, mitte pilte.
6. Pakkuge uuemate brauserite (näiteks WebP) kasutajatele kaasaegsemaid pildivorminguid.
7. Mitme eraldusvõimega bitikaardid erinevate lehesuuruste jaoks.
8. Määrake pildi laius ja kõrgus, vastasel juhul võib tekkida kärpimine.
9. Kasutage HTTP/2. Näiteks sprite on suur pilt, mis koosneb paljudest väikestest piltidest, mis võib vähendada HTTP päringute arvu. Vahemällu salvestamine on aga keeruline ja väikese pildi muutmine muudab kõigi väikeste piltide vahemälu kehtetuks. HTTP/2, lingilt saab algatada mitu päringut, mis välistab vajaduse spraitide järele.

3. Veebisaidi vahemälu optimeerimine

Brauseri vahemällu salvestamise mehhanism:

1. Külastage lehte, taotlege erinevaid ressursse ja brauser kontrollib, kas seal on kohalik vahemälu.
2. Kui jah, siis kontrollige, kas ressurss on aegunud. Pole aegunud, kasutage vahemälu otse. Kui see aegub, esitatakse serverile päring.
3. Etag ja viimati muudetud päiseväljad lisatakse saadetud päringule.
4. Server kasutab Etag-i ja viimati muudetud, et teha kindlaks, kas brauseri vahemällu salvestatud ressurss pole saadaval.
5. Kui ressurss on endiselt kehtiv, tagastage vastusekood 304, et öelda brauserile vahemälu kasutama. Vastasel juhul tagastage värskendatud ressurss.

Selle loogikakomplekti järgi saate planeerida oma veebisaidi vahemälu.

Kuidas saan brauserit teavitada ressurssi värskendamast, kui ressurss aegub varakult?

Tavaliselt pole see võimalik, kuna brauser näeb, et ressurss ei ole aegunud ja ei tee taotlust üldse. Kuid seda saab saavutada ressursi URL-i muutmisega. Seetõttu peate ressursi failinimele lisama versiooninumbri või juhusliku sildi. Näiteks style.12.css. See tähendab, et ärge laske brauseril html-faili vahemällu salvestada, vastasel juhul ei esita brauser serverile päringuid enne, kui see aegub.

4. Kriitiline renderdamise tee

Brauser kuvab veebilehe järgmiste sammudega:

1. Töötlege HTML-i märgistust ja looge DOM-puu.
2. Töötlege CSS-i märgistust ja looge CSSOM-puu.
3. Ühendage DOM ja CSSOM renderduspuuks.
4. Paigutus vastavalt renderduspuule, et arvutada iga sõlme geomeetriateave.
5. Joonistage iga sõlm ekraanile.

Kriitilise renderdustee optimeerimine tähendab renderdusprotsessi optimeerimist nii, et veebilehte saaks võimalikult kiiresti renderdada.

css

CSS-failid blokeerivad renderdamise. Pärast seda, kui brauser on loonud DOM-puu, peab ta ootama, kuni CSSOM-puu on valmis. Märgend dokumendi ülaosas, et vältida mittestandardset CSS-i ja võimaldada brauseril CSS-faili võimalikult kiiresti taotleda.

Vältige @import kasutamist css-failides, sest brauser leiab ja laadib imporditud css-i alles pärast seda, kui importi sisaldav fail on laaditud ja kompileeritud. Kaaluge tekstisisese CSS-i kasutamist, mis ei nõua täiendavaid taotlusi ega blokeeri põhisisu renderdamist.

js

Java-skript ei käivitu enne, kui CSSOM on ehitatud. js takistab ka DOM-puu ehitamist. Kui asünkroonimist pole sildis märgitud.

Nüüd saate aru, mis on lehe optimeerimine ja kuidas see on üles ehitatud. Nende protsesside mõistmine aitab teil saidi lehti kiiresti optimeerida, vähendada päringuid ja kiirendada laadimist.

Seda artiklit lugedes:

• CSS-i optimeerimine – 21 võimalust veebisaidi kiirendamiseks
• JS-i ja CSS-i saidi koodi optimeerimine võrgus – üksikasjalik juhend

Täname lugemise eest: SEO HELPER | NICOLA.TOP