Eklenti Olmadan WordPress HTML Küçültme

Eklenti Olmadan WordPress HTML Küçültme

HTML’yi küçülttüğünüzde kaynak kodundaki gereksiz karakterleri ve satırları kaldırır. HTML’de girinti, yorumlar, boş satırlar vb gerekli değildir. Sadece dosyanın okunmasını kolaylaştırırlar. Tüm bu gereksiz şeyleri kısaltmak dosya boyutunuzu önemli ölçüde azaltabilir. Peki bu kodları sıkıştırmak için eklenti kullanmadan WordPress HTML küçültme işlemi nasıl yapılır?

Web sitenizdeki HTML kodu küçüldüğünde sunucu; müşteriye web sitenizin daha hızlı yüklenmesini sağlayan çok daha küçük bir sayfa gönderecektir.

WordPress HTML Küçültme Nedir?

WordPress sitenizin HTML sürümünü bir araya getirmek için PHP kodunu çalıştırarak ve bu HTML’ye eklenecek içeriği almak için veritabanınızı sorgulayarak talep üzerine sayfalar oluşturur. İndirebileceğimiz ve küçültebileceğimiz fiziksel bir dosya yok bu yüzden temanızın functions.php dosyasında biraz PHP kodu kullanmamız gerekecek.

Öncelik olarak değişiklik yapacağınız functions.php dosyasının yedeğini almayı, unutmamanızı tavsiye ediyoruz.

Bu kod ile siteniz ziyaretçilerinize gönderilmeden önce; HTML’yi sıkıştıracaktır. Aşağıda HTML Küçültme öncesi ve sonrası bir web sayfasını gösteren iki ekran görüntüsü bulunmaktadır.

HTML Küçültmeden Öncesi

HTML Küçültme Sonrası

Sonrası

1. Adım: Bir Alt Tema Oluşturun

Functions.php dosyasını düzenlemeden önce bir alt tema oluşturmak her zaman en iyisidir. Bir alt tema kullanmak sorunlar varsa ana temaya geri dönmenizi sağlar.

Ayrıca ana temanız güncellenirse yaptığınız hiçbir değişiklik silinmeyecektir.

Çocuk temayı oluşturmamayı tercih ediyorsanız veya bunu kendi başınıza yapmaktan çekiniyorsanız kod ekleme adı verilen harika bir hafif kod eklentisi var.

Kodlar sitenize kod parçacıkları eklemenin kolay, temiz ve basit bir yoludur. Temanızın functions.php dosyasına özel parçacıklar ekleme ihtiyacını ortadan kaldırır.

Adım 2: Alt Tema functions.php Dosyanızı Düzenleyin

Alt temanızdaki functions.php dosyasını düzenlemenin ve eklenti olmadan WordPress HTML küçültmenin 2 farklı yolu vardır.

WordPress Kontrol Panelinin İçinde

WordPress’te oturumunuz açıkken Görünüm> Düzenleyici’ye gidip sayfanın sağ tarafındaki Tema İşlevleri’ni seçerek temanızın functions.php dosyasına erişebilir ve düzenleyebilirsiniz.

Dosyayı Doğrudan cPanel’de Düzenleyin

CPanel Dosya Yöneticinize giriş yapın. Public_html/wp-content/themes/ konumuna gidin ve mevcut temanızın veya alt temanızın klasörünü seçin eğer bir tane oluşturduysanız.

Functions.php dosyası tema klasörünüzün içinde olacaktır.

Aşağıdaki kodu functions.php dosyanızın içine kopyalayıp yapıştırın ve kaydedin.

class FLHM_HTML_Compression
{
protected $flhm_compress_css = true;
protected $flhm_compress_js = true;
protected $flhm_info_comment = true;
protected $flhm_remove_comments = true;
protected $html;
public function __construct($html)
{
if (!empty($html))
{
$this->flhm_parseHTML($html);
}
}
public function __toString()
{
return $this->html;
}
protected function flhm_bottomComment($raw, $compressed)
{
$raw = strlen($raw);
$compressed = strlen($compressed);
$savings = ($raw-$compressed) / $raw * 100;
$savings = round($savings, 2);
return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->';
}
protected function flhm_minifyHTML($html)
{
$pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
$overriding = false;
$raw_tag = false;
$html = '';
foreach ($matches as $token)
{
$tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
$content = $token[0];
if (is_null($tag))
{
if ( !empty($token['script']) )
{
$strip = $this->flhm_compress_js;
}
else if ( !empty($token['style']) )
{
$strip = $this->flhm_compress_css;
}
else if ($content == '<!--wp-html-compression no compression-->')
{
$overriding = !$overriding; 
continue;
}
else if ($this->flhm_remove_comments)
{
if (!$overriding && $raw_tag != 'textarea')
{
$content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);
}
}
}
else
{
if ($tag == 'pre' || $tag == 'textarea')
{
$raw_tag = $tag;
}
else if ($tag == '/pre' || $tag == '/textarea')
{
$raw_tag = false;
}
else
{
if ($raw_tag || $overriding)
{
$strip = false;
}
else
{
$strip = true; 
$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content); 
$content = str_replace(' />', '/>', $content);
}
}
} 
if ($strip)
{
$content = $this->flhm_removeWhiteSpace($content);
}
$html .= $content;
} 
return $html;
} 
public function flhm_parseHTML($html)
{
$this->html = $this->flhm_minifyHTML($html);
if ($this->flhm_info_comment)
{
$this->html .= "\n" . $this->flhm_bottomComment($html, $this->html);
}
}
protected function flhm_removeWhiteSpace($str)
{
$str = str_replace("\t", ' ', $str);
$str = str_replace("\n",  '', $str);
$str = str_replace("\r",  '', $str);
while (stristr($str, '  '))
{
$str = str_replace('  ', ' ', $str);
}   
return $str;
}
}
function flhm_wp_html_compression_finish($html)
{
return new FLHM_HTML_Compression($html);
}
function flhm_wp_html_compression_start()
{
ob_start('flhm_wp_html_compression_finish');
}
add_action('get_header', 'flhm_wp_html_compression_start');

3. Adım: Her Şeyin Çalıştığından Emin Olun

Kodu ekledikten sonra sayfayı sağ tıklayıp “Sayfa kaynağını görüntüle” seçerek HTML’nin Google Chrome‘da küçültülmekte olup olmadığını kontrol edebilirsiniz. Her şey doğru çalışıyorsa, bu sayfanın üst kısmında verdiğim örnek resim gibi görünmelidir.

Bu kodu ekledikten sonra web sitenizin tüm yönlerini kontrol etmenizi şiddetle tavsiye ederiz. Tüm eklentilerin ve tema işlevselliğinin düzgün çalıştığını kontrol edin ve emin olun.

Sitemize WordPress HTML Küçültme Kodları Eklendi

Sitemiz; eklenti kullanmadan WordPress HTML kodu ile küçültüldü. Kodun nasıl sıkıştırdığını görmek için buradan ana sayfaya dönerek sitemizin kaynak koduna bakabilirsiniz.

Bir yorum

  1. Avatar

    Optimizasyon konusunda gözle görülür derecede fark ediyor. Mükemmel bir makale olmuş teşekkür ederim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.