Веб-сайттың HTML кодын оңтайландыру - тазалау, қысу, қателерді түзету

Бұл мақаланы тыңдаңыз

Техникалық веб-сайттың HTML кодын оңтайландыру - сайт беті үлгісінің HTML кодын реттеу процесі. Сайттың бастапқы кодын өзгерту (ред.) және оның құрылымы мен өлшемін түзету. Оның айқын мақсаты – кодекс құрамын сапалы жақсарту. Оның көлемін айтарлықтай қысқарту, кодтың жарамдылығын жақсарту. Бұл браузерлерде бетті жүктеу жылдамдығын арттыруға көмектеседі.

HTML - бұл интернеттің негізі. Бұл веб-сайттың негізгі құрылымын құрайтын құжат түрі. HTML болмаса, JavaScript жұмыс істемейді, CSS ештеңені стильдей алмайды және кескіндердің жүктелетін жері болмайды. HTML-дің күші оның әмбебаптығында, негізінен ол басқа файлдарды жүктей алатындықтан, HTML тілінің бірінші бөлігі гипермәтінді білдіреді.

Сыртқы HTML файлдарын жүктеуге, талдауға және жүктеуге көп уақыт кеткенде, пайдаланушы интерфейсі зардап шегуі мүмкін. Бетті жүктеу уақыты артады, пайдаланушылар бетті тастап кетуге бейім болған сайын, соғұрлым ұзақ күтуге тура келеді.

Мақаланың мазмұны:

• Веб-сайт беттерінің HTML кодын техникалық оңтайландыру
• Сайттың бастапқы HTML кодын оңтайландыру, код көлемін азайту
• Қажетсіз HTML тегтері мен стиль файлдарын жою
• Сайттың HTML кодындағы қателерді түзету
• Сайттың мобильді нұсқасының басымдылығын орнатыңыз
• Веб-кэштеуді белсенді пайдаланыңыз
• CDN – біздің заманымыздың жоғары мүмкіндіктері
• HTTP сұрауларын қысқарту
• SEO үшін сайттың HTML кодын оңтайландыру
• Веб-сайттың HTML кодын техникалық оңтайландыру - танымал CMS WordPress плагиндері

Веб-сайт беттерінің HTML кодын техникалық оңтайландыру

HTML кодын оңтайландыруға бағытталған іс-шаралар сайттың жылдамдығын арттыру тұрғысынан мақсатқа сай. Сайттың HTML кодын тазалау және қысу сайт беттерін көрсетуді айтарлықтай жылдамдатуға көмектеседі. Кодтағы көрінетін қателерді жою арқылы сіз HTML құжатыңыздың жарамдылығын жақсартасыз.

Сайттың HTML кодын оңтайландырудың соңғы нәтижесі:

• Танымал браузерлерде веб-сайт беттерін жылдам жүктеу.
• Іздеу боттары арқылы сайт мазмұнын жылдам қарап шығу.
• Таза, жарамды код іздеу жүйелерінің алдында ең жоғары басымдықты сайт болып табылады.
• Сайттың Google және Yandex іздеу жүйелерінің іздеу нәтижелеріндегі рейтингі мен көрінуі айтарлықтай артады.

Сайттың бастапқы HTML кодын оңтайландыру – код көлемін азайту

Ең маңызды әрекет - бет кодын азайту. HTML бастапқы коды ұзын кенепке ұқсайды. Көптеген әртүрлі CSS стильдері код құрылымында әртүрлі жерлерде орналасқан. Кодта қажет емес түсініктемелер, таңбалар, бос орындар және тегтер бар.

Бастапқыда қажетсіз пікірлерден құтылу керек - бұл қосымша және мүлдем қажет емес кейіпкерлер жиынтығы. Браузер және іздеу боттары үшін түсініктемелер ешқандай семантикалық мағынаға ие емес. Оларды жою арқылы сіз беттің салмағын айтарлықтай азайтасыз. Бұл бөлімде құжатты жүктеу жылдамдығын арттырады.

