Web sitesi HTML kodu optimizasyonu - temizleme, sıkıştırma, hata düzeltme

Bu makaleyi dinle

Teknik web sitesi HTML kodu optimizasyonu - site sayfası şablonunun HTML kodunu ayarlama işlemi. Sitenin kaynak kodunun değiştirilmesi (ed.) ve yapısının ve boyutunun düzeltilmesi. Açık amacı, kodun bileşiminde niteliksel bir gelişmedir. Kodun geçerliliğini artıran hacminde önemli bir azalma. Bu, tarayıcılarda sayfa yükleme hızını artırmaya yardımcı olur.

HTML, web'in omurgasıdır. Bu, bir web sitesinin temel yapısını oluşturan belge türüdür. HTML olmadan JavaScript çalışmaz, CSS hiçbir şeye stil veremez ve resimlerin yüklenecek yeri olmaz. HTML'nin gücü, çok yönlülüğünde yatmaktadır, çünkü diğer dosyaları yükleyebilir; HTML'nin ilk bölümü olan köprü metninin anlamı da budur.

Harici HTML dosyalarının yüklenmesi, ayrıştırılması ve yüklenmesi uzun zaman aldığında, kullanıcı arabirimi zarar görebilir. Sayfa Yükleme süresi artar, daha fazla kullanıcı sayfayı terk etme eğiliminde oldukça daha uzun süre beklemek zorunda kalır.

Makalenin içeriği:

• Web sitesi sayfalarının HTML kodunun teknik optimizasyonu
• Kod miktarını azaltarak sitenin kaynak HTML kodunu optimize etme
• Gereksiz HTML etiketlerini ve stil dosyalarını kaldırma
• Sitenin HTML kodundaki hataların düzeltilmesi
• Sitenin mobil sürümünün önceliğini belirleyin
• Web önbelleğini aktif olarak kullanın
• CDN - zamanımızın yüksek fırsatları
• HTTP İsteklerini Kısaltın
• Sitenizin HTML kodunu SEO için optimize etme
• Web sitesi HTML kodunun teknik optimizasyonu - popüler CMS WordPress eklentileri

Web sitesi sayfalarının HTML kodunun teknik optimizasyonu

HTML kodunu optimize etmeye yönelik faaliyetler, sitenin hızını artırmak açısından uygundur. Sitenin HTML kodunu temizlemek ve sıkıştırmak, site sayfalarının görüntülenmesini önemli ölçüde hızlandırmanıza yardımcı olacaktır. Koddaki görünür hataları ortadan kaldırarak HTML belgenizin geçerliliğini artıracaksınız.

Sitenin HTML kodunu optimize etmenin nihai sonucu şöyle olacaktır:

• Popüler tarayıcılarda web sitesi sayfalarının anında yüklenmesi.
• Site içeriğinin arama botları tarafından hızlı taranması.
• Temiz, geçerli bir kod, arama motorlarının gözünde en yüksek öncelikli sitedir.
• Sitenin Google ve Yandex arama motorlarının arama sonuçlarındaki sıralaması ve görünürlüğü önemli ölçüde artacaktır.

Sitenin kaynak HTML kodunun optimizasyonu - kod miktarının azaltılması

En önemli eylem sayfa kodunu azaltmaktır. HTML kaynak kodu uzun bir tuval gibi görünür. Birçok farklı CSS stili, kod yapısında farklı yerlerde bulunur. Kodda gereksiz yorumlar, karakterler, boşluklar ve etiketler var.

Başlangıçta, gereksiz yorumlardan kurtulmanız gerekir - bu, fazladan ve tamamen gereksiz bir karakter kümesidir. Tarayıcı ve arama botları için yorumların herhangi bir anlamsal anlamı yoktur. Bunları kaldırarak sayfanın ağırlığını önemli ölçüde azaltacaksınız. Hangi bölmede bir belge yükleme hızını artıracaktır.

