Not: tarayıcınızın küçük boyutuna göre otomatik olarak ayarlanan ve okunabilirlik için sitenin bazı ayrıntılarını gizleyen sitenin uyarlanabilir sürümü etkinleştirilir. Mutlu seyirler!
Merhaba. Bugün konuya devam edeceğiz HTML site düzeninin optimizasyonu hakkında makalede başladı.
Önce bunun neden önemli olduğunu anlayalım ve sonra pratik tavsiyelere geçelim.
Doğru yapılmış (dizgi) site şablonu:
- Sayfa yüklemeyi önemli ölçüde hızlandırabilir (özellikle daha önce her şey çalışıyorsa);
- Sayfalarınızın arama sonuçlarının ÜSTÜNDE yer almasını kolaylaştıracaktır (yalnızca hızlı yükleme nedeniyle değil);
- Tam tarayıcılar arası uyumluluk, yani sitenin tüm tarayıcılarda aynı doğru görüntülenmesi şansınızı artıracaktır;
- Uzun yıllar sonra sitelerinizi yeni tarayıcılar (veya eski tarayıcıların yeni sürümleri) için yeniden yapmanız gerekmeyeceğine dair küçük bir garanti verecektir.
Basit şeylerden daha ilginç olanlara geçmenizi öneririm.
Bölüm 1. HTML ve CSS standartlarına uyun
Her ihtimale karşı, HTML ve CSS'ye ek olarak, sitelerimizin daha kaynak yoğun olan ve sayfa yükleme hızını önemli ölçüde yavaşlatan JS ve PHP bölümlerini de optimize edebileceğimizi söyleyeceğim. Ancak, sayfa yükleme hızına ek olarak, JS ve PHP bileşenleri, HTML işaretlemesinin, yani site şablonunun aksine, sitenin tanıtımını hiçbir şekilde (sadece bozmazlarsa) etkilemez.
1.1 Etiketleri her zaman kapatın.
Kapatılması gerekmeyenler de dahil olmak üzere, XHTML standardının düşmanı olsanız bile, bu kurala bağlı kalmak daha iyidir. Örnek:
- Liste öğesi
- Liste öğesi
- Liste öğesi
Her li etiketi kapalıdır, ancak bu gerekli değildir.
1.2 Etiketlerin doğru yerleştirilmesine dikkat edin.
İlkesine göre: ilk açıldı - son kapandı. Nasıl doğru olmadığına bir örnek:
Nasıl doğru:
1.3 CSS ve JS'yi asla HTML düzeni ve etiket nitelikleri içinde tanımlamayın.
Hiçbir zaman! Başka bir deyişle, varlığı unut stil özelliği ve stil etiketi:
Metin
Tüm stilleri açıklayın ayrı bir .css dosyasında
style niteliğini yalnızca bazı eylemler için javascript kullanarak dinamik olarak oluşturarak kullanabilirsiniz. Örneğin, bir resme tıklayarak sayfadaki tüm metnin rengini değiştirmeniz gerekiyorsa, yalnızca bu durumda istenen etiket için gerekli değerlerle dinamik olarak bir stil niteliği oluşturabilirsiniz (bu örnekte, vücut için). Niye ya? Çünkü arama robotları zaten onu görmeyecek ve hiç kimse (kullanıcılar dahil) fazladan kod indirmeyecek, çünkü işlem sayfa tamamen yüklendikten sonra gerçekleşir.
Ancak, bu gibi durumlarda, yine de istenen etikete bir stil niteliği eklemek yerine önceden tanımlanmış bir CSS sınıfı eklemenizi tavsiye ederim. Bu, en azından daha sonra düzenleme için daha uygundur.
Aynısı JS için de geçerlidir, tüm JS kodları ayrı dosya, mizanpajınızın içinde değil veya daha kötüsü etiket özellikleri arasında.
1.4 Caps Lock ve büyük harfleri unutun.
Tüm etiketleri, nitelikleri ve anlamlarını küçük (küçük) harflerle yazın, aynısı CSS stil sayfaları için de geçerlidir.
Yukarıda açıklanan hemen hemen her şey resmi HTML ve CSS spesifikasyonundadır ve aşağıdakiler için geçerlidir: belgenin geçerliliği.
Bu nedenle W3C standartlarına bağlı kalarak, yani belgenin geçerliliğini gözlemleyerek, aşağıdaki SEO avantajlarını elde ettiğinizi belirtmeliyim:
- Temiz kod ve sonuç olarak, sitenize arama motorlarının ek güveni;
- Tarayıcının geçersiz bir belgede hata ayıklamak için zaman kaybetmesi gerekmediğinden daha hızlı sayfa yükleme.
Ancak, geçerlilik üzerinde durmamalı, mümkün olduğunca buna bağlı kalmaya çalışmalı, ancak diğer her şeyin (zaman, işlevsellik vb.)
Bölüm 2. Sayfa yüklemeyi hızlandırın - sıralama faktörlerinden biri
2.1 Lütfen resimlerin gerçek boyutlarını belirtiniz.
Buradaki nokta iki şeydir:
- Özellikleri eklediğinizden emin olun Genişlik ve boy uzunluğu etiket için resim:
Bu, tarayıcının hangi boyutta görüntüleneceğini önceden bileceği için resimlerin yüklenmesini hızlandıracaktır. - Niteliklerde belirttiğiniz boyutta bir resim eklediğinizden emin olun.
Resim ihtiyacınızdan daha büyükse, HTML veya CSS kullanılarak küçültülebileceği için zamandan tasarruf etmenize gerek yoktur. Zaman ayırın, Photoshop veya analoglarına gidin ve resmi sitede görmek istediğiniz boyuta küçültün, bu sayfaların yüklenmesini önemli ölçüde hızlandırabilir.
2.2 JS yerine CSS3 kullanın.
JS, sayfalarınızın yüklenmesini önemli ölçüde yavaşlatabilir ve sayfa yüklendikten sonra (sürünen çizgiler ve diğer dinamik şeyler gibi çeşitli efektler) yükleme oluşturmaya devam edebilir, bu da site sekmesi açıkken tarayıcıyı yavaşlatabilir. açık.
Günümüzde pek çok güzel ve ilginç efekt ancak CSS3 özelliklerinin (örneğin geçiş, kutu gölgesi, kenarlık yarıçapı, opaklık, dönüştürme, arka plan boyutu) ve ustaca kullanılmasıyla elde edilebilir.
Yukarıdakilerin tümü tek bir cümlede özetlenebilir: JS'yi CSS3 ile değiştirebildiğiniz her yerde (nasıl olduğundan şüpheleniyorsunuz), CSS3'ü tereddüt etmeden kullanın! Benzer snippet'leri bulmak için CSS3'ün yeni özelliklerini keşfetmenizi tavsiye ederim.
2.3 Daha Az Photoshop - Daha Fazla CSS 3.
Bu motto uzun süredir birçok webmaster tarafından kullanılmaktadır. Yalnızca CSS ile düzgün degradeler, kenar yumuşatılmış köşeler, alt gölgeler (iç ve dış) ve güzel metinler içeren güzel düğmeler ve tasarım öğeleri oluşturabilirsiniz. Grafik tasarım öğelerini CSS koduyla değiştirebileceğiniz her yerde - yapın! Örnek:
Veya Abone ol düğmem! her makalenin sonunda. Bu arada, yeni faydalı makaleler, spam veya reklam olmamasıyla ilgili bildirimlere abone olmayı unutmayın.
Yukarıda listelenen CSS3 özelliklerine ek olarak, RGBA renk açıklama formatı da sizin için kullanılabilir.
Tarayıcılar arası CSS geçişleri oluşturmak için colorzilla.com'da bunun gibi ücretsiz hizmetleri kullanabilirsiniz.
2.4 Görüntüleri CSS hareketli grafiklerinde birleştirin.
CSS 3 ile çizemediğimiz bu resimler bir araya getirilmelidir (ideal olarak). Bu, sayfa yüklenirken sunucuya yapılan istek sayısını azaltmak için gereklidir. Bu öğe web sunucunuzdaki yükü önemli ölçüde azaltabilir ve aynı zamanda sayfaların yüklenmesini hızlandırabilir, bir taşla 2 kuş!
Bunun neyle ilgili olduğu hakkında daha iyi bir fikir edinmek için CSS hareketli grafiğime bir göz atın:
Fena değil, değil mi? Tüm öğeler için tek bir arka plan görüntüsü vardır, yalnızca onu hareket ettiririz ve arka plan konumu özelliği sayesinde belirli bir öğenin arka planındaki görüntünün gerekli kısmını değiştiririz, örneğin şöyle:
# subs, # left, .mail, .rss, .vk (arka plan: url (/images/1.png) tekrarsız) #subs (arka plan konumu: -28px -120px;) #left (arka plan konumu: -35px -20px;) .mail (arka plan konumu: -43px -50px;) .rss (arka plan konumu: -12px -8px;) .vk (arka plan konumu: -34px -56px;)
Sprite'ı Photoshop kullanarak manuel olarak oluşturmak en iyisidir, ancak bu size oldukça karmaşık bir görev gibi görünebilir, bu nedenle sizin için CSS kodunu yazmak da dahil olmak üzere sizin için her şeyi yapacak ücretsiz hizmetleri kullanabilirsiniz. En sevdiğim servis SpriteMe. Ancak tekrar etmekten bıkmayacağım: Her şeyi elle yapmak her zaman daha iyidir, özellikle bu şekilde, sprite çok daha kompakt (boyut ve dolayısıyla ağırlık olarak) ve dolayısıyla daha verimli olabilir.
2.5 JS dosyalarını doğru şekilde yerleştirin.
Siteniz tarafından bağlanan tüm JS dosyaları, kodun mümkün olduğu kadar alt kısmına yerleştirilmelidir, bunları sitenin "head" kısmına (head etiketleri arasına) eklemeniz gerekmez - bu, sayfa yüklemesini önemli ölçüde yavaşlatır. En iyi seçenek, JS dosyalarını kapanış gövde etiketinin önüne eklemek olacaktır, yani sayfanın en altında, aşağıda hiçbir yer yoktur.
Ve çok faydalı bir tavsiye daha: ideal olarak, tüm JS dosyalarınız tek bir dosyada birleştirilmelidir, yani kodu tüm dosyalardan kesip (Ctrl + X) tek bir dosyaya kopyalarız, böylece sonunda bir tane olur aşağıda, kapanış gövde etiketi tek dosyasından önce:
...