Kodulehe HTML koodi optimeerimine – puhastamine, tihendamine, vigade parandamine

Kuulake seda artiklit

Tehniline veebisaidi HTML-koodi optimeerimine - saidi lehe malli HTML-koodi kohandamise protsess. Saidi lähtekoodi muutmine (toim.) ning selle struktuuri ja suuruse parandamine. Mille selge eesmärk on koodi koostise kvalitatiivne täiustamine. Selle mahu märkimisväärne vähendamine, parandades koodi kehtivust. Mis aitab suurendada lehtede laadimise kiirust brauserites.

HTML on veebi selgroog. See on seda tüüpi dokument, mis loob veebisaidi põhistruktuuri. Ilma HTML-ita ei töötaks JavaScript, CSS ei saaks midagi stiilida ja pilte poleks kuhugi laadida. HTML-i tugevus seisneb selle mitmekülgsuses, peamiselt seetõttu, et see suudab laadida muid faile, mida tähistab hüpertekst, HTML-i esimene osa.

Kui väliste HTML-failide laadimine, sõelumine ja laadimine võtab kaua aega, võib kasutajaliides kannatada. Lehe laadimisaeg pikeneb, mida rohkem kasutajad kipuvad lehest loobuma, seda kauem peavad nad ootama.

Artikli sisu:

• Veebilehtede HTML koodi tehniline optimeerimine
• Saidi lähtekoodi HTML-koodi optimeerimine, vähendades koodi hulka
• Ebavajalike HTML-märgendite ja stiilifailide eemaldamine
• Vigade parandamine saidi HTML-koodis
• Määrake saidi mobiiliversiooni prioriteet
• Kasutage aktiivselt veebi vahemällu
• CDN - meie aja suured võimalused
• Lühendage HTTP-päringuid
• Oma saidi HTML-koodi optimeerimine SEO jaoks
• Kodulehe HTML koodi tehniline optimeerimine – populaarsed CMS WordPressi pluginad

Veebilehtede HTML koodi tehniline optimeerimine

HTML koodi optimeerimisele suunatud tegevused on otstarbekad saidi kiiruse tõstmise seisukohalt. Saidi HTML-koodi puhastamine ja tihendamine aitab oluliselt kiirendada saidi lehtede kuvamist. Kõrvaldades koodis nähtavad vead, parandate oma HTML-dokumendi kehtivust.

Saidi HTML-koodi optimeerimise lõpptulemus on:

• Veebisaidi lehtede kohene laadimine populaarsetes brauserites.
• Saidi sisu kiire roomamine otsingurobotite abil.
• Puhas ja kehtiv kood on otsingumootorite silmis kõrgeima prioriteediga sait.
• Saidi asetus ja nähtavus Google'i ja Yandexi otsingumootorite otsingutulemustes tõuseb oluliselt.

Saidi lähtekoodi HTML-koodi optimeerimine – koodihulga vähendamine

Kõige olulisem toiming on lehe koodi vähendamine. HTML-i lähtekood näeb välja nagu pikk lõuend. Paljud erinevad CSS-stiilid asuvad koodistruktuuri erinevates kohtades. Koodis on tarbetuid kommentaare, märke, tühikuid ja silte.

Alguses tuleb vabaneda tarbetutest kommentaaridest – see on täiendav ja täiesti ebavajalik tegelaste komplekt. Brauseri ja otsingurobotite jaoks ei ole kommentaaridel semantilist tähendust. Nende eemaldamisega vähendate oluliselt lehe kaalu. Mis sektsioonis suurendab dokumendi laadimise kiirust.

Mittevajalike märkide, täiendavate (topelt)tühikute ja reavahede puhastamine. See võimaldab teil saidi koodi lõplikku struktuuri drastiliselt vähendada. Seega saab lehe põhikaalu vähendada 2,5 - 3 korda.

Tänu: tühikute tihendamisele ja reavahede kombineerimisele tiheneb oluliselt html koodi struktuur.

Näide optimeeritud aasta väikesest lõigust:

a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-bottom-right ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-top-left ul li.wpfm-title-hidden a:hover.

Nagu näete, on koodist eemaldatud kõik mittevajalikud märgid, tühikud ja kommentaarid. See aitab kaasa koodi venitamisele justkui üheks pidevaks reaks. Tänu sellele struktuurile muutub lehe kaal palju väiksemaks. Samal ajal indekseerivad ja laadivad robotid lehed võimalikult kiiresti. Loomulikult tuleb järgida kõiki saidi optimeerimise meetmeid.