Gereksiz karakterlerin, fazladan (çift) boşlukların ve satır sonlarının temizlenmesi. Site kodunun nihai yapısını büyük ölçüde azaltmanıza izin verecektir. Böylece sayfanın ana ağırlığı 2,5 - 3 kat azaltılabilir.

Sonuç olarak: boşlukları sıkıştırmak ve satır sonlarını birleştirmek, html kodunun yapısı önemli ölçüde sıkıştırılacaktır.

Optimize edilmiş bir yılın küçük bir segmentine örnek:

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-başlık-gizli a:hover.

Gördüğünüz gibi tüm gereksiz karakterler, boşluklar ve yorumlar koddan kaldırıldı. Bu, kodun sanki tek bir sürekli satır halinde esnetilmesine katkıda bulunur. Bu yapı sayesinde sayfanın ağırlığı çok daha az olur. Aynı zamanda, sayfalar botlar tarafından olabildiğince hızlı bir şekilde dizine eklenir ve yüklenir. Tabii ki, siteyi optimize etmek için tüm önlemlere tabidir.

Gereksiz HTML etiketlerini ve stil dosyalarını kaldırma

Büyük bir sayfa kod ağırlığının en yaygın sorunu, kullanılmayan CSS biçim dosyaları ve gereksiz etiketler olabilir. Bu kod öğeleri ayrıca ana sayfa şablonuna da yerleştirilmiştir.

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

Bu aynı zamanda kapatılmamış etiketler için de geçerlidir. Anlamsal bir anlam taşımazlar ve ihtiyacımız olan yeri alırlar. Sitenin görsel sunumunda herhangi bir rolü olmayan (gereksiz veya bozuk) stil dosyaları da kod yapısından kaldırılmıştır.

Site sayfalarının yüklenmesini hızlandırmak için:

1. CSS stillerini ve JS komut dosyalarını harici dosyalara taşımanız gerekir;
2. Karakterlerde site tasarımının ana öğelerini düzenleyin, ardından bunları stil sayfalarına yerleştirin;
3. Sayfa kodu basit ve okunabilir olmalıdır.

Sitenin HTML kodundaki hataların düzeltilmesi

Arama motorları (çok isteyerek değil) kodda hata olan sitelere tepki verir. Bununla birlikte, birçok popüler TRUST kaynağı, bu tür hatalarla bile EN İYİ sonuçlarda açıkça sabitlenmiştir. Popüler Yandex'in ana sayfası bile validator.w3.org yardımıyla kontrol ediliyor, benim sitem bile hatalardan üstün.

Aşağıdaki geçerlilik hataları listesine sahiptir:

Uyarı: Content-Security-Policy HTTP başlığı: Hatalı içerik güvenlik politikası: Kaynak listesi, &quot;https://passport.yandex.ru&quot; yinelenen kaynak ifadesi içeriyor. İlk örnek hariç tümü yok sayılır. https://yandex.ru/ Hata: Bu bağlamda div öğesinin alt öğesi olarak öğe stiline izin verilmez. (Bu alt ağaçtaki diğer hatalar atlanıyor.) 33. satır, 17689. sütundan; 33. satıra, sütun 17695 dkov</div><style.docum>

Hata: Bu bağlamda öğe yayılma öğesinin alt öğesi olarak öğe div&#039;ine izin verilmez. (Bu alt ağaçtaki diğer hatalar atlanıyor.) 33. satır, 18219. sütundan; 33. satıra, sütun 18260 pe_close&quot;&gt;div class=&quot;desk-notif-card__action-icon&quot;&gt;</div>

Bu, Yandex arama motorunun ana sayfasının sahip olduğu minimum hata kümesidir (toplamda yaklaşık 47 tane vardır).

Ve sitemin validator.w3.org kontrolü şu şekilde görünüyor:

Hata: src özniteliğine sahip bir betik öğesinin, değeri boş dize, bir JavaScript MIME türü veya modülü dışında bir tür özniteliğine sahip olmaması gerekir. 6. satır 1. sütundan; 6. satıra, sütun 192 /script>↩ ↩ ↩ 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