Қажет емес таңбаларды, қосымша (қос) бос орындарды және жол үзілімдерін тазалау. Бұл сайт кодының соңғы құрылымын күрт азайтуға мүмкіндік береді. Осылайша, беттің негізгі салмағын 2,5 - 3 есе азайтуға болады.

Нәтижесінде: бос орындарды қысу және жол үзілімдерін біріктіру, html кодының құрылымы айтарлықтай тығыздалады.

Оңтайландырылған жылдың шағын сегментінің мысалы:

a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-bottom-right ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-позиция-жоғарғы сол жақ ul li.wpfm-title-hidden a:hover.

Көріп отырғаныңыздай, кодтан барлық қажет емес таңбалар, бос орындар және түсініктемелер жойылды. Бұл кодтың бір үзіліссіз жолға созылуына ықпал етеді. Осы құрылымның арқасында парақтың салмағы әлдеқайда аз болады. Сонымен қатар, беттер индекстеледі және боттармен мүмкіндігінше жылдам жүктеледі. Әрине, сайтты оңтайландыру үшін барлық шараларды ескере отырып.

Қажетсіз HTML тегтері мен стиль файлдарын жою

Үлкен бет кодының салмағының ең көп тараған мәселесі пайдаланылмаған CSS стилистикалық файлдары және қажетсіз тегтер болуы мүмкін. Бұл код элементтері де басты бет үлгісінде орналастырылған.

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

Бұл жабылмаған тегтерге де қатысты. Олар ешқандай семантикалық мағынаны алып жүрмейді және бізге қажетті орынды алады. Сайттың көрнекі көрсетілімінде рөлі жоқ стиль файлдары (қажетсіз немесе сынған) код құрылымынан да жойылады.

Сайт беттерін жүктеуді жылдамдату үшін:

1. CSS мәнерлері мен JS сценарийлерін сыртқы файлдарға жылжыту керек;
2. Сайт дизайнының негізгі элементтерін спрайттарда орналастырыңыз, содан кейін оларды стиль кестелеріне қойыңыз;
3. Бет коды қарапайым және оқылатын болуы керек.

Сайттың HTML кодындағы қателерді түзету

Іздеу жүйелері (өте дайын емес) кодтағы қателері бар сайттарға әрекет етеді. Дегенмен, көптеген танымал TRUST ресурстары, тіпті мұндай қателер болса да, TOP нәтижелерінде анық бекітілген. Тіпті танымал Яндекстің негізгі беті validator.w3.org көмегімен тексеріледі, тіпті менің сайтым қателіктерден жоғары.

Жарамдылық қателерінің келесі тізімі бар:

Ескерту: Content-Security-Policy HTTP тақырыбы: Қате мазмұн қауіпсіздік саясаты: Бастапқы тізімде &quot;https://passport.yandex.ru&quot; қайталанатын дереккөз өрнегі бар. Біріншіден басқасының барлығы еленбейді. https://yandex.ru/ Қате: осы контексте div элементінің еншілес элементі ретінде элемент стиліне рұқсат етілмейді. (Осы ішкі ағаштан әрі қарай қателерді басу.) 33-жолдың 17689-бағанынан; 33-жолдың 17695-бағаны дков</div><style.docum>

Қате: div элементіне осы контексте элемент аралығының еншілес элементі ретінде рұқсат етілмейді. (Осы ішкі ағаштан қосымша қателерді басу.) 33-жолдың 18219-бағанынан; 33-жолдың 18260 бағанына pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

Бұл Яндекс іздеу жүйесінің негізгі бетіндегі қателердің ең аз жиынтығы (барлығы шамамен 47).

Менің сайтымның validator.w3.org тексеруі осылай көрінеді:

Қате: src төлсипаты бар сценарий элементінде мәні бос жолдан, JavaScript MIME түрінен немесе модульден басқа нәрсе болатын түр төлсипаты болмауы керек. 6-жолдың 1-бағанынан; 6-жолдың 192-бағанына /скрипт>↩ ↩ ↩ 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

Көріп отырғаныңыздай, аз емес))) - қателер мен ескертулер туралы тек 21 хабарлама. Жұмыс істеу керек нәрсе бар.