Ebavajalike HTML-märgendite ja stiilifailide eemaldamine

Kõige tavalisem probleem suure lehekoodi kaaluga võib olla kasutamata CSS-i stiilifailid ja mittevajalikud sildid. Need koodielemendid paigutatakse ka põhilehe malli.

Näiteks: <b> ,<div>, <p>, <span> <style=”левые стилистические файлы CSS”</span>.

See kehtib ka sulgemata siltide kohta. Nad ei kanna mingit semantilist tähendust ja võtavad koha, mida vajame. Koodistruktuurist eemaldatakse ka stiilifailid, millel pole saidi visuaalses esituses rolli (ebavajalikud või katkised).

Saidi lehtede laadimise kiirendamiseks tehke järgmist.

1. Peate teisaldama CSS-stiile ja JS-skripte välistesse failidesse;
2. Korraldage saidi kujunduse põhielemendid spraitidena, seejärel asetage need stiililehtedesse;
3. Lehe kood peaks olema lihtne ja loetav.

Vigade parandamine saidi HTML-koodis

Otsingumootorid (mitte väga meelsasti) reageerivad vigadega koodi saitidele. Kuid paljud populaarsed TRUST-i ressursid on isegi selliste vigade korral TOP-i tulemustes selgelt fikseeritud. Isegi populaarse Yandexi avalehte kontrollitakse saidi validator.w3.org abil, isegi minu sait on vigade osas parem.

Sellel on järgmine kehtivusvigade loend:

Hoiatus: Content-Security-Policy HTTP päis: halb sisu turbepoliitika: allikaloend sisaldab dubleerivat lähteavaldist &quot;https://passport.yandex.ru&quot;. Kõik, välja arvatud esimene juhtum, jäetakse tähelepanuta. https://yandex.ru/ Viga: elemendi stiil pole selles kontekstis elemendi div alamna lubatud. (Selle alampuu edasised vead maha surudes.) 33. realt, veerus 17689; reale 33 veergu 17695 dkov</div><style.docum>

Viga: element div pole selles kontekstis elemendi ulatuse alamna lubatud. (Selle alampuu edasised vead maha surudes.) 33. realt, veerus 18219; reale 33, veergu 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

See on minimaalne vigade kogum, mis Yandexi otsingumootori avalehel on (kokku on neid umbes 47).

Ja minu saidi validator.w3.org kontroll näeb välja selline:

Viga: src-atribuudiga skriptielemendil ei tohi olla tüübiatribuuti, mille väärtus on midagi muud kui tühi string, JavaScripti MIME tüüp või moodul. 6. realt 1. veerust; reale 6, veergu 192 /skript>↩ ↩ ↩ style type="text/css"     

Error: Bad value pmdelayedscript for attribute type on element script: Subtype missing.


From line 123, column 1; to line 123, column 140

25.jpg' >↩<script type="pmdelayedscript" data-cfasync="false" data-no-optimize="1" data-no-defer="1" data-no-minify="1" data-rocketlazyloadscript="1"docume

Nagu näete, mitte vähe))) - ainult 21 teadet vigade ja hoiatuste kohta. On, mille kallal tööd teha.

Koodi kehtivus on veebisaidi reklaamimisel esmatähtis. Parandades enamiku W3C validaatori vigadest ja hoiatustest, võite saavutada head edu saidi tehnilisel optimeerimisel.

Määrake saidi mobiiliversiooni prioriteet

Traditsiooniliselt vaadati esimese põlvkonna veebisaite suure ekraaniga lauaarvutites. Tänapäeval külastab enamik inimesi veebisaite mobiilseadmetest, nagu nutitelefonid, tahvelarvutid ja sülearvutid. Seetõttu peab teie sait olema mobiilseadmete jaoks kohandatud. Lisaks peate tagama, et kõik saidi aspektid – otsing, ostukorvi ja kassasse maksmine – on mobiilseadmest sama hõlpsasti juurdepääsetavad kui laua- või sülearvutist.

Kasutage aktiivselt veebi vahemällu

Vahemälud on ajutised salvestusalad, kuhu brauserid salvestavad staatiliste failide koopiad, et laadida kiiremini hiljuti vaadatud lehti, mitte nõuda pidevalt sama sisu HTTP kaudu.

Brausereid saab juhendada vahemällu salvestama veebilehe elemente, mida arendajad sageli ei muuda. HTTP vastuse päistes sisaldab hostserver vahemällu salvestamise juhiseid. Need, kes kasutavad teatud lehti sageli, saavad kasu kiirematest laadimisaegadest, kuna server saadab brauserisse vähem andmeid.

