Veb-sayt HTML kodini optimallashtirish - tozalash, siqish, xatolarni tuzatish

Ushbu maqolani tinglang

Texnik Veb-sayt HTML kodini optimallashtirish - sayt sahifasi shablonining HTML kodini sozlash jarayoni. Saytning dastlabki kodini o'zgartirish (tahrir) va uning tuzilishi va hajmini tuzatish. Uning aniq maqsadi kod tarkibini sifat jihatidan yaxshilashdir. Uning hajmini sezilarli darajada kamaytirish, kodning haqiqiyligini yaxshilash. Bu brauzerlarda sahifalarni yuklash tezligini oshirishga yordam beradi.

HTML vebning asosidir. Bu veb-saytning asosiy tuzilishini yaratadigan hujjat turi. HTML bo'lmasa, JavaScript ishlamaydi, CSS hech narsani uslublay olmaydi va rasmlarni yuklash uchun joy bo'lmaydi. HTMLning kuchi uning ko'p qirraliligidadir, asosan u boshqa fayllarni yuklay oladi, ya'ni HTMLning birinchi qismi bo'lgan gipermatn nimani anglatadi.

Tashqi HTML fayllarni yuklash, tahlil qilish va yuklash uchun uzoq vaqt kerak bo'lsa, foydalanuvchi interfeysi zarar ko'rishi mumkin. Sahifani yuklash vaqti ko'payadi, foydalanuvchilar sahifani tark etishga moyil bo'lsa, ular shunchalik uzoq kutishlari kerak.

Maqolaning mazmuni:

• Veb-sayt sahifalarining HTML kodini texnik optimallashtirish
• Saytning dastlabki HTML kodini optimallashtirish, kod miqdorini kamaytirish
• Keraksiz HTML teglari va uslub fayllarini olib tashlash
• Saytning HTML kodidagi xatolarni tuzatish
• Saytning mobil versiyasining ustuvorligini belgilang
• Veb keshlashdan faol foydalaning
• CDN - bizning zamonamizning yuqori imkoniyatlari
• HTTP so'rovlarini qisqartiring
• SEO uchun saytingizning HTML kodini optimallashtirish
• Veb-sayt HTML kodini texnik optimallashtirish - mashhur CMS WordPress plaginlari

Veb-sayt sahifalarining HTML kodini texnik optimallashtirish

HTML kodini optimallashtirishga qaratilgan tadbirlar sayt tezligini oshirish nuqtai nazaridan maqsadga muvofiqdir. Saytning HTML kodini tozalash va siqish sayt sahifalarini ko'rsatishni sezilarli darajada tezlashtirishga yordam beradi. Koddagi ko'rinadigan xatolarni bartaraf etish orqali siz HTML hujjatingizning haqiqiyligini yaxshilaysiz.

Saytning HTML kodini optimallashtirishning yakuniy natijasi quyidagicha bo'ladi:

• Mashhur brauzerlarda veb-sayt sahifalarini bir zumda yuklash.
• Qidiruv botlari tomonidan sayt tarkibini tezda skanerlash.
• Toza, yaroqli kod qidiruv tizimlari nazarida eng ustuvor sayt hisoblanadi.
• Google va Yandex qidiruv tizimlarining qidiruv natijalarida saytning reytingi va ko'rinishi sezilarli darajada oshadi.

Saytning dastlabki HTML kodini optimallashtirish - kod miqdorini kamaytirish

Eng muhim harakat sahifa kodini kamaytirishdir. HTML manba kodi uzun tuvalga o'xshaydi. Ko'p turli xil CSS uslublari kod tuzilishining turli joylarida joylashgan. Kodda keraksiz izohlar, belgilar, bo'shliqlar va teglar mavjud.

Boshida siz keraksiz sharhlardan xalos bo'lishingiz kerak - bu qo'shimcha va mutlaqo keraksiz belgilar to'plami. Brauzer va qidiruv botlari uchun sharhlar semantik ma'noga ega emas. Ularni olib tashlash orqali siz sahifaning og'irligini sezilarli darajada kamaytirasiz. Hujjatni yuklash tezligini kupeda oshiradi.