Кодтың жарамдылығы веб-сайтты жылжытуда ең жоғары басымдыққа ие. W3C валидаторының қателері мен ескертулерінің көпшілігін түзете отырып, сіз сайтты техникалық оңтайландыруда жақсы табысқа қол жеткізе аласыз.

Сайттың мобильді нұсқасының басымдылығын орнатыңыз

Дәстүрлі түрде бірінші буын веб-сайттары үлкен экранды жұмыс үстелі компьютерлерінде қаралды. Бүгінгі күні адамдардың көпшілігі веб-сайттарға смартфондар, планшеттер және ноутбуктер сияқты мобильді құрылғылардан кіреді. Сондықтан сіздің сайтыңыз мобильді құрылғыларға бейімделуі керек. Бұған қоса, сайтыңыздың барлық аспектілеріне – іздеу, сатып алу себетіне және төлемге – жұмыс үстелі немесе ноутбук компьютері сияқты мобильді құрылғыдан қол жеткізу оңай екеніне көз жеткізуіңіз керек.

Веб-кэштеуді белсенді пайдаланыңыз

Кэштер - браузерлер HTTP арқылы бірдей мазмұнды үнемі сұраудың орнына, жақында қаралған беттерді жылдам жүктеу үшін статикалық файлдардың көшірмелерін сақтайтын уақытша сақтау аймақтары.

Браузерлерге әзірлеушілер жиі өзгертпейтін веб-бет элементтерін кэштеу туралы нұсқау беруге болады. HTTP жауап тақырыптарында хост сервері кэштеу нұсқауларын қамтиды. Белгілі бір беттерді жиі пайдаланатындар жылдам жүктеу уақытының пайдасын көреді, себебі сервер шолғышқа аз деректерді жібереді.

CDN – біздің заманымыздың жоғары мүмкіндіктері

Мазмұнды жеткізу желілері (CDN) дүние жүзіндегі көптеген әртүрлі орындардағы мазмұнды кэштеу арқылы веб-сайтты жүктеу жылдамдығын жақсартады. CDN кэш серверлері әдетте бастапқы немесе хост серверіне қарағанда соңғы пайдаланушыларға жақынырақ орналасады.

Жүздеген миль қашықтықта орналасқан және көптеген автономды желілерге қосылған хостинг серверіне тікелей қосылудың орнына, мазмұн сұраулары CDN сервері арқылы жіберіледі. CDN серверлері веб-сайттардың жұмысын айтарлықтай жақсарта алады.

HTTP сұрауларын қысқарту

Әдетте, браузерлер кескіндер, сценарийлер және CSS файлдары сияқты әртүрлі бет ресурстарына қол жеткізу үшін бірнеше HTTP сұрауларын жасайды. Бір сайт жүздеген сұрауларды қажет етуі мүмкін. Веб-шолғыш пен әрбір сұрау үшін ресурсты орналастыратын сервер арасында екі жақты алмасу бар, бұл бетті жүктеу уақытын арттырады.

Сондай-ақ, хосттардың бірі жұмыс істемей қалса, веб-бет тез жүктелмеуі мүмкін. Осы ықтимал мәселелерге байланысты әрбір бетте жүктелген активтердің ең аз мөлшері болуы керек. Жылдамдық сынақтары сонымен қатар қай HTTP сұраулары көп уақыт алатынын көрсетеді. Суреттер беттің баяу жүктелуіне себеп болса, әзірлеушілер кескінді орналастырудың жылдамырақ шешімін іздеуі мүмкін.

SEO үшін сайттың HTML кодын оңтайландыру

HTML кодын оңтайландыру тұтастай алғанда сайттың көптеген көрсеткіштеріне пайдалы әсер етеді. Таза, оңтайландырылған құрылымның арқасында сайтты индекстеу және жүктеу жылдамдығы айтарлықтай жақсарды. Іздеу жүйелерінің көз алдында сайт жақсарады, сондықтан іздеу нәтижелерінде көбірек көрінеді.
Іздеу жүйелері сайттың не туралы екенін анықтау үшін бастапқы кодты пайдаланады. Веб-беттегі кез келген мазмұн іздеу жүйелері оны түсінуі үшін HTML тілінде кодталуы керек. Бастапқы кодтағы SEO компоненттеріне тақырып тегі, мета сипаттама, H1 тақырып тегі, ішкі сілтемелер, якорлық мәтіндер, nofollow сілтемелері, балама сурет тегтері және канондық тегтер кіреді. Бастапқы кодты көру үшін веб-бетті ашып, «Ctrl + U» пернелерін басыңыз. Міне, веб-сайтыңыздың бастапқы кодын оңтайландыру үшін орындауға болатын бірнеше қадамдар.

