WordPress'te JavaScript, CSS ve HTML Dosyaları Nasıl Küçültülür?

WordPress web sitesinde JavaScript, CSS ve HTML Dosyalarını küçültmek ister misiniz?

Kod küçültme, dosyanın boyutunu %40'a kadar azaltabilir. Ve bazı durumlarda, hatta %50.

Dosya boyutunu küçültmek sitenin yükleme hızını etkiler ve WordPress siteniz biraz hız artışı sağlar.

Bu yazıda size WordPress'te JavaScript, CSS ve HTML dosyalarını nasıl küçülteceğinizi anlatacağım.

• Minifikasyon nedir?
• Minifikasyonun Önemi
• Hız Testinde kod küçültme
• JavaScript, CSS ve HTML'yi Küçültmenin Yolları

Minifikasyon nedir?

Küçültme, JavaScript, CSS ve HTML dosyalarının gereksiz kısımlarını daha kompakt hale getirmek için silmek anlamına gelir. Geliştirici, hem bilgisayar hem de insanlar için kod yazar. Kodu okunabilir hale getirmeleri gerekiyor.

Kodu anlamak için satır sonları, boşluklar, yorumlar, fazladan karakterler vb. Ancak tarayıcının, kodu yürütmek için gereksiz tüm öğelerine ihtiyacı yoktur.

Küçültme, koddaki tüm boşlukların ve fazladan karakterlerin kaldırılması anlamına gelir. Şimdi, insan kodu anlamayabilir, ancak bilgisayarlar için öncekiyle aynı.

Ancak, gereksiz tüm ekstra parçaların silinmesi nedeniyle dosyanın boyutu küçülmüştür. Web sitesinin daha hızlı yüklenmesi anlamına gelir.

Javascript Küçültme

Javascript'in küçültülmesi, tüm Javascript yorumlarını (//…) ve koddaki boşlukları siler.

Bir kodlayıcı tarafından yazılmış temiz bir Javascript kodu şöyle görünür:

 let wrapper const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)) async function writingAll (stringTarget, container){ wrapper = document.querySelector('['+container+']') const stringsContainer = document.getElementsByClassName(stringTarget) while(wrapper){ for (i=0; i < stringsContainer.length ; i++){ const string = stringsContainer[i].textContent await write(string) await sleep(1000) await erase() await sleep(1000) }; } }; async function write(text){ let index = 0 while(index < text.length){ const timeout = 100 await sleep(timeout) index++ wrapper.innerHTML = text.substring(0, index) } }; async function erase() { while(wrapper.textContent.length){ const timeout = 100 await sleep(timeout) wrapper.textContent = wrapper.textContent.substring(0, wrapper.textContent.length - 2) } }; writingAll('item', 'data-text');

Küçültme işleminden sonra aynı kod şöyle görünecektir:

 let wrapper;const sleep=e=>new Promise(t=>setTimeout(t,e));async function writingAll(e,t){wrapper=document.querySelector("["+t+"]");const n=document.getElementsByClassName(e);for(;wrapper;)for(i=0;i<n.length;i++){const e=n[i].textContent;await write(e),await sleep(1e3),await erase(),await sleep(1e3)}}async function write(e){let t=0;for(;t<e.length;){const n=100;await sleep(n),t++,wrapper.innerHTML=e.substring(0,t)}}async function erase(){for(;wrapper.textContent.length;){const e=100;await sleep(e),wrapper.textContent=wrapper.textContent.substring(0,wrapper.textContent.length-2)}}writingAll("item","data-text");

CSS Küçültme

CSS küçültme, CSS dosyalarından tüm fazladan boşlukları ve yorumları çıkarır.

