Web Sitesi 9 Aşamada Google Page Speed Test Aracıyla 100/100 Başarılı Hale Nasıl Getirilir ?

2017-07-10 - Kategori: Blog

Web Sitesi 9 Aşamada Google Page Speed Test Aracıyla 100/100 Başarılı Hale Nasıl Getirilir ?

Biliyoruz ki Google Web siteleri için hıza önem verir.

Hıza önem verdiği noktalardan bazıları;

  • Arama motorlarında anahtar kelimelerinizde hızla yükselmek için Page Speed Puanınız’da baz alınır.
  • Reklam görüntüleyen web siteleri (Adsense) daha fazla sayfa görüntülenmesi alarak reklam gösterim sayısının artmasına sebep olur, bu da kazançların artmasını sağlar.
  • Daha önemlisi reklam yayıncıları (Adwords) için ise Kalite Puanı’nın yükselmesi özellikle Arama Ağı Reklam Türünde, sizin reklamınızın rakip reklam verenlerin üstünde yer edinmesini sağlar.
  • Daha hızlı sayfalar sitenizi ziyaret eden kullanıcılar için iyi bir kullanıcı deneyimi sağlamak demektir.

Şimdi bu işlemleri nasıl yapabileceğimize göz atalım, tabi öncesinde 30 Seconds To Mars - The Kill parçasını dinleyerek başlayabiliriz.

 

Adım 1 # Web sitesi için açılış sayfası yönlendirmelerinden kaçınma

Web sayfanızın açılışında bir HTTP yönlendirme istek-yanıt döngüsü almadan açılmalı.

 Örneğin: www.investyazilim.com giriş yapan bir kullanıcı https://m.investyazilim.com’a yönlendirmek http’ye bir kullanıcıyı yönlendirmek için istek oluşturmak demektir.

3 Dereceden oluşan http istek-yanıt döngüsünün, web siteniz için hızlı açılışın doğru kullanımına bakalım;

1.Derece(Çok iyi):  www.investyazilim.com
2.Derece(Uygun): www.invesyazilim.com -> m.investyazilim.com/home
3.Derece(Kötü): investyazilim.com -> www.investyazilim.com -> m.investyazilim.com

Yukarıdaki listede göründüğü gibi 1.Derecede istek-yanıt döngüsü gerek kalmadan görüntülenen web sitesi en hızlı açılan web sitesi olarak kabul görünüyor.

1. Derece’de Hızlı Açılan Web Sitesi için ne yapmalıyım ?
Çözümü Responsive Web Sitesi yani kullanıcının tarayıcı çözünürlüğü talebine göre web sitesini katlanabilir hale gelmesi.Http istek-yanıt döngüsüne gerek kalmadan web tasarımının duyarlı hale gelmesini sağlamak.

 

Adım 2 # Web Sitesi için Sıkıştırmayı etkinleştirme

Bu işlem web sunucusu tarafından yapılması gerekiyor.cPanel web hosting panelinde “Web Sitesini Optimize Edin” sekmesinden aşağıdaki ayarları yapıp kaydedin.

 

Adım 3 # Web Sitesi için Sunucu yanıt süresini iyileştirme

Bu işlemlerin çoğu seçeceğiniz servis sağlayıcısı yada sunucu size ait ise sizin tarafından gerçekleştirilmesi gerekiyor.

Sunucunuza en az 100 mbit sınırsız internet ile erişimi sağlayın.
Sunucu yanıt süresinin düşük olmaması için ping süreleriniz 200 milisaniye altında olması gerekiyor.
LiteSpeed Tech. CPU optimizasyon yazılımları bu iş için harika bir ürün, Sunucunuz için LiteSpeed Tech.En az 1 CPU için olan hizmeti satın alabilirsiniz.

Doğru yazılım kodlaması ve mysql sorgularını en minimum düzeyde tutun.
Toplam sayfa boyutunuz ve sayfa’daki istekler sayısını en az düzeyde tutun.
SELECT * FROM kullanmak yerine SELECT haber_id,haber_tarihi FROM gerekli tablo alanlarını  sorgulayın ve kullanın.

 

Adım 4 # Web Sitesi için Tarayıcı önbelleğine alma özelliğinden yararlanma

Bu özelliği web sitenizi ziyaret eden kullanıcıların css,jpg,png,gif,html,pdf gibi dosyaların sunucudan bir kez yüklenmesini sağlayıp.Diğer ziyaretlerinde tekrar sunucudan yüklenme gerçekleştirmeden tarayıcısında hazır olacak şekilde yüklenmesini sağlar.Büyük bir performans artışı sağlar.