Gördüğünüz gibi, birkaç değil))) - yalnızca 21 hata ve uyarı bildirimi. Üzerinde çalışılacak bir şey var.

Kodun geçerliliği, web sitesi tanıtımında en yüksek önceliğe sahiptir. W3C doğrulayıcının hata ve uyarılarının çoğunu düzelterek, sitenin teknik optimizasyonunda iyi bir başarı elde edebilirsiniz.

Sitenin mobil sürümünün önceliğini belirleyin

Geleneksel olarak, birinci nesil web siteleri büyük ekranlı masaüstü bilgisayarlarda görüntüleniyordu. Günümüzde çoğu kişi akıllı telefonlar, tabletler ve dizüstü bilgisayarlar gibi mobil cihazlardan web sitelerini ziyaret etmektedir. Bu nedenle sitenizin mobil cihazlara uygun hale getirilmesi gerekmektedir. Ayrıca, sitenizin her yönüne (arama, alışveriş sepeti ve ödeme) bir mobil cihazdan masaüstü veya dizüstü bilgisayardan olduğu kadar kolay erişilebildiğinden emin olmanız gerekir.

Web önbelleğini aktif olarak kullanın

Önbellekler, HTTP üzerinden sürekli olarak aynı içeriği istemek yerine, son görüntülenen sayfaları daha hızlı yüklemek için tarayıcıların statik dosyaların kopyalarını kaydettiği geçici depolama alanlarıdır.

Tarayıcılara, geliştiriciler tarafından sık sık değiştirilmeyecek web sayfası öğelerini önbelleğe almaları talimatı verilebilir. HTTP yanıt başlıklarında, ana sunucu önbelleğe alma yönergeleri içerir. Belirli sayfaları sık kullananlar, sunucu tarayıcıya daha az veri gönderdiği için daha hızlı yükleme sürelerinden faydalanacaktır.

CDN - zamanımızın yüksek fırsatları

