HTML, CSS ve JavaScript'i azaltın: Bu şekilde çalışır WordPress

9 Dk.
css minification
Son güncelleme: 02.09.2020

Minifying HTML, CSS ve JavaScript dosyaları web sitenizin yükleme hızını optimize etmek için birçok küçük ayarlama vidaları biridir. Bu makalede, size söylenecek Sven Scheuerle , css, HTML ve Co küçülme hakkında ne kadar yükleme süresi yalın kod üzerinden tasarruf ve hangi WordPress - Plugins uygulama da size yardımcı olur.

Bugün World Wide Web'deki web sitelerine bakarsanız, bunların 10 yıl önceki sayfayla hiçbir şekilde karşılaştırılamayacaklarını hemen fark edersiniz. Başlangıçta, basit bir HTML kodu ve küçük bir metin yeterliydi. Ancak günümüzde, Web sayfaları genellikle hem HTML, CSS hem de JavaScript'ten oluşan kapsamlı kodlardan oluşmaktadır. Bu kısmen artık web siteleri için kullanılabilir işlevleri aralığı nedeniyle, ama aynı zamanda web tasarımında kullanılan tasarımlar ve şablonlar giderek artan sayıda. 

Bu yüzden html, CSS ve hatta JavaScript dosyaları için hızlı bir şekilde boyutu kilobayt yüzlerce ulaşmak için nadir değildir. Tüm bu kodları dosyalarda işlemek ve web sayfasını görüntüleyebilmek için, web tarayıcısı sunucuya çok sayıda istek (http istekleri olarak adlandırılır) gönderir. 

Ne kadar çok "istek" gönderilirse, yükleme süresi o kadar uzun olur. Sorgu sayısını mümkün olduğunca düşük tutmak ve böylece web sitesinin yükleme süresini korumak için dosyaları birleştirmeniz ve sıkıştırmanız gerekir.  

HTML, CSS ve JavaScript'in yanlış laştırılması ne anlama gelir?

Minification-yani, HTML, CSS ve co. dosya boyutunu mümkün olduğunca azaltmak için- herhangi bir iyi OnPage optimizasyonu bir parçasıdır. Yükleme sürelerinin yalnızca küçük bir kısmını hesaba katsa da, arama motorlarında sıralamanız için de belirleyici olabilir. 

Sadece WordPress şarj süresini optimize etmek için araçlar sağlamasıyla bilinmemektedir. Bu nedenle, sizin performansını artırmak gerekir WordPress düzenli olarak sayfa.

RB Performans E Kitap Bülteni 02

Yükleme sürelerini azaltın

Şimdiye kadar böyle bir araç kullanmış herhangi bir web sitesi operatörü PageSeepd Öngörüleri Google, kesinlikle bu optimizasyon önerisi farkında: "CSS azaltın"

Bu tedbir, PageSpeed Insights CSS dosyalarını almak için sorgular (istekler) büyük ölçüde sitenin yükleme süresini etkiler sönerilir. Ayrıntılı bir açıklama ve araçtaki diğer mesajların açıklaması makalede bulunabilir "Google Pagespeed - Anahtar Hata Mesajları". 

Nasıl CSS azaltılması web sitenizin yükleme süresini etkileyebilir, benim blogbir şelale diyagramı kullanmak istiyorum bloggiraffe.de Göster. Örnekler yalnızca küçük bölümlerdir, ancak yükleme süresini nasıl azaltacaklarını zaten açıkça gösterirler.

Örnek 1 - Sıkıştırılmamış (çökmemiş):

css yeniden sıkıştırılmış
Şelale diyagramı - HTML, CSS ve JavaScript dosyalarını sıkıştırmadan

Örnek 2 - Sıkıştırılmış (azaltılmış):

css sıkıştırılmış
Şelale diyagramı - HTML, CSS ve JavaScript dosyalarının sıkıştırış ile

Ana etki alanını geri alsam bile, yükleme süresini 1233 milisaniyeden 860 milisaniyeye düşürebildiğimi görebiliyorum. Tek tek dosyaların yükleme süreleri de en aza indirilebilir.

HTML, CSS ve JavaScript dosyalarını sıkıştırırken ne olur? 