Bir geliştiricinin temiz bir CSS kodu şöyle görünür:

 .wrapper { padding: 10px; margin: 0 auto; width: 500px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .item { visibility: hidden; display: none; } h2 { font-size: 50px; margin: 0; color: #3a3a3a; text-align: left; } > div { min-height: 20px; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: flex-end; font-weight: bold; color: orange; &:after { content: ""; width: 10px; height: 4px; display: block; background: black; color: orange; margin-bottom: 4px; margin-left: 2px; animation-duration: 350ms; animation-name: fade; animation-direction: alternate; animation-iteration-count: infinite; } } } @keyframes fade { from { opacity: 1; } to { opacity: 0; } }

Küçültmeden sonra kısalır.

 .wrapper{padding:10px;margin:0 auto;width:500px;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none}h2{font-size:50px;margin:0;color:#3a3a3a;text-align:left}to{opacity:0}

HTML Küçültme

HTML küçültme, fazladan boşluk, biçimlendirme, satır sonları ve benzer içeriği kaldırır.

Bir HTML kodu şöyle görünür:

 <div class="wrapper"> <div data-text></div> <span class="item">UI & UX designer</span> <span class="item">Webdesigner</span> <span class="item">Frontend developer</span> <h2>I'm John Doe</h2> </div>

Küçültmeden sonra aynı HTML kodu şöyle görünür:

 <div class=wrapper> <div data-text></div> <span class=item>UI & UX designer</span> <span class=item>Webdesigner</span> <span class=item>Frontend developer</span> <h2>I'm John Doe</h2> </div>

Kodu küçültmeyi açıklamak için bu Codepen Projesi'nden aldım.

Minifikasyonun Önemi

Gördüğünüz gibi, kodun küçültülmesi, dosyalardan çok fazla alan kaldırıyor. Boyut küçülür ve sayfa eskisinden daha açık hale gelir.

Bu, sitenin yüklenme hızını artırır.

Pek çok uzman bunun hızda küçük bir fark yarattığını söylese de, bu fark önemsizdir.

Ama bir fark yaratabiliyorsa, yapmaya değer. Ve bunu yapmak çok basittir ve herhangi bir risk söz konusu değildir.

Hız Testinde kod küçültme

Kodun küçültülmesini önerip önermediklerini kontrol etmek için GTmetrix hız testini çalıştıralım.

Test etmek için HarperCollins Hindistan sitesini alıyorum.

GTmetrix, Javascript küçültme ile ilgili bu sonucu verir.

Gördüğümüz gibi, dosya boyutunu küçülterek küçültebileceğimiz birçok script var.

Web sitenizin hızını test edin ve Kod Küçültme sorununu alıp almadığınızı kontrol edin.

JavaScript, CSS ve HTML'yi Küçültmenin Yolları

WordPress'te JavaScript, CSS ve HTML'yi küçültmenin iki kolay yolu vardır.

1. Manuel Yöntem
2. Eklentiyi Kullanma

Manuel Yöntem

El ile, koddaki tüm karakterleri kendiniz kaldıracağınız anlamına gelmez. Birçok araç, kod dosyalarını küçültmenize yardımcı olacaktır.

Ancak kod dosyalarını küçültülmüş kod dosyalarıyla manuel olarak değiştirmeniz gerekir.

Adım 1: Küçültmeye ihtiyaç duyan tüm kodu bulun.

Bu, GTmetrix hız testi ile yapılabilir.

Metni daha önce yaptık ve sonuçta size tüm dosyaların listesini verdiğini görebiliriz.

Adım 2: Optimize edilmiş sürümü indirin.

"Optimize edilmiş sürüm"e tıklayın. Bu, GTmetrix'in size verdiği küçültülmüş koddur.

3. Adım: Dosyaları yükleyin

Şimdi indirilen küçültülmüş Javascript, CSS ve HTML dosyalarını WordPress dizinine yükleyin.

Kaynak kod dosyalarını küçültülmüş sürümle değiştirmeniz gerekir. Bu FTP istemcisi tarafından yapılamaz veya dosyaları cPanel ile değiştirebilirsiniz.

Alternatif olarak:

GTmetrix tarafından sağlanan "optimize edilmiş sürümü" indirmeniz gerekmez. Kod dosyalarını WordPress sitenizden indirin ve ardından çevrimiçi araçları kullanarak bunları küçültün.

JavaScript'i Küçültmeye Yönelik Araçlar

• JavaScript Küçültücü
• Google Kapatma Derleyicisi
• Uglify.js

CSS'yi Küçültmeye Yönelik Araçlar

• CSS Küçültücü
• örtünme
• TemizCSS
• CSSTidy
• OnlineDomainTools tarafından CSS Minify
• Hata Ayıklayıcı CSS Küçültücü

HTML'yi Küçültmeye Yönelik Araçlar

• Kodu küçült
• HTML sıkıştırıcı
• Metin Düzeltici
• HTML küçültme

Bir WordPress Minify Eklentisi kullanın

Araç dosyaları otomatik olarak küçülteceğinden, bir Minify eklentisi yüklemek çok daha rahattır. Dosyaları manuel olarak indirip yüklemeniz gerekmez.

Birçok kaliteli eklenti bu görevi yapabilir. Popüler önbelleğe alma eklentileri bile bu işleve sahiptir.

Ancak işte en iyi WordPress Minify Eklentileri:

otomatik optimize et

Autoptimize, en popüler WordPress eklentilerinden biridir.

Bu hafif eklenti, size hangi kodu optimize etmek istediğinizi seçme seçeneği sunar. HTML, CSS ve JavaScript'i küçültebilir.

Eklenti ile dosya boyutunu küçültmek için CDN ile de çalışabilir ve bunları CDN aracılığıyla sunabilir.

WP Süper Küçült

WP Super Minify, söylediklerini yapar.

Eklentiler JavaScript, CSS ve HTML dosyalarını birkaç tıklamayla birleştirir ve küçültür.

WP Super Minify'ın 10.000'den fazla aktif kurulumu var ve iyi çalışıyor. Bu eklentide çok fazla özellik yoktur, çünkü tek görevi kodu küçültmektir.

Hızlı Hız Küçült

WordPress için gelişmiş bir Minifying Plugin istiyorsanız, Fast Velocity tam size göre.

Kodu küçültmekten daha fazlasını yapar.

Fast Velocity Minify ile CSS ve Java dosyalarını tek bir dosyada birleştirebilirsiniz, bu da HTTP isteklerini azaltacaktır.

Geliştiriciler için gelişmiş seçeneklere sahip bir "Pro Optimizasyon" ayarı vardır. Ancak, yeni başlayan biriyseniz, varsayılan olarak bırakın.

SSS

Küçültme ve Sıkıştırma Arasındaki Fark Nedir?

İnsanlar genellikle Küçültme ve Sıkıştırma arasında karışırlar.

Minification ve Compression arasındaki fark, Minification'da gereksiz karakterleri koddan çıkarmamızdır. Sıkıştırma sırasında, yinelenen dizeleri koddan kaldırır ve bunları dizenin ilk örneğine yönlendiririz.

Her iki yöntem de dosyanın boyutunu küçültür ve WordPress'in hızlı yükleme hızı için gereklidir.

Küçültülmüş JavaScript daha mı hızlı çalışır?

Hayır. Ancak web sitesinin genel performansını iyileştirir. Küçültme, dosyanın boyutunu küçültür ve ardından tarayıcının dosyaları sunucudan indirmesi daha az zaman alır.

Bu nedenle, HTTP istek-yanıt döngüsü daha hızlı çalışır ve yükleme hızı artar.

Sarmak

Bu makalede, WordPress'te JavaScript, CSS ve HTML dosyalarının nasıl küçültüleceğini öğreneceğiz.

Manuel yöntemden ve eklenti yönteminden bahsettim. WordPress sitenizdeki kodu küçültmek için hangisini seçeceğiniz size kalmış.

Ancak herhangi bir işlemde sorun olursa yorum kısmından bana iletin.