Css ve Javascript dosyalarınızı sıkıştırın

Css ve Javascript dosyalarınızı sıkıştırın
3 dakikada okuyabilirsiniz. • Araçlar & Fikirler, Wordpress İpuçları • 27.12.2017 • 13:48 • 624 Okunma

Merhaba arkadaşlar, bugün WordPress ve diğer tüm siteleriniz için basit ama etkili bir işlem anlatacağım. Bu işlem sonrası sizde Css ve Javascript dosyalarınızı sıkıştırın ve nelere sebep verdiğini aynı zamanda bize kazandırdıklarına kulak verin.

Minify nedir ?

Bu kelime ingilizce bir terim olmakla birlikte Türkçe karşılığı küçültmek, sıkıştırmak anlamına gelir. Web sitemizde bulunan binlerce dosyanın hepsinin okunması ve ekrana yazdırılması işlemi vardır. Bu işlemler ne kadar çabuk gerçekleşirse sitemiz o kadar hızlı açılır. Bu nedenle en çok kullanılan Css ve Javascript, jquery gibi dosyalarımızın içerisinde ki gereksiz boşluklar bu süreyi arttırabilir. Bu boşlukları temizlemek ve düzene sokmak tabi ki mümkün ..

Css ve Javascript dosyalarımı nasıl sıkıştırabilirim ?

Bu sorunun binlerce cevabı var ben en pratik yolunu izah edeceğim. Bu işlem için yine milyarlarca yazılmış eklentiler, platformlar ve araçlar mevcut en pratiğini kullanmak size hem zaman tasarrufu sağlar hemde ihtiyacınızı görürken olayıda kavramış olursunuz.

Css ve Javascript dosya sıkıştırması önce GZip denilen bir sıkıştırma durumu var biraz bundan bahsedeyim ve daha sonra maddelere geçelim.Öncelikle sitenizin htacesss dosyasına kısa bir kod eklemeniz gerekiyor. GZip sitenizde bulunan dosyaları belli bir düzeye göre sıkıştırmasını ve sitenizin daha hızlı açılmasını ve bandwidth yükünün dengelenmesini, düzenlenmesini sağlar. Bunun için htaacess dosyanıza bir kaç satır kod eklemeniz yeterlidir. Kod ekleme sonrası sitenizde hata meydana gelirse kod işe yaramamıştır ve kaldırmanızı öneririm. Ve bu işlem öncesi lütfen dosyanızın yedeğini mutlaka almanızı tavsiye ederim.

Yukarda paylaştığım kodlar bazı hostinglerde işleme geçmiyor olabilir. Genellikle Nginx kullanan arkadaşlarda bu kodlar çalışmayabilir, Plesk panel kullanıyorsanız Apache & Nginx Setting sekmesine gelip en alttaki Additional nginx directives kutucuğuna aşağıda yer alan kodları yazmaları yeterli olacaktır.

Bu işlem başarılı ve sitenizde bir sorun çıkmadı ise aşağıdaki sorgular sonrası Google PageSpeed sonucunda ” Sıkıştırmayı etkinleştirmişsiniz ” ibaresini görebilirsiniz. Hemen maddeler ile dosya sıkıştırma işlem basamaklarından bahsedeyim;

  • Google PageSpeed sitesine girip sitenizin açılış hızını test edin ve hata ekranında ” CSS’yi küçültün ” ibaresi görüyorsanız css dosyalarınızın ve javascript dosyalarınızın gereksiz büyük olduğunu anlayabilirsiniz.
  • Bu kontrol sonrası Google uyarı / bilgilendirme ibarelerinin en altında ” Optimizasyonlar Bulundu ” kısmı yer alır.
  • Bu sayfa için, optimize edilmiş resim, JavaScript ve CSS kaynaklarını indir. İbaresine tıkladığınızda siteniz için optimize edilen görseller, css ve javascript dosyalarını FTP’nizden tekrar sitenize yükleyebilirsiniz.
  • Fakat bazı dosyaları incelemeyebilir ve siz yine de tüm css ve javascript dosyalarınızı tek tek sıkıştırın ve FTP’nizden yükleyin.
  • Minifier aracı kullanabilirsiniz. Sıkıştırmak istediğiniz css, javascript linkini yapıştırın ve sizin için sıkıştırdığı kodları kopyalayıp dosyanızın içerisindekileri silip yenisini yazın ve kaydedip FTP’nizden yükleyin. Tüm dosyalar için bu işlemi gerçekleştirmelisiniz.
  • Tekrar Google PageSpeed kontrolü ettiğinizde ” CSS’niz küçültülmüş. ” ve ” JavaScript içeriğiniz küçültülmüş ” ibarelerine rast gelirseniz işlem tamamdır.

Tebrikler, başardınız!

Bu makalemizin de sonuna geldik ilerleyen zamanlarda WordPress için Google Pagespeed puan arttırma tekniklerine detaylıca inebiliriz. Yazımın size faydalı olduğunu düşünüyor ve diğer insanlarında bu konudan haberdar olmasını istiyorsanız lütfen aşağıda bulunan paylaş butonlarından paylaşarak destek olun ve sitemin sağ kısmında bulunan bildirim aboneliğini aktif edin.

Bir sonra ki makalemde görüşmek üzere, bol pixelli günler dilerim, saygılarımla.



Bu yazımı favorileri listene ekle

Bu yazımda illegal işlem ya da hatalı konulardan bahsettiğimi düşünüyorsanız benimle iletişime geçebilirsiniz

Etiketler

, , , ,

Bu yazımı sosyal ağlarda paylaşmak istermisin ?

Bu yazım hakkında ne düşünüyorsunuz ?

Yazı hakkındaki düşüncelerinizi paylaşmak ister misiniz?




Benzer yazılarımı da okuyabilirsiniz

WordPress sitelerinizde SSL sertifikanızı aktif edin : Really Simple SSL

WordPress sitelerinizde SSL sertifikanızı aktif edin : Really Simple SSL

Wordpress İpuçları • 05.04.2018 • 13:34 • 676 Okunma

Merhabalar değerli okurlarım.. Bugün yine WordPress ipuçları serimizden devam etmek istedim. Really Simple SSL eklentisi sayesinde SSL sertifikanızı anında aktif edip […]

WordPress üyeye ait yorum sayısını göstermek

WordPress üyeye ait yorum sayısını göstermek

Wordpress İpuçları • 02.04.2018 • 13:34 • 1.406 Okunma

Sevgili blog okurlarım. Hayırlı pazartesiler dilerim. Uzun zamandır bloguma zaman ayıramıyorum fakat gün içerisinde karşılaştığım sorunları not ederek bu konuda […]

WordPress’te özel arama kutusu yapalım

WordPress’te özel arama kutusu yapalım

Wordpress İpuçları • 08.02.2018 • 11:28 • 1.536 Okunma

Merhabalar .. Bugün yine WordPress kategorisinden devam edelim. Çünkü bahsettiğim ipuçları minik fakat işlerinizi ve site içeriğini güzelleştirebilecek konular diyebilirim. […]