Makalede kısaca belirtildiği gibi, HTML, CSS ve JavaScript gibi dosyaları sıkıştırırken, tek tek dosyalar tek bir dosyada birleştirilir. 

Sonuç olarak, belirli bir web sitesine erişebildiğiniz tarayıcı, web sitesini görüntülemek ve gerekli komut dosyalarını yüklemek için sunucuya daha az istek göndermek zorundadır.

Günlük bir anlayış örneği

Süpermarkete gittiğinive alışveriş listenizde 10 ürün olduğunu hayal edin. Ancak, bu farklı koridorve raflarda mevcuttur. 

Sonuç: Her bir ürünü bulup alışveriş sepetine koyana kadar çok zaman alır. 

Çözüm: İhtiyacınız olan ürünleri süpermarketle önceden paylaşabilirsiniz. Bu, ürünlerinizi bir raf içinde sağlar, böylece sadece alışveriş sepetine koymanız ve ödeme sırasında ödeme niz gerekir. 

Sonuç: Bir raf içinde tüm ürünleri bir araya getirerek, sadece süpermarket üzerinden bir yol yürümek ve çok fazla zaman kazanmak zorunda. Bu web sitenizin tek tek kodları ve komut dosyası nın minification ile nasıl çalışır. Böylece pratikte her şeyin nasıl işlediğini görebilirsiniz, size bunu küçük örneklerle göstermek istiyorum. 

Veri ekonomisi sadece performans optimizasyonu ile yardımcı olmaz.
Çünkü kaynakların bilinçli kullanımı da web sitenizin daha sürdürülebilir hale getirmek için yardımcı olur. Konulara katkıları okuyun Yeşil nasıl WordPress ? Ve Yeşil Hosting Tarafından.

HTML

Hypertext Biçimlendirme Dili (HTML), bir Web sitesinin temel çerçevesi için gereklidir. Metinler, bağlantılar ve hatta resimler bu şekilde çıktı. 

Örneğin, standart bir HTML kodu şu na benzer:

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Sıkıştırılmış:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CsS (Basamaklı Stil Sayfaları) uygun bir programlama dili değildir. Ancak, sözde stil sayfası dili tek tek web sitesi öğelerinin görünümünü değiştirmek için kullanılır. 

Örneğin, standart bir CSS kodu şuna benzer:

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Sıkıştırılmış:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

Javascript

JavaScript aslında web tarayıcılarında dinamik HTML çıkışı için geliştirilen bir komut dosyası sadece dildir (wikipedia.org). Bugün, web sitesi operatörleri html ve CSS genişletilmiş kullanma seçeneğine sahiptir. 

Standart bir JavaScript kodu (wiki.selfhtml.org) örneğin şuna benzer:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Sıkıştırılmış:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

Yukarıdaki örneklerin yardımıyla html, CSS ve JavaScript kodunun nasıl çalıştığını çok güzel görebilirsiniz. Gelişmiş ve profesyonel olarak, bu sıkıştırmayı el ile de gerçekleştirebilir ve linkcode-generator.de Kullanın. Olarak WordPress -Kullanıcılar size özel "Minify verebilir Plugins " bu işi almak için. Bu sadece zaman kazandırır, ama aynı zamanda tamamen otomatik olarak çalışır.

5 Minify Plugins Için WordPress

Aşağıdaki listede, ben beş popüler minification var Plugins hangi HTML, CSS ve JavaScript sıkıştırma çalışması alacak. 

#1 Birleştirme + Minify + Yenile

minify yenilemeyi birleştirme

Nasıl adı Plugins Birleştirme + Minify + Yenile (Birleştirme + Simge Durumuna Küçült + Güncelleme) zaten diyor, bu aracın odak CSS ve JavaScript kodu sıkıştırma üzerindedir. 

Bu, Plugin basamaklı stil sayfalarını (CSS) ve Javascript dosyalarını tek tek gruplarhalinde özetler. Bunlar da CSS için Minify ve JavaScript için Google Kapatma ile en aza indirilir. 

Kurulumdan sonra WordPress size sunar Plugin Birleştirme + Minify + Web sitenizin yükleme süresini optimize etmek için bazı ayarları yenileyin.

minify yenileme wordpresspng birleştirme