İçerik Dağıtım Ağları (CDN'ler), içeriği dünya çapında birçok farklı konumda önbelleğe alarak web sitesi yükleme hızını artırır. CDN önbellek sunucuları genellikle son kullanıcılara kaynak veya ana sunucudan daha yakındır.

Yüzlerce mil ötedeki ve çok sayıda otonom ağa bağlı olabilen bir barındırma sunucusuna doğrudan bağlanmak yerine, içerik istekleri bir CDN sunucusu aracılığıyla gönderilir. CDN sunucuları, web sitelerinin performansını büyük ölçüde artırabilir.

HTTP İsteklerini Kısaltın

Tipik olarak, tarayıcılar resimler, komut dosyaları ve CSS dosyaları gibi çeşitli sayfa kaynaklarına erişmek için birden çok HTTP isteğinde bulunur. Tek bir site yüzlerce istek gerektirebilir. Web tarayıcısı ile kaynağı barındıran sunucu arasında her istek için iki yönlü bir alışveriş vardır ve bu da sayfa yükleme süresini artırır.

Ayrıca, ana bilgisayarlardan biri arızalanırsa web sayfası hızlı yüklenmeyebilir. Bu olası sorunlar nedeniyle, her sayfada minimum miktarda varlık yüklü olmalıdır. Hız testleri, hangi HTTP isteklerinin en çok zaman aldığını da gösterecek. Görüntüler sayfanın yavaş yüklenmesine neden oluyorsa, geliştiriciler daha hızlı bir görüntü barındırma çözümü arayabilir.

Sitenizin HTML kodunu SEO için optimize etme

HTML kodu optimizasyonu bir bütün olarak sitenin çoğu göstergesi üzerinde faydalı bir etkiye sahiptir. Temiz, optimize edilmiş bir yapı sayesinde sitenin indeksleme ve yükleme hızı önemli ölçüde iyileştirilir. Arama motorlarının gözünde site daha iyi hale gelir ve dolayısıyla arama sonuçlarında daha görünür hale gelir.
Arama motorları, sitenizin ne hakkında olduğunu anlamak için kaynak kodunu kullanır. Bir web sayfasındaki herhangi bir içeriğin, arama motorlarının anlayabilmesi için HTML olarak kodlanması gerekir. Kaynak kodundaki SEO bileşenleri arasında başlık etiketi, meta açıklama, H1 başlık etiketi, dahili bağlantılar, bağlantı metinleri, takip edilmeyen bağlantılar, alt resim etiketleri ve kanonik etiketler bulunur. Kaynak kodunu görüntülemek için web sayfasını açın ve "Ctrl + U" tuşlarına basın. İşte web sitenizin kaynak kodunu optimize etmek için izleyebileceğiniz birkaç adım.

Başlık etiketi optimizasyonu

Başlık etiketi, sitenizin arama motorlarındaki sıralamasında önemli bir etkiye sahiptir. Bu, Google'ın web veya blog sayfanızın belirli bir sorguyla ne kadar iyi eşleştiğini belirlemesine yardımcı olur. İyi yazılmış bir başlık etiketi, sitenizi diğerlerinden ayırabilir ve arama motorunu kolayca çekebilir.

• Tüm web sayfalarınızın, sayfaları mükemmel şekilde tanımlayan benzersiz başlık etiketlerine sahip olduğundan emin olun.
• Başlık etiketlerinin arama sonuçlarında kesilmemesi için optimum uzunluklara uyun. 50-60 karakter yeterince iyi çalışıyor.
• Başlıklarda anahtar kelime kullanmadığınızdan emin olun. Bunun yerine, bir veya iki anlamlı anahtar kelime ekleyin.

Benzersiz Meta Açıklamaları

Meta açıklama, kullanıcıların ve arama motorlarının yararına bir web sayfasının içeriğini özetleyen bir HTML öğesidir. Başlığın altındaki arama sonuçlarında snippet olarak görünür. Meta açıklamaların arkasındaki fikir, okuyucularınıza sayfanızın sunduğu şeyler hakkında doğru bir fikir vermektir.

• Uzun açıklamalardan kaçının. İdeal uzunluk, 130 ile 156 karakter arasında bir açıklamadır.
• Açıklamada alakalı anahtar kelimeler kullanın.
• Mümkünse, bir harekete geçirici mesaj ekleyin.

Yapılandırılmış verilerle çalışma

Yapılandırılmış verilerin amacı, snippet'inizi arama sonuçlarında öne çıkan bir snippet yapmak için daha fazla ayrıntı eklemektir. Daha yüksek sıralama şansınızı artırmak için kodun uygun şekilde işaretlenmesi gerekir. Schema.org, arama motorları için yapılandırılmış veri formları söz konusu olduğunda en popüler olanıdır.

• Div etiketinde "öğe kapsamı"nın kullanılması, arama motorlarının bir bölümde sunulan tüm bilgilerin aynı konuya atıfta bulunduğunu bilmesini sağlar.
• Öğe türü terimi, her bölümün konusunu tanımlar.
• "item prop", bölüm hakkında ek bilgi bildirir

H1 etiketi

H1 etiketi, bir metin parçasını sayfanızın ana başlığı olarak belirlemek için kullanılır. Burada listelenen içerik, sayfaların ne hakkında olduğunu kısaca açıklamalıdır. H1 etiketleri bilgilendirici ve ilgi çekici olmalı, kullanıcıyı içeriğinizi okumaya devam etmeye teşvik etmelidir.

• İdeal olarak, 20 ila 70 karakter içermelidir.
• Kullanıcı niyetini göz önünde bulundurun
• Arama performansını ve web trafiğini iyileştirmek için birincil anahtar kelimenizi, tercihen uzun kuyruklu anahtar kelimeleri ekleyin.

H2'den H6'ya kadar alt başlıklar da ekleyebilirsiniz. Okunabilirliği artırmak için, alt başlığı takip eden metnin çok uzun olmadığından, tercihen 250 ila 300 kelime arasında olduğundan emin olun.

Resimler için alternatif metin

E-ticaret ve diğer web siteleri için alt etiketi önemli bir HTML etiketidir. Arama motoruna görselin ne hakkında olduğunu söyler. Resim dosyası yüklenemezse resim yerine alternatif metin görüntülenecektir. Uygun alternatif metne sahip iyi resimler, sayfaları kullanıcılar kadar tarayıcılar için de çekici hale getirir ve kullanıcı deneyimini (UX) geliştirir.

• Açıklamanın kısa ve spesifik olduğundan emin olun.
• Anahtar kelimeler kullanın, ancak bunları doldurmayın
• Dekoratif amaçlı kullanılan görselleri değil, markanızla ilgili görselleri etiketleyin.

Kanonik URL etiketi

Bu, yinelenen içeriği belirlemek için güçlü bir araçtır. Ürünleriniz için farklı sayfalar oluşturmanız gerekebileceğinden, kanonik URL etiketleri daha çok e-ticaret siteleri için kullanılır.

Bu etiketlerin her sayfa varyasyonuna eklenmesi, arama motorlarının benzer URL'lere sahip bir grup sayfadan ana/kaynak sayfayı tanımasına yardımcı olur.

Ana sonuçlar

• İşleri basit ve verimli tutmaya çalışın. Bir web sitesi çok fazla süslü öğeyle doldurulmamalıdır. Sadece markanızın ve müşterilerinizin vizyonuyla alakalı ve etkili olması gerekir. Bunu sadece gerekli web özelliklerine odaklanarak başarabilirsiniz.
• Çeşitli web öğeleri için optimizasyon stratejilerini keşfedin. Farklı web öğeleri, farklı optimizasyon stratejileri gerektirecektir. Web sitenizin özelliklerinin etkili bir şekilde çalışması için bu değişiklikleri tüm öğelere dahil ettiğinizden emin olun.

Web sitesi HTML kodunun teknik optimizasyonu - popüler CMS WordPress eklentileri

Birkaç WordPress eklentisine hızlıca göz atalım. Bu, WordPress CMS'deki HTML kodunu temizlemenize ve sıkıştırmanıza yardımcı olacaktır. Bu eklentiler sayesinde sitenin hızını önemli ölçüde artırabilir, ayrıca site kodundaki gereksiz her şeyi temizleyebilirsiniz.

Eklenti Otomatik Optimizasyonu:

• Sitenin HTML kodunun optimizasyonu ve sıkıştırılması (boşlukların ve yorumların kaldırılması).
• CSS ve JS optimizasyonu - stilleri tek bir dosyada birleştirmenize ve bunları altbilgi sitenin yanı sıra js betikleri.
• Ek optimizasyon seçeneklerine sahiptir.

Clearfy Eklentisi:

• Birçok eklentinin işlevselliğini birleştirir ve devre dışı bırakılabilen modüllerden oluşur.
• Web sitesi hızını artırmak için harika.
• WordPress'teki bazı komut dosyalarını ve gereksiz özellikleri devre dışı bırakır.
• CMS'nizin HTML kodu, CSS ve JS dosyalarıyla çalışmak için çok çeşitli araçlara sahiptir.

Bu eklentileri birleştirerek mükemmel WordPress site optimizasyonu elde edeceksiniz. Mutlaka kullanın, eminim işinize çok yarayacaktır.

Bu makaleyi okumak:

• Htaccess dosyası - yeni başlayanlar için bir .htaccess dosyası oluşturma talimatı
• Gzip sıkıştırma js / css / html site hızlandırma - .htaccess'te nasıl etkinleştirilir

Okuduğunuz için teşekkürler: SEO YARDIMI | NICOLA.ÜST