Çevrimiçi JS ve CSS site kodunu optimize etme - ayrıntılı bir kılavuz

Bu makaleyi dinle

Web sitesi JS ve CSS kod optimizasyonu, teknik web sitesi optimizasyonunun en önemli yönlerinden biridir. Bunun nedeni, veritabanı çağrılarının azalması ve kod yapısının kendisinin iyileştirilmiş okunabilirliği nedeniyle daha fazla site kaynağının serbest bırakılmasıdır.

Kural olarak, JavaScript ve CSS kod optimizasyonu, site yanıt hızını önemli ölçüde artırır. Böylece site daha hızlı çalışır ve sunucu kısmını daha az ciddiye alır.

Makalenin içeriği:

• JS ve CSS kodu - nedir bu?
• JS ve CSS kodunu optimize etme - komut dosyalarını ve stilleri neden optimize etmeniz gerekiyor?
• Apache, Nginx ve Node.js için Gzip modülü
• Küçültme ile Javascript'i Optimize Edin
• Web yazı tipi kullanımı için CSS optimizasyonu
• Uygun yazı tipi indirme seçeneğini kullanma
• Çevrimiçi kod optimizasyonu
• JS ve CSS'yi CMS Wordpress eklentileriyle küçültün

JS ve CSS site kodu - nedir bu?

JavaScript ve CSS her biri siteye belirli işlevler getiren yaygın programlama dilleridir. Ana web programlama dilleri olan HTML, JS, CSS kullanımı sayesinde site ile ideal bir kullanıcı etkileşimi sağlanmaktadır.

JavaScript yaygın bir programlama dilidir. Çeşitli komut dosyaları oluşturmanıza olanak tanır. Bu komut dosyalarının çoğu kullanıcının tarayıcısında yürütülür. JavaScript, kullanıcının siteyle etkileşimini geliştirir. Sitedeki mini uygulamaları (komut dosyaları) kullanarak belirli bir bilgi kümesini ortaya çıkarmak. JS komut dosyalarının görselleştirilmesi ve çıktısı, ikincisini sayfanın HTML koduna bağlayarak gerçekleşir. Hemen hemen tüm siteler, kompozisyonlarında JS (JavaScript) kullanır.

css - sitenin ana programlama dillerinden birini ifade eder. CSS (stil dosyası) - sitenin hemen hemen her öğesinin görünümü hakkında bilgi taşır. Renk ve konumdan belirli bir sayfa öğesinin kötü şöhretli animasyonuna kadar.

JS ve CSS kodunun optimizasyonu - neden gerekli?

JS ve CSS - kendi başlarına, çok fazla gereksiz olan oldukça büyük, ağır bir kodları var. Bir tarayıcının devasa bir kodlar tuvalini saniyenin çok küçük bir bölümünde okuması zordur. Böylece sayfanın ve tüm sitenin yüklenmesi bir bütün olarak yavaşlar. Bu dosyaların optimizasyonu, kodun boyutunu küçültmeyi ve gereksiz her şeyi kesmeyi amaçlar. Bu .... için geçerlidir:

• Kullanılmayan ve fazladan karakterler;
• boşluklar;
• Bitmemiş ve işlevsel olmayan kod satırları.

İşlemin kendisi normal bir dosyayı sıkıştırmaya benzer. İkincisinin ağırlığı ve boyutu çok daha küçük hale gelir. Ancak yine de kod insanlar için tamamen okunamaz hale gelir. Ancak arama robotları ve tarayıcılar, dosyanın tüm yapısını mükemmel bir şekilde atlar ve anlar. Turda harcanan süre birkaç kez azalır. Bu sıkıştırma sayesinde indirme hızı artar ve genel yanıt iyileşir.

Apache, Nginx ve Node.js için Gzip modülü

