Sitedeki her şey mükemmel olmalıdır - hem kullanılabilirlik hem de tasarım ve davranışsal faktörler ve HTML kodu. Aferin HTML kodu ile kaynak sahiplerinin kaliteye ne kadar önem verdiklerini arama motorlarına göstermektedir. Sitedeki kod veya çöp etiketlerinde hataların bulunması, kaynağın işleyişinin bozulmasına, sayfa yükleme hızında yavaşlamaya ve diğer sıkıntılara yol açar. Bütün bunlar yol açar düşük seviye arama sonuçlarında web sitesi sıralaması. Bu da az sayıda ziyaretçi ve düşük gelir olacağı anlamına gelir.

Site sayfa kodunu optimize etmek oldukça zahmetli ve titiz bir iştir. Neyse ki, bu görev, içerik yönetim sistemlerindeki özel eklentiler kullanılarak otomatikleştirilebilir ve basitleştirilebilir. İyi profesyonel web sitesi kurucuları, siteyi birçok yönden test etmek için dahili özelliklere sahiptir. Kodun optimizasyonunun ve temizliğinin kontrol edilmesi dahil. Öncelikle nelere dikkat etmelisiniz? Optimize ediciler, kodu optimize etme görevini açıklayan bir kontrol listesi geliştirmiştir.

Meta etiket optimizasyonu

1. Başlık- sayfanın başlığı ana içeriği içermelidir anahtar kelime. Bir sitenin bir arama sorgusuyla alaka düzeyini belirlerken dikkate alınan bu faktördür. Başlık, kullanıcının sorusunun yanıtı değilse, bu kaynağın ziyaret için seçilmesi olası değildir. Başlığın boyutuna saygı duymak önemlidir. Sayfa başlığı yaklaşık 65 karakterden uzunsa, arama motoru cümleyi keser ve ardından kullanıcılar anlamsız metin görür. Başlıklar ve alt başlıklar, arama deneyiminizi geliştirmek için ek anahtar kelimeler içerebilir.