Ben genellikle json ve xml verilerinde bu işlemi sağlamıyorum.Çünkü anlık değişiklik isteklerini JSON yada XML ile sağlıyorum.

Aşağıdaki kodu kullanabilirsiniz;

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"

ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

# 1 Month for most static assets
<ifmodule mod_expires.c>
<filesmatch ".(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

 

Adım 5 # Web Siteniz için Kaynakları küçültme

CSS, HTML ve Javascript dosyalarındaki kodlarınızı sıkıştırmak web sitesinizin daha hızlı açılmasını sağlar.Öncesinde bu dosyalarınızın bir yedeğini almanızda fayda var.Tekrar geliştirme aşamasında dağınık düzendeki kod satırları geliştirmeniz için zor olabilir.

CSS için sıkıştırma yöntemi;
Css dosyalarınızı sıkıştırmak için online bir araç cssminifier.com
 
Javascript için sıkıştırma yöntemi;
Javacript dosyalarınızı sıkıştırmak için jscompress.com

HTML için sıkıştırma yöntemi;
Kullandığınız yazılım diline göre html arasındaki boşlukları ve girdileri temizleyip birleşik hale getirmelisiniz.Örnek: view-source:https://www.investyazilim.com/ inceleyebilirsiniz.

 

Adım 6 # Web sitesi için Resimleri optimize etme

Resimleri sunucunuzdan indiren ve gösterimine sunduğunuz kullanıcılar için 2 şeye dikkat etmeniz gerekiyor.Resmin dosya boyutuna ve resmin sunucu üzerindeki gerçek boyutu ile görüntülenen boyutunun aynı olmasına.

Resimleri optimize etmek için Compressor.io and TinyPNG bu iki online web sitesi resimlerinizi %80 oranında kalitesini bozmadan optimize edecektir.

Resimin sunucu boyutu ve görüntülenen boyutu arasında fark olmaması gerekiyor.Örneğin; sunucuda 250x250px bir görseliniz var ama siz css ve html ile bu boyutları 150x150px haline getiriyorsunuz, gerçekte 250x250px yüklenmiş olur buda hızı etkiler.

Doğru kullanımı 250x250px kullanmanız yada 150x150px ihtiyacınızı görüyor ise sunucudaki dosyanın boyutuda 150x150px olması gerekiyor.

 

Adım 7 # Web Sitesi için CSS Yayınlamayı optimize etme

Sık yapılan hatalardan birisi ise CSS yayını sırasında gerçekleşen optimizasyon problemleri.

Basitce izlemeniz gerek yol;

  • CSS dosyalarınızı birden fazla dosya haline getirmeyin.Bu istek sayısını arttırır.
  • @import kullanmayın.
  • Bilinenin tersine css yayınını sayfa üzerinden style.css içerisinde değil <style type=”text/css”> /** Kodlar burada**/ </style> şeklinde direk kullanın.
  • Css kodlarınızın sayfa yüklenme boyutunu etkilememesi gerektiğini unutmayın.
  • Düzenli bir kod yapısı ile css kodlaması gerçekleştirmeye dikkat edin.

 

Adım 8 # Web Sitesi için Görünür içeriğe öncelik verme

Web sitenizde öncelikle css ve html yüklenmesini gerçekleştirip ve sonrasında javascript dosyanızı yüklenmesini sağlayın.Yani öncelikli web sunucuzun tıkanıklığına sebep vermeyecek  düzeyde gereken alanları yükleyin. Sıralamayı doğru yapmakta fayda var <head> yer alan kısıma css, <body> yer alan kısıma html kodlarınız, <html> sonunda ise javascript kodlarınızı kullanın.

Gerekirse CSS dosyanızı 2’ye bölün ve tasarımı kullanıcıya düzgünce sunacağınız öncelikli alanı <head> kullanın.Diğer css dosyanızı <html> sonunda kullanın.

Sayfa boyutlarına dikkat etmenizde fayda var.

 

Adım 9 # Web Sitenizi Oluşturmayı Engelleyen JavaScript'leri Kaldırma

Bu basit bir adım istenilen durum javascript kodlarınızı bir ornek.js içerisinde yayınlamak yerine web sayfanızın içerisinde görüntülenmesini sağlayın.

<script type="text/javascript">

      /* javascript kodlarınız burada */

 </script>


Bu yazıları oluştururken aşağıdaki kaynak sitelerden faydalandım.

Kaynaklar:

https://developers.google.com/speed/docs/insights/rules?hl=tr

https://moz.com/blog/how-to-achieve-100100-with-the-google-page-speed-test-tool

Yazan: Erdal VURAN

 

Etiketler:css küçültme javascript küçültme html küçültme web sitesi için resim optimize etmek google page speed web sitesini hızlandırma web sitesini sıkıştırma