Gzip, internetin bugünkü kadar hızlı olmadığı bir zamanda yaratılmış harika bir teknolojidir. Arşivleyiciler popüler bir teknolojiydi (USB flash sürücüler 1 TB'a kadar depolama sağlayabildiğinden beri popülerlikleri azaldı).

Fikir, internetteki web trafiği için arşivleyicileri kullanmaktı (web sitesi dosyaları oluşturmaya benzer), bu nedenle gzip, statik (metin) dosyaları orijinal boyutlarının 99%'sine sıkıştırarak web sunucularındaki dosyaları sıkıştırmak için tasarlandı. JavaScript bir metin dosyası olduğundan, gzip, JavaScript dosyalarını sıkıştırmanın yanı sıra sayfa yükleme süresini azaltmak için kullanılabilir.

Küçültme ile Javascript'i Optimize Edin

Optimizasyon, özel bir JavaScript küçültme türüdür. Bu tür küçültücüler yalnızca gereksiz boşlukları, virgülleri, yorumları vb. kaldırmakla kalmaz, aynı zamanda "ölü kodun" önlenmesine de yardımcı olur:

• Google kapatma derleyicisi
• ÇirkinleştirmekJS
• Microsoft AJAX küçültücü

Web yazı tipi kullanımı için CSS optimizasyonu

Google Yazı Tipleri ve benzeri yazı tipi oluşturucular, web yazı tiplerinde devrim yarattı, ancak birkaç satır yazı tipi kodu yüzlerce kilobayt bant genişliği tüketebilir.

1. Yalnızca ihtiyacınız olan yazı tiplerini indirin: kullanılmayan yazı tiplerini kaldırın ve yeni yazı tiplerinin gerekip gerekmediğini kontrol edin.
2. Yalnızca ihtiyacınız olan ağırlıkları ve stilleri indirin: Çoğu yazı tipi üreticisi, indirmeleri belirli karakter kümeleriyle (örneğin, yalnızca latin), ağırlıklarla (kalınlık) ve italiklerle (eğimli) sınırlayabilir. Sonuçlar kötü olsa da, tarayıcılar otomatik olarak eksik stilleri oluşturabilir.
3. İhtiyacınız olan karakter sayısını sınırlayın: Nadiren kullanılan yazı tipleri belirli karakterlerle sınırlandırılabilir. Örneğin, Open Sans'ta "CSS Eğitimi" başlığı, Google Fonts sorgu dizesine & text= parametresi eklenerek tanımlanabilir: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Değişken yazı tiplerini göz önünde bulundurun: Değişken yazı tipleri, vektör enterpolasyonu kullanarak çok çeşitli stiller, ağırlıklar ve italik tanımlar. Yazı tipi dosyası biraz daha büyüktür, ancak yalnızca bir tanesine ihtiyacınız vardır, birden çok dosyaya değil. Özyinelemeli yazı tipi, değişken yazı tiplerinin esnekliğini gösterir.
5. Yazı tiplerini yerel sunucunuzdan indirin. Kendini barındıran yazı tipleri daha verimlidir. Daha az DNS araması gerekir ve tüm modern tarayıcıların desteklediği WOFF2'nin yüklenmesini sınırlayabilirsiniz. Daha eski tarayıcılar (IE) işletim sistemi yazı tipine geri dönebilir.
6. İşletim sistemi yazı tiplerini göz önünde bulundurun: Bu 500K web yazı tipi harika görünebilir, ancak kamu malı Helvetica, Arial, Georgia veya Verdana'ya geçerseniz kimse bunu fark edecek mi? İşletim sistemi uyumlu veya web uyumlu yazı tipleri, üretkenliği artırmanın kolay bir yoludur.

Uygun yazı tipi indirme seçeneğini kullanma

Web yazı tiplerinin yüklenmesi ve işlenmesi birkaç saniye sürebilir. İhtiyacınız olan:

1. Stilsiz metin flaşı göster (FOUT): İlk kullanılabilir yedek yazı tipi ilk olarak kullanılır, ancak web yazı tipi hazır olduğunda değiştirilir.
2. Görünmez metnin flaşını göster (FOIT): Metin, web yazı tipi hazır olana kadar görüntülenmez. Bu, bir yedek yazı tipine dönmeden önce genellikle üç saniye bekleyen modern tarayıcılardaki varsayılan işlemdir.
   İkisi de mükemmel değil.

font-display CSS özelliği ve Google Font & display= ayarı bir alternatif seçebilir:

• otomatik: Varsayılan tarayıcı davranışı (genellikle FOIT).
• blok: Etkili bir şekilde FOIT. Metin üç saniyeye kadar görünmez. Yazı tipi değişikliği yoktur, ancak metin bir süre sonra görünebilir.
• takas: Etkili FOUT. İlk yedek, web yazı tipi kullanılabilir olana kadar kullanılır. Metin hemen okunabilir, ancak yazı tipi değiştirme etkisi can sıkıcı olabilir. Font Style Matcher, benzer boyutta bir yedek tanımlamak için kullanılabilir.
• geri dönüş: FOIT ve FOUT arasında bir uzlaşma. Metin kısa bir süre için görünmez (genellikle 100 ms), ardından web yazı tipi kullanılabilir olana kadar ilk geri dönüş kullanılır.
• isteğe bağlı: Yazı tipi değişikliği olmaması dışında geri dönüşe benzer. Web yazı tipi yalnızca başlangıç döneminde mevcutsa kullanılacaktır. İlk sayfa görünümü büyük olasılıkla yedek yazı tipini görüntülerken, sonraki sayfa görünümleri indirilen ve önbelleğe alınan web yazı tipini kullanır.

Takas, yedekleme veya isteğe bağlı kullanmak, gözle görülür bir performans artışı sağlayabilir.

Çevrimiçi JS ve CSS kod optimizasyonu

İnternette, oldukça fazla sayıda çevrimiçi hizmet var. Birkaç dakika içinde, JavaScript ve stil dosyalarını sıkıştırmanın tüm rutin işlerini yapabilirler. Hepsinin kodla çalışmak için kendi algoritmaları vardır. Bu çeşitliliğin arka planına karşı, en önemli iki hizmet ayırt edilebilir. Etkili sıkıştırma eşiği, benzer rakip çevrimiçi araçlardan çok daha yüksektir. Bu iki web aracına daha yakından bakalım:

cssresizer.com
Yakın rakiplerle karşılaştırıldığında 84%'nin sıkıştırma verimliliği. Önemli sıkıştırmalarda bile kodun geçerliliği korunur. Bu şekilde harika bir optimize edilmiş kod elde edebilirsiniz. Bu araçla çalışmak sezgiseldir ve birkaç sıkıştırma yöntemi vardır:

• Maksimum;
• hızlı;
• Baskıyı azaltma;

Şu şekilde sıkıştırabilirsiniz:

• URL - adres;
• Dosya yükleme;
• Doğrudan kod girişi;

Refresh-sf.com

JavaScript, CSS ve HTML'yi küçültmek için bir başka ama eşit derecede güçlü web arayüzü. Araç, çalışmak için UglifyJS 2, Clean-CSS ve HTML Minifier'ı kullanır. Bu durumda sıkıştırma verimliliği, kod geçerliliğinde gözle görülür ihlaller olmadan 85%'ye ulaşır. Sıkıştırma, araç penceresine doğrudan kod girilerek yapılabilir.

JS ve CSS'yi CMS Wordpress eklentileriyle küçültün

Hepimizin bildiği gibi, dünya çapında önemli bir dağılıma sahiptir. 2018 verilerine göre bu cms lider konumdadır. Özellikle WordPress için birkaç popüler optimizasyon eklentisini düşünün:

Eklentiyi Otomatik Optimize Et

HTML, JS ve CSS optimizasyon eklentisi. CMS Wordpress'te siteleri hızlandırmak için en popüler eklentilerden biridir. Basit ve işlevsel bir konfigürasyon arayüzüne sahiptir. Sıkıştırma işlemi anında gerçekleşir.

• Optimizasyon (HTML, JS, CSS) ve CDN kurulumu.
• Emojileri, Google yazı tiplerini, sorgu dizelerini statik kaynaklardan kaldırma.
• Görüntüleri optimize etme yeteneği.

Webcraftic Clearfy Eklentisi

Önceki eklenti kadar eski değil. Ancak benzer rakipler arasında da talep görüyor ve popüler. Webcraftic Clearfy - oldukça karmaşık bir yapılandırma arayüzüne sahiptir. En iyi sonuç için birleşik bir eklenti kombinasyonundan oluşur.

Ayarlar sayfaları menü bölümlerine ayrılmıştır. Böylece sitenin belirli bölümlerini, örneğin HTML'yi optimize etmek mümkündür. Bu eklenti ne yapabilir?

• Optimizasyon (resimler, JS, CSS, HTML ve betikler);
• Kiril harf çevirisi ve kopyaların kaldırılması. Alt niteliklerle çalışma ve uygun robots.txt oluşturma. Sunucu başlıkları ve yanıtları ile çalışma.
• Sahipsiz WordPress Widget'larını Kaldırma.
• WordPress sürümünü gizleme ve sorgu değişkenlerini statik sorgulardan kaldırma. Yazarın oturum açma bilgilerini ve yönetici oturum açma sayfasını gizleme.
• Yorumların genel olarak kaldırılması veya temizlenmesi. Yorumlarda kontrolü kaydedin.
• WordPress nabzını ve üst yönetici panelini ayarlama.
• Eklenti bileşenleri üzerinde kontrol.

Sonuç olarak, kesin bir sonuç çıkarılabilir. Yukarıdakilere dayanarak, js ve css'yi sıkıştırmak o kadar da zor bir şey değil. Bu aksiyonlar sayesinde projenizin yanıt verme hızı önemli ölçüde artacaktır.

Bu makaleyi okumak:

• Web sayfası performans optimizasyonu
• Site Hızı için CSS'yi Optimize Etme - 9 Yol

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