CDN - meie aja suured võimalused

Sisu edastamise võrgud (CDN-id) parandavad veebisaidi laadimise kiirust, salvestades sisu vahemällu paljudes erinevates kohtades üle maailma. CDN-i vahemäluserverid asuvad tavaliselt lõppkasutajatele lähemal kui lähte- või hostserver.

Selle asemel, et luua otseühendus sadade miilide kaugusel asuva hostiserveriga ja olla ühendatud paljude autonoomsete võrkudega, saadetakse sisupäringud CDN-serveri kaudu. CDN-serverid võivad veebisaitide jõudlust oluliselt parandada.

Lühendage HTTP-päringuid

Tavaliselt teevad brauserid mitu HTTP-päringut, et pääseda juurde erinevatele leheressurssidele, nagu pildid, skriptid ja CSS-failid. Üks sait võib nõuda sadu taotlusi. Iga päringu puhul toimub veebibrauseri ja ressurssi majutava serveri vahel kahesuunaline vahetus, mis pikendab lehe laadimisaega.

Samuti ei pruugi veebileht kiiresti laadida, kui üks hostidest kaob. Nende võimalike probleemide tõttu peaks igal lehel olema laaditud minimaalne hulk varasid. Kiirustestid näitavad ka, millised HTTP-päringud võtavad kõige rohkem aega. Arendajad võivad otsida kiiremat pildimajutuslahendust, kui pildid põhjustavad lehe aeglast laadimist.

Oma saidi HTML-koodi optimeerimine SEO jaoks

HTML koodi optimeerimine avaldab kasulikku mõju enamikule saidi kui terviku näitajatele. Tänu puhtale optimeeritud struktuurile on saidi indekseerimise ja laadimise kiirus oluliselt paranenud. Otsingumootorite silmis muutub sait paremaks ja seega ka otsingutulemustes paremini nähtavaks.
Otsingumootorid kasutavad lähtekoodi teie saidi sisu väljaselgitamiseks. Kogu veebilehe sisu peab olema kodeeritud HTML-i, et otsingumootorid saaksid sellest aru. Lähtekoodi SEO komponendid hõlmavad pealkirja märgendit, metakirjeldust, H1 pealkirja silti, sisemisi linke, ankurtekste, nofollow linke, alternatiivsete kujutiste silte ja kanoonilisi silte. Lähtekoodi vaatamiseks avage veebileht ja vajutage "Ctrl + U". Siin on mõned sammud, mida saate oma veebisaidi lähtekoodi optimeerimiseks järgida.

Pealkirjasildi optimeerimine

Pealkirjasilt mõjutab oluliselt teie saidi asetust otsingumootorites. See aitab Google'il määrata, kui hästi teie veebi- või ajaveebileht antud päringule vastab. Hästi kirjutatud pealkirjamärgend võib muuta teie saidi teistest silmapaistvaks ja meelitada otsingumootorit hõlpsalt ligi.

• Veenduge, et kõigil teie veebilehtedel oleksid ainulaadsed pealkirjasildid, mis kirjeldavad lehti ideaalselt.
• Järgige pealkirjamärgendite optimaalset pikkust, et need otsingutulemustes ära ei katkeks. 50-60 tähemärki töötab piisavalt hästi.
• Veenduge, et te ei kasuta pealkirjades märksõnu. Selle asemel lisage üks või kaks tähenduslikku märksõna.

Unikaalsed metakirjeldused

Metakirjeldus on HTML-i element, mis võtab kasutajate ja otsingumootorite huvides kokku veebilehe sisu. See kuvatakse pealkirja all olevates otsingutulemustes katkendina. Metakirjelduste idee on anda teie lugejatele täpne ettekujutus teie lehe pakutavast.

• Vältige pikki kirjeldusi. Ideaalne pikkus on kirjeldus, mis sisaldab 130–156 tähemärki.
• Kasutage kirjelduses asjakohaseid märksõnu.
• Võimaluse korral lisage üleskutse tegevusele.

Töötamine struktureeritud andmetega

Struktureeritud andmete eesmärk on lisada teie koodilõigule rohkem üksikasju, et muuta see otsingutulemustes esiletoodud katkendiks. Kood peab olema korralikult märgistatud, et suurendada teie võimalusi kõrgemale kohale jõuda. Schema.org on otsingumootorite struktureeritud andmevormide osas kõige populaarsem.