Keraksiz belgilar, qo'shimcha (ikki marta) bo'shliqlar va qatorlarni tozalash. Bu sizga sayt kodining yakuniy tuzilishini keskin qisqartirish imkonini beradi. Shunday qilib, sahifaning asosiy og'irligi 2,5 - 3 baravar kamayishi mumkin.

Natijada: bo'shliqlarni siqish va qatorlarni birlashtirish, html kodining tuzilishi sezilarli darajada siqiladi.

Optimallashtirilgan yilning kichik segmentiga misol:

a: hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-past-o'ng ul li a:hover .wpfm-icon-block, .wpfm-template-1 .wpfm-position-tepa-chap ul li.wpfm-title-hidden a:hover.

Ko'rib turganingizdek, koddan barcha keraksiz belgilar, bo'shliqlar va sharhlar olib tashlandi. Bu kodning uzluksiz bir qatorga cho'zilishiga yordam beradi. Ushbu tuzilish tufayli sahifaning og'irligi ancha kamayadi. Shu bilan birga, sahifalar imkon qadar tezroq botlar tomonidan indekslanadi va yuklanadi. Albatta, saytni optimallashtirish uchun barcha choralarni hisobga olgan holda.

Keraksiz HTML teglari va uslub fayllarini olib tashlash

Katta sahifa kodining og'irligining eng keng tarqalgan muammosi foydalanilmagan CSS stilistik fayllari va keraksiz teglar bo'lishi mumkin. Ushbu kod elementlari asosiy sahifa shablonida ham joylashtirilgan.

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

Bu yopilmagan teglar uchun ham amal qiladi. Ular hech qanday semantik ma'noga ega emas va bizga kerak bo'lgan joyni egallaydi. Saytning vizual taqdimotida roli bo'lmagan (keraksiz yoki buzilgan) uslub fayllari ham kod tuzilmasidan olib tashlanadi.

Sayt sahifalarini yuklashni tezlashtirish uchun:

1. CSS uslublari va JS skriptlarini tashqi fayllarga ko'chirishingiz kerak;
2. Sayt dizaynining asosiy elementlarini spritlarda joylashtiring, so'ngra ularni uslublar jadvallariga qo'ying;
3. Sahifa kodi oddiy va o'qilishi mumkin bo'lishi kerak.

Saytning HTML kodidagi xatolarni tuzatish

Qidiruv mexanizmlari (juda tayyor emas) koddagi xatolarga ega saytlarga munosabat bildirishadi. Biroq, ko'plab mashhur TRUST resurslari, hatto bunday xatolar bilan ham, TOP natijalarida aniq qayd etilgan. Hatto mashhur Yandex-ning asosiy sahifasi validator.w3.org yordamida tekshiriladi, hatto mening saytim xatolardan ustundir.

Quyidagi haqiqiylik xatolar ro'yxati mavjud:

Ogohlantirish: Content-Security-Policy HTTP sarlavhasi: Noto&#039;g&#039;ri kontent xavfsizligi siyosati: Manbalar ro&#039;yxatida &quot;https://passport.yandex.ru&quot; ikki nusxadagi manba ifodasi mavjud. Birinchi holatdan tashqari hammasi e&#039;tiborga olinmaydi. https://yandex.ru/ Xato: Ushbu kontekstda div elementining asosiy elementi sifatida element uslubiga ruxsat berilmagan. (Ushbu kichik daraxtdan keyingi xatolarni bostirish.) 33-satr, 17689-ustundan; 33-qator, 17695 dkov ustuniga</div><style.docum>

Xato: div elementiga ushbu kontekstda element oralig‘ining bolasi sifatida ruxsat berilmagan. (Ushbu kichik daraxtdan keyingi xatolarni bostirish.) 33-satr, 18219-ustundan; 33-qator, 18260-ustun pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

Bu Yandex qidiruv tizimining asosiy sahifasida mavjud bo'lgan minimal xatolar to'plami (jami 47 taga yaqin).

Va mening saytimning validator.w3.org tekshiruvi shunday ko'rinadi:

Xato: src atributiga ega boʻlgan skript elementi qiymati boʻsh satr, JavaScript MIME turi yoki moduldan boshqa narsa boʻlgan tip atributiga ega boʻlmasligi kerak. 6-qatordan 1-ustun; 6-qator, 192-ustun /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