2. açıklama meta etiketi(açıklama) Google tarafından bir snippet olarak kullanılır (bu arada, yakın geçmişte google yapılandırılmış snippet'leri başlattı) - sitenin SERP'de duyurusu. Yandex, metnin herhangi bir yerinden kendi ilkelerine göre bir pasaj seçer. Snippet'in tatmin edici olmadığı ortaya çıkarsa, paragrafı olduğu yerde düzenleyebilirsiniz.

3. anahtar kelimeler meta etiketi(anahtar kelimeler) özel bir rol oynamaz. Ancak bu, dikkatli bir şekilde reçete edilmelerini engellemez. Metin içerisinde anahtar kelime sayısı günümüzde belirli bir sayıyı gerektirmemektedir. Çok daha önemli olan konu geliştirmede kelime dağarcığının zenginliği ve özel terminolojinin kullanılmasıdır.

4. Metin, basamaklı stil sayfaları kullanılarak biçimlendirilir ve CSS'nin kendisi sayfadan ayrı bir dizine kaldırılır. Bu aynı zamanda tarayıcı üzerindeki yükü azaltır ve sitenin performansını artırır. Ana metin sayfada mümkün olduğu kadar yükseğe yerleştirilmeli ve tüm servis etiketleri aşağı doğru kaldırılmalıdır.

5. Yukarıdakilerin hepsine ek olarak, web uyumlu yazı tipleri kullanmanız gerekir. Aksi takdirde, tarayıcılarda metin görüntülemede zorluklar olabilir.

Çöpten kod temizleme (html kodunun optimizasyonu)

Gereksiz, hatalı etiketlerin varlığı, hatta çift boşluklar, sayfanın ağırlığını büyük ölçüde artırabilir ve siteyi yavaşlatabilir.

Doğrulama ve standardizasyon

Tarayıcıların siteyle yeterince çalışabilmesi için, kodun üstte belirtilen modern standarda uygun olması gerekir. HTML dizisi. Daha sonra kodun geçerliliği gelir. Bu parametre, WWW geliştiriciler konsorsiyumunun web sitesinde ücretsiz olarak kontrol edilebilir.

Grafik optimizasyonu

İyi kalitede grafikler çok ağırdır ve kaynağı büyük ölçüde aşırı yükler. Tüm resimler sayfalarda değil, ayrı bir dizinde ve sıkıştırılmış durumda saklanır. Alt ve Açıklama etiketlerinde (resmin açılır açıklaması), dosya adına anahtar kelimeler eklemek faydalıdır. Bu, görsel aramada sitenin görünürlüğünü artırır ve arama robotlarının dizine eklemesini kolaylaştırır.

Komut dosyası optimizasyonu

Modern kodlama standartlarına göre, komut dosyaları web sayfasının kendisinde bulunmamalı, grafik öğeler gibi sıkıştırılmalı ve ayrı bir dizine konulmalıdır. Çünkü bu kullanışlı küçük programlar çok fazla ağırlık taşır.

Bozuk bağlantıları kaldırma

Arama motorları, hiçbir yere götürmeyen ve canlı trafiği olmayan ölü bağlantılara karşı olumsuz bir tutuma sahiptir. Tüm kırık bağlantılar bulunmalı ve sayfalardan acımasızca kaldırılmalıdır. Bağışçıların kalitesini kontrol etmek de yararlıdır. Link yıkamalardan ve illegal projelerden gelen linkler sitenin güvenini büyük ölçüde zedeler.

anlamsal işaretleme

Arama motorları, web sayfalarını çok daha fazla bilgi açısından zengin kılan semantik işaretlemeye çok düşkündür. Bununla birlikte, web yöneticileri ve optimize ediciler bu anlambilime o kadar kapılırlar ki, bu faktör bile gri bir optimizasyon olarak neredeyse şüphe altındadır. Her şeyde ölçülü olunmalı ve Google ve Yandex sitelerini daha sık ziyaret edilmelidir. Orada, sitelerin kalitesi ve özellikle HTML kodu için mevcut gereksinimler hakkında birçok yararlı bilgi edinebilirsiniz.

Arama motoru algoritmaları sürekli değişiyor ve siteyi bir sonraki filtreye girmeden önce yeniden işlemek için zamana sahip olmak için en son haberleri zamanında öğrenmek önemlidir. Ve sonra bu pistin altına girmek kolay ama çıkmak çok zor.

"Web sitesi optimizasyonu" makalesi, site optimizasyonunun genel ilkelerini açıklar. Kontrol etmeyi unutmayın.

Arama robotu, her gün milyonlarca siteden bilgi toplar. Ve optimize edici burada bile kontrol kollarını bulabilir. Arama motorları, robotun işini kolaylaştırabilecek bazı optimizasyon önerileri sunar. Bu faaliyetler arasında başrolü html kodunun optimizasyonuna aittir.

Sayfa kodunu arama motorlarının gereksinimlerine uyarlamayı amaçlayan faaliyetlere denir. html kodu optimizasyonu.

Başlamak için, bu tür optimizasyonun izlediği ana görevleri ve hedefleri anlamaya değer. Her şeyden önce, bu, sitenin indekslemeyi etkileyebilecek dahili özelliklerinde bir gelişmedir. Robot siteyi düzenli olarak ziyaret edip içeriğini analiz ederse ve aynı zamanda engellerle karşılaşmazsa, site arama sonuçlarında öncelikli konumlarda olacaktır.

Başka bir nokta, site kodu karmaşık olduğunda hatalar içerir, o zaman robot en son bu tür projeleri ziyaret eder. Ayrıca, kötüleşen indekslemeye ek olarak, site daha kötü sıralanabilir. Bu nedenle, maksimum sonuçları elde etmek için dahili optimizasyon, html kodu üzerinde çalışmak için entegre bir yaklaşım sağlar.

HTML Kodunu Optimize Etmek İçin 5 Önemli Kural

1. Stilizasyon;
2. Gereksiz etiketlerin kaldırılması;
3. Sorun Giderme;
4. Kod yapısı;
5. Dış bağlantıların kapatılması.

Html kodunu şekillendirme

Düzenden sonra veya bir site oluşturma sürecinde genellikle bir sorunla karşılaşırsınız: tablolar stillerle dolup taşıyor.

Şuna benziyor:

Bu durumda, kodu temizlemek için stilleri stil sayfalarına - CSS'ye aktarmanız gerekir. Bu tablolar (daha doğrusu css dosyasına bir bağlantı) genellikle head etiketleri arasında bulunur. Çeşitli site etiketlerinde bulunan stiller, sınıflara dönüştürülmelidir.

Stil sayfalarına geçmek için, stilin içeriğini CSS'ye kopyalayın ve ona "yeni sınıf" adlı bir sınıf verin.

Yeni sınıf (genişlik:10 piksel; kenarlık:10 piksel;)

Sonuç olarak, yeni bir sınıfı CSS'den bir tabloya aktarmak için:

Böylece çeşitli tablolara gerekli sınıflar vb. verilerek kodu önemli ölçüde azaltmak mümkündür.

Etiketleri kaldırma

Bazen, tasarım yüklendikten sonra ikinci kez kopyalanan etiketler içeren siteler vardır.

Site üzerinde olumsuz etkisi olan en yaygın etiketler şunlardır:

html hatalarını düzeltme

Sitenin sıralaması için daha az önemli olan kod hatalarıdır. Mizanpaj, kod düzenleme veya stilleri düzenleme sürecinde genellikle bir tabloyu, etiketi veya stili kapatmayı unutursunuz.

Kapalı olmayan kod parçası:

Dış bağlantıları kapatma:

Dış bağlantılar, kaynaklar arasında yüksek kaliteli bir etkileşim sürecidir. Kullanıcı yorumlarının yanı sıra, yasa dışı eylemler veya üçüncü taraf komut dosyalarının yüklenmesi nedeniyle farkında olmadan harici bağlantılar ekleyebilirsiniz. Site zararlı bilgiler içeriyorsa bu özellikle tehlikelidir. en iyi yol sorun giderme - kaldırma dış bağlantı. Başka bir seçenek de bağlantıyı bir "noindex" etiketi içine almak ve ayrıca "nofollow" parametresini ayarlamaktır. Örneğin:

HTML kodunun yapısı

Büyük ölçüde etkili yol, aynı anda sitenin çeşitli bölümlerini hızlı bir şekilde düzenlemenize yardımcı olacaktır. Bu yöntem, global bloklara benzer bir yapı oluşturmayı içerir. Bu durumda site kodu bölümlere ayrılır: üst, gövde, yan (1 veya daha fazla), alt. Her bölüm diğerlerinden bağımsız olarak düzenlenebilir.

Örneğin, sitenin genel sol bloğu şöyle adlandırılır:

"$GLOBAL_BLEFT$"

bu nedenle, bu blok kodun kök yapısına gömülebilir ve ayrıca noktasal olarak silinebilir:

"$GLOBAL_BLEFT$"

Birden fazla test, html kodunun bu bileşenlerini optimize etme sürecinde, konumlarda istikrarlı bir artış elde edebileceğinizi ve sitenin indekslenmesini önemli ölçüde iyileştirebileceğinizi göstermiştir.

Makale yalnızca temel örnekler içermektedir, önce internette çok sayıda bulunan çevrimiçi analizörleri kullanarak kodunuzu kontrol edin.

Bu çözümleyicilerden biri, bir siteyi HTML hataları için kolayca kontrol edebilen W3C doğrulayıcıdır, ancak onu düzeltmek için çok derine inmemelisiniz, hataları en aza indirmek için yeterlidir. Ancak mükemmeliyetçiler için bu servisçok yardımcı olacak

Okuma süreleri: 5 352

Sitenin ve barındırılan içeriğin yüklenme sürecini hızlandırmak için HTML kodunu ve basamaklı stil sayfalarını (CSS) optimize etmek gereklidir. Genel olarak, optimizasyondan uzun bir süre sonra zaman ve trafikteki tasarruf, hızdaki değişiklik dışarıdan pek fark edilmese bile önemli olacaktır.

HTML kodu optimizasyonu

HTML kodunun sitenin hızlı yüklenmesine katkıda bulunabilmesi için birkaç şartı sağlaması gerekir:

• Basit ve bilgilendirici olun. Geçerliliğini kontrol ettikten sonra, botların analiz etmesini kolaylaştırmak için hataları düzeltmeniz gerekir. Kod, sayfanın yapısını açıkça temsil etmelidir.
• Başlıklar, dizinler, bilgi blokları gibi sayfaların ana bileşenleri kolayca ve hızlı bir şekilde tanımlanmalıdır.
• Kodu gereksiz bilgilerden arındırmak, bunları içine koymak bireysel dosyalar(örneğin, CSS ve JS'yi kaldırabilirsiniz), yükleme hızını artıracak ve bu da botların işini kolaylaştıracaktır.

Bu koşulların yerine getirilmesi sağlandıktan sonra site daha hızlı, daha kullanışlı hale getirilebilir ve arama motoru botları tarafından indekslenmesinin etkinliği artırılabilir.

Kod azaltma ve CSS optimizasyonu

Hacmini azaltarak site kodunu kolaylaştırabilirsiniz. Bunu yapmak için birkaç işlem yapmanız gerekir.

Öncelikle flash teknolojilerinden, JavaScript'ten, çerçevelerden, resimle temsil edilen metinlerden kaçınmalısınız. Mümkünse, tüm öğeler ayrı harici dosyalarda oluşturulmalıdır (örneğin, yukarıda belirtildiği gibi CSS ve JS). Özel eklentiler, kodu optimize etmeye yardımcı olacaktır. Örneğin, HTML, CSS, JS kodunu (uygun kutuları işaretlerseniz) otomatik olarak optimize eden Autoptimize eklentisini yükleyebilirsiniz. Kullanıcılar tarafından anlaşılacak ve arama motorları tarafından doğru bir şekilde tanınacak, yetkin ve kullanışlı bir site navigasyonu kurmak gerekir. Bu, sitenin hızını, yükleme kalitesini ve indekslenmesini artıracaktır.

CSS optimizasyonuna gelince, bunu kendiniz yapabilir veya özel bir kaynağa veya programa emanet edebilirsiniz. Manuel optimizasyon zaman alıcı ve zaman alıcı bir süreçtir, ayrıca bazı hataları gözden kaçırabilirsiniz. Optimizasyon için bir program veya hizmet, eksiklikleri daha iyi ortadan kaldıracaktır, ancak sitede çalışan bazı işlevleri bozabilir ve kontrol edildikten sonra içerik doğru görüntülenmeyebilir, bu nedenle çalışmalarının düzeltilmesi gerekir.

CSS yapısını manuel olarak iyileştirmenin bazı yolları:

• CSS dosyasını aşırı yükleyen ve robotların çalışmasını zorlaştıran fazladan boşlukları ve satır sonlarını kaldırın;
• Benzer komutları birkaç kez tekrarlamak yerine genelleme özellikleri yazın;
• Yorumlarda özlü, anlaşılır açıklamalar kullanın;
• Görselleri değil, stilleri kullanarak sıra dışı yazı tiplerini yazın;
• Resimler için, içeriklerinin arama motoru botları tarafından tanınması için alt ve başlık (her resim için farklı) oluşturun;
• H1 araçlarını başlıklara - vb. uygulayın, böylece indeksleme sırasında doğru bir şekilde tanınırlar;
• Anahtar kelimelerde yalnızca sayfada kullanılan anahtar kelimeleri belirtin, sayılarını en aza indirin;
• Çeşitli ve özlü meta etiketler kullanın.

CSS ve HTML optimize ediciler

Özel hizmetleri kullanarak doğrudan tarayıcıda rahat ve hızlı bir şekilde optimize edebilirsiniz, örneğin:

• CleanCSS.com;
• CSS Optimize Edici;
• CSS Kompresörü
• CYPR.com;
• eklentiyi otomatik optimize et.

SEO ve BT uzmanları, sıkıştırma düzeyini düşükten yükseğe doğru seçmenize veya bireysel ayarları seçmenize izin verdiği için CleanCSS.com'u kullanmanızı tavsiye ediyor. Yüksek ve en üst düzeyde optimizasyondan sonra, site kodu neredeyse okunamaz hale gelir ve üzerinde değişiklik yapmak neredeyse imkansız hale gelir. Bu nedenle, başlamak için standart optimizasyonu kullanmalısınız. Belirli içerik için sıkıştırma modlarını seçebilir veya bireysel parametreleri optimize edebilirsiniz: yazı tiplerinin, resimlerin sıkıştırılması, boşlukların kaldırılması.

CY-PR.com'da CSS yapısını %25-30 oranında hafifleten benzer bir optimizasyon aracı da var ancak işlemden sonra kod dosyası oluşturmanın bir yolu yok.

Hizmetlerin geri kalanı, sitedeki bazı işlevlerin çalışmayı durdurması için kodu kökten değiştirebilir. Bu nedenle, onların yardımıyla, belirli site parametrelerinde yalnızca yerel değişiklikler yapmak daha iyidir.

Optimizasyondan sonra sitenin performansını, tasarımın doğru görüntülenmesini ve indirme hızını kontrol etmelisiniz. Normal, sitenin sayfalarının ve kullanıcı seçeneklerinin 3-5 saniyeden fazla yüklenmemesi durumudur.

Optimizasyon derecesini kontrol etmek ve HTML kodunun artık ne kadar verimli yazıldığını anlamak için aşağıdaki gibi hizmetleri kullanabilirsiniz:

• optimizasyon.com;
• Portal seo kontrol listesi;
• firebug eklentisi.

Bu araçlar, HTML kodunun miktarını azaltmak ve yapısını iyileştirmek için her şeyin yapılıp yapılmadığını kontrol etmenize yardımcı olacaktır. SEO kontrol listesi kaynağında, optimizasyon için halihazırda yapılmış olanların ve henüz yapılmamış olanların listesini kontrol edebilir ve tamamlanmış işler üzerinde bir işaret belirleyebilirsiniz.

Doğrulama

Doğrulama kontrol hizmetlerini - doğrulayıcıları kullanarak site kodunu hatalara karşı kontrol edebilirsiniz. validator.w3c.org ile verimli kod doğrulama yapılır

İlk kontrol sırasında sistem yarım binden fazla hata üretirse üzülmemelisiniz. Belirli bir kusuru düzelttikten sonra, kontrolü tekrar çalıştırabilirsiniz ve çok daha az hata olacaktır, çünkü bir kusur diğerlerini gerektirir ve düzeltildiğinde bunlar ortadan kalkar.

Düzeltilmiş ve optimize edilmiş koda sahip bir sitenin, hata içeren aşırı yüklenmiş HTML koduna sahip bir kaynağa göre arama sonuçlarında üst sıralarda yer alma olasılığı daha yüksektir.

Merhaba arkadaşlar, bu makaleden HTML kodunu nasıl temizleyeceğinizi, resimleri nasıl optimize edeceğinizi, meta etiketleri nasıl doğru bir şekilde biçimlendirip optimize edeceğinizi, siteyi nasıl hızlandıracağınızı, sitedeki komut dosyalarını neden optimize etmeniz gerektiğini öğreneceksiniz.

Dahili web sitesi optimizasyonu için önemli önlemlerden biri sayfa kodu optimizasyonu. Bu nedenle, kaynağın genel kalitesini iyileştirebilir, sayfa yükleme hızını artırabilir ve etkileşimli işlevlerin verimliliğini artırabilirsiniz.

HTML doğrulama ve standardizasyon

Sitenin herhangi bir tarayıcıda, farklı işletim sistemlerinde, mobil ve masaüstü bilgisayarlarda eşit derecede iyi çalışabilmesi için arama motoru tanıtımı ve olumlu bir kullanıcı deneyimi sağlamak esastır.

Ortak bir birleştirme elde etmek için, tüm siteler HTML'nin standart sürümleri temelinde geliştirilir. Bugün en alakalı olanları HTML 4.1 ve HTML5 sürümleridir. İkincisi, hala geliştirme aşamasında olmasına rağmen, web'de bu tür çok sayıda site yayınladı.

En popüler tarayıcıların tümü opera, Google Chrome, Mozilla Firefox onların içinde son sürümler yeni HTML5 hiper dili için desteği kullanın. Web siteleri oluşturmak için HTML5 kullanmanın önemi de şudur: mobil bilgisayarlar ameliyathane tabanlı Android sistemleri Flash teknolojisini desteklemez ve kullanıcılar videoyu SWF formatında görüntüleyemezler.

HTML5 tabanlı siteler, videoları indirip yüklemeye gerek kalmadan oynatabilir Adobe Flash programı oyuncu. Flaşsız kullanım eğilimi artıyor. normal operasyon siteler, bu formattaki flash videoların ve animasyonlu afişlerin kullanımını kademeli olarak bırakmakta fayda var.

Sitenin HTML kodunun geçerliliğini kontrol edin World Wide Web Consortium'un resmi web sitesinde ücretsiz olabilir, örneğin bu

doğrulayıcı.w3.org

Yerleşik doğrulayıcılar, iyi web sitesi oluşturucularda ve içerik yönetim sistemlerinde bulunur.

HTML kodunu temizleme

Web sayfalarının oluşturulması ve ardından düzenlenmesi sürecinde, programcı aceleyle teknik notlar bırakır, sayfalara yorum yapar, gereksiz etiketleri kaldırmayı unutur. Bütün bunlar sadece siteyi yavaşlatmakla kalmaz, aynı zamanda işlevselliği de azaltır. basit aracılığıyla HTML çöpünü kaldırma web sitesi sayfalarının yüklenmesini kelimenin tam anlamıyla %35 oranında hızlandırabilirsiniz.

Kötü amaçlı çöp, alıcı silindiği için hiçbir yere götürmeyen bozuk, bozuk bağlantıları da içerir. Bu tür bağlantılar arama motorlarında pek popüler değildir. Bozuk bağlantıların varlığı, kaynağın arama performansını olumsuz etkileyebilir.

Kırık linkler zaman zaman kendiliğinden ortaya çıkma eğiliminde olduğundan, düzenli olarak onları aramak ve kaldırmak gerekir. Bu hem harici hem de dahili bağlantılar için geçerlidir. İçerik yönetim sisteminde bozuk bağlantıları arama seçeneği yoksa, ücretsiz çevrimiçi hizmetlerden yararlanabilirsiniz.

http://creatingonline.com/site_promotion/broken_link_checker.htm

http://anybrowser.com/linkchecker.html

Grafik İçerik Optimizasyonu

Tüm görsellerin site sayfalarında yayınlanabilmesi için uygun şekilde işlenmesi gerektiğinden grafik optimizasyonuna dikkat etmek önemlidir.

• Fotoğraf yayınlamak için, bu dosya türü sağladığından, JPEG formatının kullanılması tavsiye edilir. en iyi kalite minimum ağırlık ile.

• Kalitenin çok önemli olmadığı resimleri kaydetmek için PNG formatı dosyaların ağırlığı 100 veya 200 KB'den fazla olmadığında.

• Herkes grafik dosyaları modern standartlara göre sıkıştırılmış bir biçimde ve sunucuda ayrı bir dizinde saklanması, ancak web sayfalarına gömülmemesi gerekir.

Resim içeren bir sayfayı düzenledikten sonra indirme hızını kontrol etmeniz gerekir. Sayfa, tarayıcıda en fazla beş saniye içinde görünmelidir. Aksi takdirde, gösteriden hemen çıkma oranı önemli ölçüde artar.

Tüm resimler ve fotoğraflar, İnternet'teki aramalarını iyileştirmek için anahtar kelimeler eklenerek optimize edilmesi gereken meta etiketlere sahiptir. Görüntü meta etiketlerini optimize etmek için temel gereksinim, benzersizliktir. Tüm resimlerin farklı başlıkları, araç ipuçları ve alternatif metinleri olmalıdır.

Web sayfası meta etiketleri

Şunun için meta etiketler: farklı sayfalar site benzersiz olmalıdır. Yinelenen etiketler bulunduğunda, arama motoru bunları birbirine yapıştırır ve bazı sayfalar bu şekilde dizine eklenmez. Deneyler, benzersiz site meta etiketlerinin sıralamaları ve trafiği yaklaşık %18 oranında iyileştirdiğini göstermiştir.

Başlık ve Açıklama etiketlerinin optimizasyonuna özellikle dikkat edilmelidir.

1. Sayfa başlığı, izin verilenden daha fazlasını içermemelidir. arama motoru karakter sayısı ve ana anahtar kelimeyi içerir.
2. Bir başlık için en uygun kelime sayısı altıdır.
3. Sayfanın açıklaması, bir tür satış metni olarak tasarlanmıştır. Açılış sayfası ve genellikle iki kısa cümleden oluşur. İlk cümle ana anahtar kelimeyi, ikincisi ise ek kelimeyi içerir.
4. Anahtar kelimeler meta etiketleri çok önemli değildir, ancak her ihtimale karşı orada olmalıdır.

Örneğin, genellikle kodun meta etiketlerinden sorumlu olan bir bölümünü motorun kendisinden kaldırdım.

Program öğelerinin optimizasyonu - komut dosyaları

Komut dosyası optimizasyonunun ilkeleri grafiklerle aynıdır - sayfaya yerleştirmeyin, sıkıştırılmış biçimde özel bir dizine kaydedin.

Sayfanız temiz olmalı, sitenizi ziyaret eden robot sadece üzerinde sadece bir makalenin ve gerekli meta etiketlerin olacağı temiz bir sayfa görmelidir. Bu nedenle, tüm komut dosyaları, sayaçlar vb. ayrı bir dosyaya koyun.

Metin içeriği optimizasyonu

Günaydın sevgili arkadaşlar! Haftanın büyük ölçüde açılış sayfasının yüklenmesini optimize etmeye ve hızlandırmaya ayrıldığı ortaya çıktı. Bugün bu alanda “manyak” olmaya devam edeceğiz. Sıradaki optimizasyon css kodu a. sana anlatacağım çevrimiçi servis stil sayfalarını optimize etmek için.

Bu hizmetler oldukça basittir ve prensipte çalışır:

“Optimize edilmemiş kod eklendi. Birkaç saniye bekledi. Optimize edilmiş kodu kopyaladı”

Gördüğünüz gibi oldukça basit ve ucuz ama herkes bunu yapacak zamanı bulamıyor. Ama boşuna!

Çevrimiçi css optimizasyonu

İlk adım, aşırıya kaçmanıza gerek olmadığını anlamaktır. Gerçek şu ki, örneğin boşluklar ve satır sonları sayfanın toplam ağırlığını artırır. Bunu öğrendikten sonra hepsini silmeye başlayabilirsiniz. Sonuç olarak, tamamen okunamayan ancak optimize edilmiş bir css kodunuz olacak.

Bu, yalnızca tek başınıza çalışıyorsanız ve stil sayfası bir daha asla veya neredeyse hiç düzenlenmeyecekse iyidir. Çünkü bir ekip halinde çalışırsanız, kodunuzu okuyan kişinin bunu anlaması çok zor olacaktır.

Ancak altı ay içinde stil sayfanıza kendiniz baksanız bile, içinde neyin sorumlu olduğunu kolayca anlamanız pek olası değildir.

Bu nedenle optimize ediyoruz, ancak çıldırmıyoruz - bu ilk.

İkincisi, css kodu optimizasyonu sunan hizmetleri kullanırken, orada neler olup bittiğini ve neyin optimize edildiğini anlamak önemlidir. Şimdi size bazı örnekler göstereceğim.

Örneğin, renkler. Genellikle bunları RGB standardında tanımlarız. Beyaz arkaplan bir eleman için aşağıdaki gibi ayarlanır

arka plan: #ffffff;

Ancak ilk 3 değer tekrarlanırsa geriye sadece onların kalabileceğini herkes bilmiyor. Örneğin, bunun gibi:

arka plan: #fff; arka plan: #000; renk: #123;

Akla gelen bir sonraki şey dolgudur (doldurma ve kenar boşluğu)

Dolgu: 10px 20px 10px 20px; /*yerine*/ dolgu: 10px 20px; kenar boşluğu: 15 piksel 20 piksel 15 piksel 20 piksel; /*yerine*/ kenar boşluğu: 15px 20px;

Ayrıca, yazı tiplerini kısaltarak css kodunu optimize edebilirsiniz:

Yazı tipi: kalın 18px Verdana, Arial, sans-serif;

yazı tipi boyutu: 18 piksel; yazı tipi ailesi: Verdana, Arial, sans-serif; yazı tipi ağırlığı: kalın;

Gördüğünüz gibi - üçe karşı bir satır. Ve böylece bazen stil sayfasının ağırlığını %20 - 30 oranında azaltmak mümkündür.

Hatırlanması gereken üçüncü şey, ister görseller ister css olsun, herhangi bir optimizasyondan önce her zaman yapmanız gerektiğidir. destek olmak(beklenmedik bir hata veya benzeri bir durumda). Düzenlemeden önce her zaman bir kopya oluşturmayı bir kural haline getirin.

Bu kadar. Gelelim servise.

Css kodunun çevrimiçi optimizasyonu için hizmete genel bakış.

Çoğu kişi, css kodunu optimize etmek için şu popüler siteleri kullanır:

alexvaleev.ru/cssoptimizer

css-school.ru/optimise

İşlevsellik pratik olarak aynı, basit ve anlaşılır. Ancak onları analiz ettikten sonra hem artıları hem de eksileri buldum. Bunlardan birine bakalım - css-school.ru/optimiser

Solda css kodu eklemek için bir pencere var ve sağda optimizasyon parametrelerini ayarlıyor. Pencereye daha yakından bakalım.

Sıkıştırma oranı.

Metnin okunabilir durumda kalması için standart sıkıştırma düzeyinin ayarlanması gerekir, bu durumda her yeni özellik şu şekilde yazılır: Yeni hat. "Yüksek" veya "maksimum" ayarlarsanız, dosya boyutu küçülür, ancak her şey tek satıra yazılır. Bu, daha fazla düzenleme için pek uygun değildir, ancak hiçbiri yoksa, "maksimum" değerini güvenle ayarlayabilirsiniz.

Bir sonraki pencere kendi optimizasyon şablonlarınızı ayarlamak içindir, onu atlayacağız.

Daha sonra, aynı özelliklere sahip seçicileri birleştirip birleştirmeyi seçmenizi sağlayan bir sekme gelir. Her şey projeye ve görevlere bağlıdır. Css kodunu kesinlikle belirli bir sırayla yazdıysanız ve her şey kesinlikle birbiri ardına ise, o zaman seçicileri birleştirmeyi seçmemelisiniz. Bu, kodda gezinmenizi kolaylaştıracaktır.

Stil optimizasyonu. Ayrıl - "güvenli"

Renkleri ve yazı tipi özelliklerini sıkıştırmak, bahsettiğim şeydi. Yazı tipi özelliklerinin sıkıştırılması bir sorun olmasına rağmen. Size yukarıda söylediğim gibi kodu optimize etmez.

Ayarların geri kalanı soru sormuyor. Genel olarak, tüm Rusça hizmetlerin çevrimiçi css kodu optimizasyonu, "hastalıktan" muzdarip. CSS3 kodunu optimize etmezler. Bu tür optimize edicileri tamamen terk etmeme neden olan şey.

Örneğin, aşağıdaki kodu girdim:

Satırlarda boşluklarla özel olarak yazılmış, her şey ayrıntılı, vb. Ve şöyle bir şey görmeyi bekliyordum:

H1 ( color: #fff; dolgu: 20px 25px; font: 700 18px Verdana, Arial, sans-serif )

Ama ne yazık ki şöyle oldu:

Beş yerine yedi satır. Bu bana uymadı. Daha iyi bir malzeme bulup size anlatmak istedim. Çünkü bazı insanların kısaltılmış stil girişlerine aşina olmadığını anlıyorum.

Ve hizmetlerin bazı işlevleri bana gereksiz geldi, iyi ya da sözde işlevsel. "Kandırılmış" bir kaynak görünümü oluşturmak için. Peki, neden "renkleri azalt" ın önünde bir onay işaretine ihtiyacım var? Elbette, kodumu optimize etmeye geldiysem, mümkün olan her şeyin daha kısa bir açıklamasına ihtiyacım var! (Benim fikrim)

Bu yüzden aramaya devam ettim ve css kodu optimizasyonunda ihtiyaçlarımı karşılayan kaynağı buldum. Burası Devilo.us

Size güvenle tavsiye edebileceğim gerçekten harika bir hizmet. İşlevsellik, önceki sitelerle aynıdır. Ama bu işi %100 yaptı. Görmek:

Gördüğünüz gibi sıkıştırma yüzdesi %43.3 iken önceki sitede %25 idi. Bayt olarak 58 > 37 çıktı. Çok sıkıcıyım. Ancak css dosyası 3000 satır olduğunda, bu optimizasyon belgenin ağırlığını yarıya indirebilir.

Elbette zamanla optimize edilmiş css kodunu nasıl yazacağınızı hemen öğreneceksiniz ve bu tür hizmetlere giderek daha az ihtiyacınız olacak, ancak kendinizi kontrol etmekten zarar gelmez. En azından fazladan boşlukların ve satır sonlarının varlığı için.

Ve bugün için - her şey. Yakında görüşürüz.