Google PageSpeed ile CSS ve JavaScript Dosyalarınızı Sıkıştırın

Web sayfanızın açılış süresini kısaltmak için en önemli göreviniz sıkıştırmalar. Bu sebeple Google‘ın web geliştiricilerine özel hizmeti olan PageSpeed ‘i detaylı olarak inceleyeceğiz.

İlk olarak Site Analizi alanına gelip sitemiz ile ilgili Google Hız Puanı değerini öğreniyoruz.

Bu analizin sonuçunda Google size birkaç öneride bulunacaktır. Bu öneriler önem sıralarına göre listelenecektir.

Adımları izleyerek Google’ın size tavsiye ettiği işlemleri yapabilirsiniz. Makalenin devamında karşılaştırma yapmak için Google’ın size verdiği hız değerini not alın. Hız puanı aşağıdaki görselde gösterildiği gibi yayınlanmaktadır.

Şimdi CSS ve JS dosyalarımızı sıkıştırma işlemi ile devam edelim. İlk olarak aşağıdaki browser eklentilerinden istediğinizi indirin.

• Firefox için Google PageSpeed 
• Chrome için Google PageSpeed

Firefox kullanıcıları PageSpeed eklentisini kurmak için daha önce Firebug Developer aracını kurmalılar. Firebug’ın ücretsiz kurulum adresine gitmek için burayı tıklayın.

Kurulum işlemi bittiğine göre artık çalışmaya başlayalım. İnceleme yapacağımız web sayfasına girip sayfada boş bir alanı faremizin sağ tuşuyla tıklıyoruz. Chrome kullanıcıları Öğeyi Denetle alanını, Firefox kullanıcıları Inspect Element with Firebug seçeneğini tıklıyor. Açılan developer penceresinde PageSpeed isimli tabı göreceksiniz. Bu tabı tıklayarak aktif edin.

Şimdi İncelemeye Başla (Analyze Performance) buttonlarını tıklayarak süreci başlatıyoruz.

CSS ve JS dosyalarını küçült alanını tıklıyoruz. Bu alanda Google PageSpeed varsayılan dosyamızı ve sıkıştırılmış dosyamızı bize link olarak sunuyor ve aradaki boyut farkını listeliyor.

Şimdi web sayfamıza erişip Google’ın önerdiği sıkıştırma işlemlerini yapıyoruz. Bu işlemi yapmadan önce web sayfanızın yedeğini almanızı öneririm.

WordPress gibi onlarca JS ve CSS dosyası barındıran sistemleri manuel olarak sıkıştırırken hata yapmanız yüksek ihtimal. Bu hataların can sıkıcı boyutlara erişmesine izin vermemek için sık sık yedek alın.

Benim fikrim bu eklenti Firefox ile daha anlaşılır bir kullanım arayüzüne sahip. Fakat Chrome’un avantajı varsayılan developer aracı ile birlikte çalışıyor olması. Tercih sizin.

Sıkıştırma Farkları

Aşağıdakine benzer bir CSS satırımız olduğunu varsayalım. Bu örneklendirmeyi sadece CSS için yapıyorum çünkü JS için de neredeyse aynı işlemler uygulanmakta.

.adobewordpress{ /* Class için stil atayalım */
color:red; /* Yazılar kırmızı olsun */
font-size:20px;

background:color:white;/* Arka plan ise beyaz olsun */
}

Yoğun Sıkıştırma : Yoğun sıkıştırma işleminde satır ve karakter boşlukları silinir. Açıklama metinleri kaldırılır. Kod en verimli hale getirilir. Fakat tekrar düzenleme yapmak istediğinizde kafanız karışabilir.

.adobewordpress{color:red;font-size:20px;background:color:white;}

Normal Sıkıştırma : Boş satırlar kaldırılır. Açıklama metinleri yok edilir. İskelet düzen korunur. Böylece tekrar düzenlenmek istendiğinde bir problem oluşturmaz.

.adobewordpress{
color:red;
font-size:20px;
background:color:white;
}

Şimdilik bu kadar. Sorularınızı yorumlarınızla birlikte belirtebilirsiniz.