Ko'rib turganingizdek, bir nechta emas))) - xatolar va ogohlantirishlar haqida faqat 21 ta xabarnoma. Ishlash kerak bo'lgan narsa bor.

Kodning amal qilish muddati veb-saytni reklama qilishda birinchi o'rinda turadi. W3C validatorining ko'pgina xatolari va ogohlantirishlarini tuzatib, siz saytni texnik optimallashtirishda yaxshi muvaffaqiyatlarga erishishingiz mumkin.

Saytning mobil versiyasining ustuvorligini belgilang

An'anaga ko'ra, birinchi avlod veb-saytlari katta ekranli ish stoli kompyuterlarida ko'rilgan. Bugungi kunda ko'pchilik smartfonlar, planshetlar va noutbuklar kabi mobil qurilmalardan veb-saytlarga tashrif buyurishadi. Shuning uchun saytingiz mobil qurilmalar uchun moslashtirilgan bo'lishi kerak. Bundan tashqari, siz saytingizning har bir jihati - qidiruv, xarid qilish savatchasi va to'lovni amalga oshirish - ish stoli yoki noutbukdan bo'lgani kabi mobil qurilmadan ham oson kirishiga ishonch hosil qilishingiz kerak.

Veb keshlashdan faol foydalaning

Keshlar vaqtinchalik saqlash joylari bo'lib, brauzerlar HTTP orqali doimiy ravishda bir xil tarkibni so'rash o'rniga yaqinda ko'rilgan sahifalarni tezroq yuklash uchun statik fayllar nusxalarini saqlaydi.

Brauzerlarga veb-sahifa elementlarini keshlash buyurilishi mumkin, ular ishlab chiquvchilar tomonidan tez-tez o'zgartirilmaydi. HTTP javob sarlavhalarida xost-server keshlash ko'rsatmalarini o'z ichiga oladi. Ba'zi sahifalarni tez-tez ishlatadiganlar tezroq yuklash vaqtlaridan foyda ko'radilar, chunki server brauzerga kamroq ma'lumot yuboradi.

CDN - bizning zamonamizning yuqori imkoniyatlari

Kontentni yetkazib berish tarmoqlari (CDN) dunyoning turli burchaklarida kontentni keshlash orqali veb-saytlarni yuklash tezligini oshiradi. CDN kesh-serverlari odatda boshlang'ich yoki xost serveriga qaraganda oxirgi foydalanuvchilarga yaqinroq joylashgan.

To'g'ridan-to'g'ri yuzlab mil uzoqlikda joylashgan va ko'plab avtonom tarmoqlarga ulangan hosting serveriga ulanish o'rniga, kontent so'rovlari CDN server orqali yuboriladi. CDN serverlari veb-saytlar ish faoliyatini sezilarli darajada yaxshilaydi.

HTTP so'rovlarini qisqartiring

Odatda, brauzerlar rasmlar, skriptlar va CSS fayllari kabi turli xil sahifa resurslariga kirish uchun bir nechta HTTP so'rovlarini amalga oshiradilar. Bitta sayt yuzlab so'rovlarni talab qilishi mumkin. Veb-brauzer va har bir so'rov uchun resursni joylashtirgan server o'rtasida ikki tomonlama almashinuv mavjud bo'lib, bu sahifani yuklash vaqtini oshiradi.

Bundan tashqari, agar xostlardan biri ishlamay qolsa, veb-sahifa tezda yuklanmasligi mumkin. Ushbu mumkin bo'lgan muammolar tufayli har bir sahifada minimal miqdordagi aktivlar yuklanishi kerak. Tezlik testlari qaysi HTTP so'rovlari ko'proq vaqt olishini ham ko'rsatadi. Agar tasvirlar sahifaning sekin yuklanishiga olib keladigan bo'lsa, ishlab chiquvchilar tezroq tasvirni joylashtirish echimini izlashlari mumkin.

SEO uchun saytingizning HTML kodini optimallashtirish