• Elementide ulatuse kasutamine div-sildis annab otsingumootoritele teada, et kogu ühes jaotises esitatud teave viitab samale teemale.
• Mõiste elemendi tüüp määratleb iga jaotise teema.
• "Item prop" annab jaotise kohta lisateavet

H1 silt

Märgendit H1 kasutatakse tekstiosa määramiseks teie lehe peamiseks pealkirjaks. Siin loetletud sisu peaks lühidalt kirjeldama lehtede sisu. H1-sildid peaksid olema informatiivsed ja kaasahaaravad, julgustades kasutajat teie sisu lugemist jätkama.

• Ideaalis peaks see sisaldama 20–70 tähemärki.
• Võtke arvesse kasutaja kavatsusi
• Lisage oma peamine märksõna, eelistatavalt pika sabaga märksõnad, et parandada otsingu toimivust ja veebiliiklust.

Samuti saate lisada alampealkirju alates H2 kuni H6. Loetavuse parandamiseks veenduge, et alampealkirjale järgnev tekst ei oleks liiga pikk, eelistatavalt 250–300 sõna.

Alternatiivne tekst piltidele

Nii e-kaubanduse kui ka muude veebisaitide jaoks on alt-märgend oluline HTML-märgend. See ütleb otsingumootorile, millest pilt räägib. Kui pildifaili ei saa laadida, kuvatakse pildi asemel alternatiivtekst. Head pildid koos õige alternatiivtekstiga muudavad lehed atraktiivseks nii roomajatele kui ka kasutajatele ning parandavad kasutajakogemust (UX).

• Veenduge, et kirjeldus oleks lühike ja konkreetne.
• Kasutage märksõnu, kuid ärge toppige neid
• Märgistage oma kaubamärgiga seotud pilte, mitte dekoratiivsetel eesmärkidel kasutatavaid pilte.

Kanooniline URL-i märgend

See on võimas tööriist dubleeriva sisu tuvastamiseks. Kanoonilisi URL-i märgendeid kasutatakse peamiselt e-kaubanduse saitide jaoks, kuna teil võib tekkida vajadus luua oma toodete jaoks erinevad lehed.

Nende siltide lisamine igale lehevariatsioonile aitab otsingumootoritel ära tunda sarnaste URL-idega lehtede rühma põhi-/lähtelehe.

Peamised järeldused

• Püüdke hoida asjad lihtsad ja tõhusad. Veebisait ei tohiks olla täidetud liiga paljude väljamõeldud elementidega. See peab lihtsalt olema asjakohane ja tõhus teie brändi ja klientide nägemuse jaoks. Saate seda saavutada, keskendudes lihtsalt vajalikele veebifunktsioonidele.
• Tutvuge erinevate veebielementide optimeerimisstrateegiatega. Erinevad veebielemendid nõuavad erinevaid optimeerimisstrateegiaid. Veenduge, et lisate need muudatused kõikidesse elementidesse, et teie veebisaidi funktsioonid töötaksid tõhusalt.

Kodulehe HTML koodi tehniline optimeerimine – populaarsed CMS WordPressi pluginad

Heidame kiire pilgu paarile WordPressi pistikprogrammile. See aitab teil WordPressi CMS-i HTML-koodi puhastada ja tihendada. Tänu nendele pistikprogrammidele saate drastiliselt suurendada saidi kiirust ja puhastada saidi koodist kõik mittevajalikud.

Plugina automaatne optimeerimine:

• Saidi HTML-koodi optimeerimine ja tihendamine (tühikute ja kommentaaride eemaldamine).
• CSS-i ja JS-i optimeerimine – võimaldab kombineerida stiile ühte faili ja paigutada need sinna jalus saiti, aga ka js-skripte.
• Sellel on täiendavad optimeerimisvõimalused.

Clearfy plugin:

• Ühendab paljude pistikprogrammide funktsionaalsust ja koosneb moodulitest, mida saab keelata.
• Suurepärane veebisaidi kiiruse suurendamiseks.
• Keelab WordPressis mõned skriptid ja mittevajalikud funktsioonid.
• Sellel on lai valik tööriistu teie CMS-i HTML-koodi, CSS- ja JS-failidega töötamiseks.

Neid pistikprogramme kombineerides saavutate suurepärase WordPressi saidi optimeerimise. Kasutage neid kindlasti, olen kindel, et need on teile väga kasulikud.

Seda artiklit lugedes:

• Htaccess-fail – kuidas luua .htaccess-faili juhend algajatele
• Gzip-tihenduse js / css / html saidi kiirendus – kuidas lubada failis .htaccess

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