Тақырып тегін оңтайландыру

Тақырып тегі сіздің сайтыңыздың іздеу жүйелеріндегі рейтингіне айтарлықтай әсер етеді. Бұл Google-ға сіздің веб-сайтыңыздың немесе блог бетіңіздің берілген сұрауға қаншалықты сәйкес келетінін анықтауға көмектеседі. Жақсы жазылған тақырып тегі сіздің сайтыңызды басқалардан ерекшелендіреді және іздеу жүйесін оңай тартады.

• Барлық веб-беттеріңізде беттерді тамаша сипаттайтын бірегей тақырып тегтері бар екеніне көз жеткізіңіз.
• Тақырып тегтерінің оңтайлы ұзындығын қадағалаңыз, олар іздеу нәтижелерінде кесіліп қалмайды. 50-60 таңба жеткілікті жақсы жұмыс істейді.
• Тақырыптарда кілт сөздерді пайдаланбағаныңызға көз жеткізіңіз. Оның орнына бір немесе екі мағыналы кілт сөзді қосыңыз.

Бірегей мета сипаттамалар

Мета сипаттама – пайдаланушылар мен іздеу жүйелерінің игілігі үшін веб-беттің мазмұнын жинақтайтын HTML элементі. Ол тақырыптың астындағы іздеу нәтижелерінде үзінді ретінде пайда болады. Мета сипаттамалардың идеясы - оқырмандарға сіздің парағыңыз не ұсынатыны туралы нақты түсінік беру.

• Ұзақ сипаттамалардан аулақ болыңыз. Идеал ұзындық 130 мен 156 таңбадан тұратын сипаттама болып табылады.
• Сипаттамада сәйкес кілт сөздерді пайдаланыңыз.
• Мүмкін болса, әрекетке шақыруды қосыңыз.

Құрылымдық деректермен жұмыс

Құрылымдық деректердің мақсаты - іздеу нәтижелерінде таңдаулы үзінді ету үшін үзіндіге қосымша мәліметтер қосу. Жоғары рейтингке жету мүмкіндігіңізді арттыру үшін код дұрыс белгіленуі керек. Schema.org - іздеу жүйелеріне арналған құрылымдық деректер пішіндеріне қатысты ең танымал.

• div тегінде "элемент ауқымын" пайдалану іздеу жүйелеріне бір бөлімде ұсынылған барлық ақпарат бір тақырыпқа қатысты екенін білуге мүмкіндік береді.
• Элемент түрі термині әрбір бөлімнің тақырыбын анықтайды.
• «item prop» бөлім туралы қосымша ақпаратты хабарлайды

H1 тегі

H1 тегі мәтін бөлігін беттің негізгі тақырыбы ретінде белгілеу үшін қолданылады. Мұнда тізімделген мазмұн беттердің не туралы екенін қысқаша сипаттауы керек. H1 тегтері ақпаратты және тартымды болуы керек, бұл пайдаланушыны мазмұнды оқуды жалғастыруға шақырады.

• Ең дұрысы, ол 20 мен 70 таңбадан тұруы керек.
• Пайдаланушы ниетін ескеріңіз
• Іздеу өнімділігі мен веб-трафикті жақсарту үшін негізгі кілт сөзді, жақсырақ ұзын кілт сөздерді қосыңыз.

Сондай-ақ H2-ден H6-ға дейінгі тақырыпшаларды қосуға болады. Оқуды жақсарту үшін тақырыпшадан кейінгі мәтін тым ұзын емес, жақсырақ 250 және 300 сөз арасында екеніне көз жеткізіңіз.