HTML kodini optimallashtirish umuman saytning aksariyat ko'rsatkichlariga foydali ta'sir ko'rsatadi. Toza, optimallashtirilgan tuzilma tufayli saytni indekslash va yuklash tezligi sezilarli darajada yaxshilanadi. Qidiruv mexanizmlari nazarida sayt yaxshilanadi va shuning uchun qidiruv natijalarida ko'proq ko'rinadi.
Qidiruv mexanizmlari saytingiz nima haqida ekanligini aniqlash uchun manba kodidan foydalanadi. Veb-sahifadagi har qanday kontent qidiruv tizimlari uni tushunishi uchun HTML-da kodlangan bo'lishi kerak. Manba kodidagi SEO komponentlariga sarlavha yorlig'i, meta tavsifi, H1 sarlavhasi yorlig'i, ichki havolalar, langar matnlari, nofollow havolalari, alt rasm teglari va kanonik teglar kiradi. Manba kodini ko'rish uchun veb-sahifani oching va "Ctrl + U" tugmasini bosing. Veb-saytingizning manba kodini optimallashtirish uchun bir necha qadamlarni bajarishingiz mumkin.

Sarlavha tegini optimallashtirish

Sarlavha yorlig'i qidiruv tizimlarida saytingiz reytingiga sezilarli ta'sir ko'rsatadi. Bu Googlega sizning veb yoki blog sahifangiz berilgan soʻrovga qanchalik mos kelishini aniqlashga yordam beradi. Yaxshi yozilgan sarlavha yorlig'i saytingizni boshqalardan ajralib turishi va qidiruv tizimini osongina jalb qilishi mumkin.

• Barcha veb-sahifalaringiz sahifalarni mukammal tasvirlaydigan noyob sarlavha teglariga ega ekanligiga ishonch hosil qiling.
• Qidiruv natijalarida uzilib qolmasligi uchun sarlavha teglarining optimal uzunligiga rioya qiling. 50-60 belgi etarlicha yaxshi ishlaydi.
• Sarlavhalarda kalit so'zlardan foydalanmasligingizga ishonch hosil qiling. Buning o'rniga, bir yoki ikkita mazmunli kalit so'z qo'shing.

Noyob meta tavsiflari

Meta tavsifi foydalanuvchilar va qidiruv tizimlari manfaati uchun veb-sahifa mazmunini umumlashtiradigan HTML elementidir. U sarlavha ostidagi qidiruv natijalarida parcha sifatida ko'rinadi. Meta tavsiflari ortidagi g'oya o'quvchilaringizga sahifangiz nimani taklif qilayotgani haqida aniq tasavvur berishdir.

• Uzoq tavsiflardan saqlaning. Ideal uzunlik 130 dan 156 gacha belgilarni o'z ichiga olgan tavsifdir.
• Tavsifda tegishli kalit so'zlardan foydalaning.
• Iloji bo'lsa, harakatga chaqiruvni qo'shing.

Strukturaviy ma'lumotlar bilan ishlash

Strukturaviy ma'lumotlarning maqsadi - qidiruv natijalarida tanlangan parcha qilish uchun parchangizga batafsilroq qo'shish. Yuqori darajaga chiqish imkoniyatingizni oshirish uchun kod to'g'ri belgilanishi kerak. Schema.org qidiruv tizimlari uchun tuzilgan ma'lumotlar shakllari haqida gap ketganda eng mashhur hisoblanadi.

• Div tegidagi "element doirasi" dan foydalanish qidiruv tizimlariga bitta bo'limda keltirilgan barcha ma'lumotlar bir xil mavzuga tegishli ekanligini bilish imkonini beradi.
• Element turi atamasi har bir bo'lim mavzusini belgilaydi.
• "element prop" bo'lim haqida qo'shimcha ma'lumot beradi

H1 yorlig'i

H1 tegi matn qismini sahifangizning asosiy sarlavhasi sifatida belgilash uchun ishlatiladi. Bu erda sanab o'tilgan tarkib sahifalar nima haqida ekanligini qisqacha tasvirlab berishi kerak. H1 teglari ma'lumotli va qiziqarli bo'lishi kerak, bu foydalanuvchini kontentingizni o'qishni davom ettirishga undaydi.

• Ideal holda, u 20 dan 70 gacha belgilarni o'z ichiga olishi kerak.
• Foydalanuvchi niyatini ko'rib chiqing
• Qidiruv unumdorligi va veb-trafikni yaxshilash uchun asosiy kalit so'zni, yaxshisi uzun quyruqli kalit so'zlarni qo'shing.