Örneğin, CSS ve JS dosyalarını birleştirip birleştirmemeyi seçebilirsiniz. Ayrıca, sıkıştırma WP-Cron üzerinden gerçekleşecek olup olmadığı ve veri dışında önbelleğe veya bir Gzip dosyası içinde sıkıştırılmış olmalıdır. 

Çok yararlı bir işlev sözde "HTTP2 Server Push". Sunucu, bir sorgu için uygun tarayıcıya birkaç yanıt gönderir. 

Birleştirme + Minify + Yenile'nin en önemli 3 özelliği Plugins : 

  • CSS ve JavaScript'i Birleştirme/Sıkıştırma
  • HTTP2 Sunucu Push
  • Çok site özellikli

#2 WP Süper Minify

wp süper minify

Ile Plugin WP Süper Minify CSS ve JavaScript dosyaları küçültülebilir ve önbelleğe alınabilir. Bu dosyaların hızlandırılmış yükleme si Minify PHP Framework üzerinden mümkün hale getirilir. 

Bu konuda özel bir şey Plugin bu bir açık kaynak yazılım olduğunu. Bu nedenle aracın kaynak kodu açıktır ve herhangi bir kullanıcı tarafından daha da geliştirilebilir.

WP Super Minify ayarlarında kullanıcılar için çok fazla seçenek yoktur. Burada yalnızca JavaScript ve CSS sıkıştırma ayarları na buradan görülebilir.

wp süper minif WordPress

WP Super Minify'nin temel özellikleri Plugins : 

  • CSS ve Javascript dosyalarının sıkıştırıltımı / azaltılması
  • Minify PHP Çerçeve

#3 Hızlı Hız Minify

hızlı hız minify

Bu, Plugin Hızlı Hız Minify geliştiriciler ve gelişmiş kullanıcılar için yükleme süresi optimizasyonu sağlar. Bir yandan, CSS ve Javascript dosyalarını birleştirerek HTTP isteklerini azaltır, diğer yandan PHP Minify ile dosyaları en aza indirir. 

Inç WordPress -Backend Minify yükledikten sonra bulacaksınız Plugins kesinlikle bir veya diğer kullanıcı ezmek olabilir çok sayıda ayar seçenekleri. İyi bir şey, birçok varsayılan ayarları zaten ayarlanmış olmasıdır, bu yüzden laymen için yeterli Plugin Etkinleştirmek. 

Gelişmiş kullanıcılar ve geliştiriciler için, Plugin Hızlı Hız Minify birçok oyun ve optimizasyon olanakları.

hızlı hız minify WordPress

Buna ek olarak, bu Plugin ayrıca bir Pro sürümü. Bu, çeşitli CSS ve JavaScript dosyalarını hariç tutmanızı sağlar. 

Hızlı Hız Minifyana özellikleri: 

  • HTML, CSS ve JavaScript dosyalarının sıkıştırıltımı / azaltılması
  • PHP Minify
  • Dosyaları ve komut dosyalarını hariç tutma
  • statik önbellek dosyaları
  • WP CLI desteği
  • Çeşitli önbelleğe alma ile uyumludur Plugins

#4 Otizm

otizm

Bu, WordPress - Plugin Otizm web sitenizin kolay optimizasyon sunuyor. Sayfanızın yükleme süresini hızlandırmak için birkaç basit adımda HTML, CSS ve JavaScript dosyalarını sıkıştırabilirsiniz. 

Bunu yaparken, autoptimize- Plugin Komut dosyaları, örneğin, altbilgide ve HTML, CSS ve JavaScript gibi dosyaların yüklenmesiveya Google Fontlar gibi diğer birçok dosyanın yüklenmesi geciktirir.

Için önemli RAIDBOXES Müşteri

Otistik diğer önbelleklerle uyumlu değildir, örneğin RAIDBOXES Sunucu önbelleği. Bu nedenle sistemimizde Otizm'i kullanmanızı şiddetle tavsiye ederiz!

En kısa zamanda sen Plugin Inç WordPress yüklü, "JS, CSS, HTML", "Resimler" ve "Ekstralar" gibi ayarlarda çeşitli sekmeler bulacaksınız. Bireysel olanaklar ve seçenekler burada çok iyi ve aynı zamanda çok iyi anlaşılabilir laymen için açıklanmıştır.