Суреттерге арналған балама мәтін

Электрондық коммерция үшін, сондай-ақ басқа веб-сайттар үшін alt тегі маңызды HTML тегі болып табылады. Ол іздеу жүйесіне суреттің не туралы екенін айтады. Кескін файлын жүктеу мүмкін болмаса, кескіннің орнына балама мәтін көрсетіледі. Тиісті балама мәтіні бар жақсы кескіндер беттерді тексеріп шығушыларға, сондай-ақ пайдаланушыларға тартымды етеді және пайдаланушы тәжірибесін (UX) жақсартады.

• Сипаттаманың қысқа және нақты екеніне көз жеткізіңіз.
• Кілт сөздерді пайдаланыңыз, бірақ оларды толтырмаңыз
• Сәндік мақсатта пайдаланылатын кескіндерді емес, брендке қатысты суреттерді белгілеңіз.

Канондық URL тегі

Бұл қайталанатын мазмұнды анықтауға арналған қуатты құрал. Канондық URL тегтері негізінен электрондық коммерция сайттары үшін пайдаланылады, себебі өнімдеріңіз үшін әртүрлі беттер жасау қажет болуы мүмкін.

Бұл тегтерді әрбір бет нұсқасына қосу іздеу жүйелеріне ұқсас URL мекенжайлары бар беттер тобынан негізгі/бастапқы бетті тануға көмектеседі.

Негізгі қорытындылар

• Қарапайым және тиімді нәрселерді сақтауға тырысыңыз. Веб-сайт тым көп сәнді элементтермен толтырылмауы керек. Бұл тек сіздің брендіңіз бен тұтынушыларыңыздың көзқарасы үшін өзекті және тиімді болуы керек. Бұған қажетті веб-мүмкіндіктерге назар аудару арқылы қол жеткізуге болады.
• Әртүрлі веб элементтері үшін оңтайландыру стратегияларын зерттеңіз. Әртүрлі веб элементтері әртүрлі оңтайландыру стратегияларын қажет етеді. Веб-сайтыңыздың мүмкіндіктері тиімді жұмыс істеуі үшін осы өзгерістерді барлық элементтерге қосқаныңызға көз жеткізіңіз.

Веб-сайттың HTML кодын техникалық оңтайландыру - танымал CMS WordPress плагиндері

Бірнеше WordPress плагиндерін жылдам қарастырайық. Бұл WordPress CMS жүйесіндегі HTML кодын тазалауға және қысуға көмектеседі. Осы плагиндердің арқасында сіз сайттың жылдамдығын күрт арттыра аласыз, сондай-ақ сайт кодынан барлық қажетсіз заттарды тазалай аласыз.

Плагинді автоматты түрде оңтайландыру:

• Сайттың HTML кодын оңтайландыру және қысу (бос орындар мен түсініктемелерді жою).
• CSS және JS оңтайландыру - стильдерді бір файлға біріктіруге және оларды орналастыруға мүмкіндік береді төменгі деректеме сайты, сондай-ақ JS сценарийлері.
• Қосымша оңтайландыру опциялары бар.

Плагинді тазалау:

• Көптеген плагиндердің функционалдығын біріктіреді және өшіруге болатын модульдерден тұрады.
• Веб-сайт жылдамдығын арттыру үшін тамаша.
• WordPress-тегі кейбір сценарийлер мен қажет емес мүмкіндіктерді өшіреді.
• Оның HTML коды, CSS және CMS-тің JS файлдарымен жұмыс істеуге арналған кең ауқымды құралдары бар.

Осы плагиндерді біріктіру арқылы сіз WordPress сайтының тамаша оңтайландыруына қол жеткізесіз. Оларды міндетті түрде қолданыңыз, олар сізге өте пайдалы болатынына сенімдімін.

Осы мақаланы оқу:

• Htaccess файлы - жаңадан бастаушыларға арналған .htaccess файл нұсқаулығын жасау
• Gzip қысу js / css / html сайтын жеделдету - .htaccess жүйесінде қалай қосуға болады

Оқығаныңыз үшін рахмет: SEO HELPER | NICOLA.TOP