Siz H2 dan H6 gacha bo'lgan sarlavhalarni ham qo'shishingiz mumkin. O'qishni yaxshilash uchun sarlavhadan keyingi matn juda uzun emasligiga ishonch hosil qiling, yaxshisi 250 va 300 so'z orasida.

Tasvirlar uchun muqobil matn

Elektron tijorat va boshqa veb-saytlar uchun alt teg muhim HTML tegidir. U qidiruv tizimiga tasvir nima haqida ekanligini aytadi. Tasvir faylini yuklab bo'lmasa, tasvir o'rniga alternativ matn ko'rsatiladi. Tegishli o'zgaruvchan matnli yaxshi tasvirlar sahifalarni skanerlar va foydalanuvchilarga jozibador qiladi va foydalanuvchi tajribasini (UX) yaxshilaydi.

• Tavsif qisqa va aniq ekanligiga ishonch hosil qiling.
• Kalit so'zlardan foydalaning, lekin ularni to'ldirmang
• Dekorativ maqsadlarda ishlatiladigan rasmlarni emas, balki brendingizga tegishli rasmlarni belgilang.

Kanonik URL yorlig'i

Bu ikki nusxadagi kontentni aniqlash uchun kuchli vositadir. Kanonik URL teglari asosan elektron tijorat saytlari uchun ishlatiladi, chunki mahsulotingiz uchun turli sahifalar yaratishingiz kerak bo'lishi mumkin.

Ushbu teglarni har bir sahifa o'zgarishiga qo'shish qidiruv tizimlariga o'xshash URL manzillari bo'lgan sahifalar guruhidan asosiy/bosh sahifani tanib olishga yordam beradi.

Asosiy xulosalar

• Ishlarni sodda va samarali qilishga intiling. Veb-sayt juda ko'p chiroyli elementlar bilan to'ldirilmasligi kerak. Bu sizning brendingiz va mijozlaringizning qarashlari uchun tegishli va samarali bo'lishi kerak. Bunga shunchaki kerakli veb-xususiyatlarga e'tibor qaratish orqali erishishingiz mumkin.
• Turli veb-elementlar uchun optimallashtirish strategiyalarini o'rganing. Turli xil veb-elementlar turli xil optimallashtirish strategiyalarini talab qiladi. Veb-saytingiz funksiyalari samarali ishlashi uchun ushbu o‘zgarishlarni barcha elementlarga kiritganingizga ishonch hosil qiling.

Veb-sayt HTML kodini texnik optimallashtirish - mashhur CMS WordPress plaginlari

Keling, bir nechta WordPress plaginlarini ko'rib chiqaylik. Bu WordPress CMS-dagi HTML kodini tozalash va siqishingizga yordam beradi. Ushbu plaginlar tufayli siz sayt tezligini keskin oshirishingiz, shuningdek, sayt kodidan keraksiz narsalarni tozalashingiz mumkin.

Plaginni avtomatik optimallashtirish:

• Saytning HTML kodini optimallashtirish va siqish (bo'shliqlar va sharhlarni olib tashlash).
• CSS va JS optimallashtirish - uslublarni bitta faylga birlashtirish va ularni joylashtirish imkonini beradi altbilgi sayt, shuningdek JS skriptlari.
• Qo'shimcha optimallashtirish imkoniyatlari mavjud.

Plaginni tozalash:

• Ko'pgina plaginlarning funksionalligini birlashtiradi va o'chirib qo'yilishi mumkin bo'lgan modullardan iborat.
• Veb-sayt tezligini oshirish uchun ajoyib.
• WordPress-dagi ba'zi skriptlar va keraksiz xususiyatlarni o'chiradi.
• U CMS-ning HTML kodi, CSS va JS fayllari bilan ishlash uchun keng ko'lamli vositalarga ega.

Ushbu plaginlarni birlashtirib, siz mukammal WordPress saytini optimallashtirishga erishasiz. Ulardan foydalanishga ishonch hosil qiling, ular siz uchun juda foydali bo'lishiga aminman.

Ushbu maqolani o'qish:

• Htaccess fayli - yangi boshlanuvchilar uchun .htaccess fayl ko'rsatmalarini qanday yaratish
• Gzip siqish js / css / html saytini tezlashtirish - .htaccess da qanday yoqish mumkin

O'qiganingiz uchun tashakkur: SEO HELPER | NICOLA.TOP