otizm WordPress

"JS, CSS & HTML" sekmesinde JavaScript, CSS ve HTML dosyaları için çeşitli optimizasyon seçenekleri arasından seçim yapabilirsiniz. Görüntüler sekmesi, görüntüleri otomatik olarak optimize etmenizi ve resim dosyalarını yüklemeyi geciktirmenizi sağlar. 

Menü öğesi "Ekstralar" altında, örneğin Google Fontlar, emojiler ve üçüncü taraf etki alanları üzerinden dosya yükleme için daha fazla otomatik optimizasyon yapılabilir. 

Otizm'in temel özellikleri: 

  • HTML, CSS ve JavaScript dosyalarının en aza inme / önbelleğe alınması
  • Görüntülerin optimizasyonu
  • Google Yazı Tiplerini Kaldırma
  • Emojileri kaldırın
  • JavaScript'i senkronize etme
  • Çeşitli önbelleğe alma ile uyumludur Plugins

#5 WP Işık Hızı

wp ışık hızı

Söz konusu olduğunda Plugin WP Işık Hızı aynı zamanda bir WordPress - Plugin , HTML, CSS ve JavaScript dosyalarını özetler. Güçlü Plugin ayrıca önbellek ve Gzip sıkıştırma, bir veritabanı temizleme sistemi ve htacces optimizasyonu vardır. 

WP Işık Hızı'nın ücretsiz sürümünde Plugins tüm standart özellikler web sitenizi optimize etmek için kullanılabilir. Bu şekilde, Plugin ayarlar, en aza indirmek ve özetlemek istediğiniz tek tek grupları (HTML, CSS, JavaScript) seçin.

wp ışık hızı WordPress

Buna ek olarak, Pro sürümünde Plugins komut dosyalarını hariç alma veya taşıma gibi diğer bazı özellikler kullanılabilir. 

Dosyaların saf sıkıştırma ek olarak, WP Speed of Light kolayca net arka uç üzerinden kullanabileceğiniz birçok diğer işlevleri sunuyor. 

En önemli işlevleri Plugins : 

  • HTML, CSS ve JavaScript dosyalarının sıkıştırığı
  • Önbellek ve Gzip sıkıştırma
  • Grup araçları
  • Veritabanı temizleme
  • Görüntü optimizasyonu

Bu, Plugins doğrudan karşılaştırma

 Birleştirme + Minify
+ Yenile
WP Süper
Küçült -mek
Hızlı Hız
Küçült -mek
OtizmWP Hızı
onun Işığı
Ücret -sizEvetEvetEvetEvetEvet
Için uygundurYeni başlayan -larYeni başlayan -larGelişmiş + ProfesyonellerBaşlangıç + İleriBaşlangıç + İleri
HTML sıkıştırmaEvetEvetEvet
CSS sıkıştırmaEvetEvetEvetEvetEvet
JavaScript sıkıştırmaEvetEvetEvetEvetEvet
Inceleme4/53/54/55/54/5

Sonuç

HTML, CSS veya JavaScript dosyalarını azaltmak, web sitenizin yükleme sürelerini birkaç milisaniye artırmanıza yardımcı olabilir. Bunun için, WordPress bazı çok yararlı ve ücretsiz Plugins seçim yapmak. 

Bu ayar vidası OnPage optimizasyonunuzun yalnızca küçük bir parçası olsa bile, her zaman tekrar tekrar kontrol edilmelidir. Bu, web sitenizin yükleme süresinin yukarıdaki dosyalardan olumsuz etkilenmemesini sağlar.

Katkı resmi: Paula Schmidt | Unsplash

Sven Scheuerle - Tutku ile serbest meslek serbest ve bağlı pazarlamacı, uzun yıllar online pazarlama aktif olmuştur. O da bir blogcu ve düzenli olarak kendi blog BLOGGiraffe.de, online iş serbest meslek raporları ve okuyucularıipuçları ve hileler verir.

Bu makaledeki yorumlar

Yorum yaz

E-posta adresiniz yayınlanmayacaktır. Gerekli alanlar * Işaretlenmiş.