Not: Anlatımı oldukça anlaşılır ve kısa bir dille tutmaya çalıştım.
Site hızı doğal olarak site optimizasyonu Google açısından artık en önemli kriterler arasında belirtilmektedir. Ne kadar yararlı ve önemli olduğunu fazla tartışmamamız en doğru olacaktır.
Açıklamayı fazla tutmayıp sitenizi hız açısından en iyi derecelere çıkartacak teknikleri anlatacağım. Şunu söylemeliyim ki her sitede aynı değerde etkisi olmayacaktır fakat eski halinden daha iyi olacağı kesindir.
Sunucu yanıt süresini kısaltın: Eğer profesyonel değilseniz sunucu yanıt süresini minimuma indirmek için gereken optimizasyon çalışmalarını kendiniz yapamazsınız. Sunucu yanıt süresini kısaltmak tamamen sitenizin bulunduğu sunucuya/hostinge bağlı olup gereken çalışmaları eğer ki host firmanız sağlamıyorsa ki büyük bir ihtimal sağlamıyordur; bu çalışmayı özel olarak yaptırmalısınız. (*** Sunucu kategorisinde bu işi yapanlar var ortalama 50-60 TL'ye yaptırabilirsiniz.)
Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın: Bakın bunu genelde ücretli yaparlar fakat araştırmalarım sonucu bunu küçük bir kod kitlesi ile halledebilirsiniz. Bunu daha önce açıklayan var mı bilmiyorum ama aşağıda vereceğim kodu kullandığınız scriptin functions.php dosyasında
Kod:
// Send the footer CSS and JS sources (webyusuf)
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
Arkadaşlar Üstteki kodu kullandıktan sonra sitede şu sorunla karşılaştım.
Puanımda artış olmuştu ama site yeni sekme açılışlarındaki görüntü kirliliği hiç hoşuma gitmedi o yüzden buraya bunu eklemek istiyorum. Ben kodu geri sildim ama isteyen ekleyebilir başka sorun yaşamadım.
Resimleri optimize edin: Resimlerin optimizasyonu hız konusunda oldukça önemlidir. Aşağıdaki anlatacağım tekniklerle kaliteyi minimum düzeyde bozarak sitenizin fişek gibi çalışmasını sağlayabilirsiniz.
1- Sitenizde fazla resim dosyası yoksa hepsini alıp Facebook'ta kendinize özel mesaj olarak gönderin ve dosyaları indirip Uploads klasöründeki adlarını veriyoruz tekrar çünkü Facebook resim dosyalarının isimlerini bize değişmiş olarak veriyor. Bunları yaptıktan sonra Uploads klasöründeki orjinal yerlerine atıyoruz. (Etkisine inanamayacaksınız en az %200 sıkıştırma sağlıyor)
2- Ücretsiz olarak sunulan EWWW Image Optimizer eklentisini sitemize kuruyoruz. Zaten tamamen Türkçe olan bu eklentiyi Admin Panelinden Ortam dosyasına gelip Toplu Optimizasyona basıyoruz ve Her şeyi Optimize Et diyerek işlemimizi tamamlıyoruz.
3- https://developers.google.com/speed/pagespeed/insights adresine girerek site adresimizi yazıp ANALİZ ET diyoruz. Daha sonra masaüstüne tıklayıp en altta "Bu sayfa için, optimize edilmiş resim, JavaScript ve CSS kaynaklarını indir." butonuna basıp dosyalarımızı çekiyorz. RAR dosyası içinde MANIFEST adlı bir dosya olacak bu optimize edilmiş dosyaların nereye hangi klasöre atılacağını gösterir. MANIFEST'te ki adımları takip ederek gerekli işlemleri yapıyoruz.
Resminiz için hangi biçimin en iyi olduğunu kendiniz test etmelisiniz. Yine de aşağıda bazı ileri düzey öneriler bulabilirsiniz:
PNG'ler hemen hemen her zaman GIF'lere oranla daha üstündür, ancak bazı eski tarayıcı sürümlerinde sadece kısmi PNG desteği vardır.
Çok küçük veya basit (örneğin, 10x10 pikselden daha küçük veya 3 renkten daha az renk paleti olan) grafikler ve animasyon içeren resimler için GIF'leri kullanın.
Tüm fotoğraf tarzındaki resimler için JPG'yi kullanın.
BMP veya TIFF kullanmayın.
Açılış sayfası yönlendirmelerinden kaçının: Bu uyarının fazla bir albenisi yok yapmak gereken tek şey web sitenizin ana sayfasının direk olarak başka bir sayfaya yönlendirilmesine mani olmak. Yinede Google Bey bazı yönlendirmelere izin veriyor. Örneğin: siteadi.com -> m.siteadi.com/anasayfa
(Daha fazla detaylı bilgi için: https://developers.google.com/speed/...AvoidRedirects)
HTML'yi küçültün: HTML boyutunu küçültmelisiniz. Kaynakları küçültmek, gereksiz baytları (ekstra alanlar, satır sonları ve girinti gibi) ortadan kaldırmak demektir. HTML, CSS ve JavaScript'i sıkıştırmak indirme, ayrıştırma ve yürütme süresini kısaltabilir. Ayrıca, CSS ve JavaScript için değişkenleri yeniden adlandırarak dosya boyutunu daha da küçültmek mümkündür. Bunu yaparken, seçicilerin çalışmaya devam edebilmesi için HTML uygun şekilde güncellenmelidir.
HTML'yi küçültmek için, HTML kodunuzun optimize edilmiş bir sürümünü oluşturmak üzere PageSpeed Insights Chrome Uzantısı'nı kullanabilirsiniz. HTML sayfanızda analizi çalıştırın ve "HTML'yi küçült" kuralına bakın. Optimize edilmiş HTML kodunu edinmek için "Optimize edilen içeriğe bakın"ı tıklayın.
CSS'yi küçültün: Bu seçenekten tam not almak için CSS boyutunu küçültmelisiniz. En basit yöntemini anlatmak gerekirse yukarıda da belirttiğim gibi:https://developers.google.com/speed/pagespeed/insights adresine girerek site adresimizi yazıp ANALİZ ET diyoruz. Daha sonra masaüstüne tıklayıp en altta "Bu sayfa için, optimize edilmiş resim, JavaScript ve CSS kaynaklarını indir." butonuna basıp dosyalarımızı çekiyorz. RAR dosyası içinde MANIFEST adlı bir dosya olacak bu optimize edilmiş dosyaların nereye hangi klasöre atılacağını gösterir. MANIFEST'te ki adımları takip ederek gerekli işlemleri yapıyoruz.
Bunun dışında özel olarakta "http://csscompressor.com/" ve "http://bswebtools.com/css-kucultme-araci/" araçlarını kullanabilirsiniz.
JavaScript'i küçültün: Yukarıda CSS küçültme işleminin aynısını yapacaksınız bunun dışında yine özel olarak "http://jscompress.com/" adresinde JS dosyalarını sıkıştırabilirsiniz.
Sıkıştırmayı etkinleştirin: Yapacağınız işlem çok basit http://checkgzipcompression.com/ adresine girin site adresinizi yazıp sunucunuzda Gzip modülü aktifmi kontrol edin. Aktif değil ise host sağlayıcınıza mesaj gönderip aktif etmesini söyleyin ve ardından sitenizin ana dizininde bulunan .htaccess dosyasını açıp sonuna aşağıda vereceğim kodu ekleyin:
APACHE SUNUCULAR İÇİN:
Kod:
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
NGINX SUNUCULAR İÇİN:
Kod:
gzip on;
gzip_static on;
gzip_buffers 4 128k;
gzip_comp_level 1;
gzip_http_version 1.0;
gzip_min_length 0;
gzip_types text/plain application/x-javascript text/xml text/css;
gzip_vary on;
Tarayıcı önbellekleme özelliğinden yararlanın: Tek bir kodla bu işi bitireceğiz. Aşağıda verdiğim kodu .htaccess dosyasının en sonuna ekleyin:
Kod:
## EXPIRES CACHING ##
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/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##
Yapmamız gereken işlemlerin hepsi bu kadar. Unutmayın, bu anlattıklarımın hepsini eksiksiz olarak yaparsanız analiz sonuçlarında 90/100 95-100 gibi muazzam skorlar elde edersiniz.
Örnek bir çalışma:
Kaynak: http://www.webyusuf.com/google-page-...iyeye-cikarma/
WEBYUSUF
Developer & Webmaster
info@webyusuf.com
Bu arada küçük bir edit yapayım bunu biraz önce keşfettim arkadaşlar. Keep alive özelliğini açmak için .htaaccess içine şu kodu yapıştırın. 85 olan puanı 91'e çıkarttı bende.
Ne işe yarar diye soranlara şu alıntıyı yapayım
Birçok site hızı ölçüm aracında (Google Page Speed vb) “Keep-Alive özelliğini etkinleştirin” gibi bir yazıyı gördüğünüzü tahmin ediyorum. Çünkü birçok site hız ölçüm aracı nedense Keep-Alive adlı bu özelliğe çok önem veriyor. Araştırdığım kadarı ile bu özellik aktif olmadan önce; örneğin 5 saniye süren bir istek 60 saniyelik timeout süresi boyunca bekleme konumunda kalacağı için sunucuyu yorabiliyormuş. Dolayısı ile bu özellik aktif olduğunda ise; gelen istekler tanımlanan timeout süresi boyunca aktif tutuyor, sonrasındaki kontrole göre eğer ki istek devam etmiyor ise bağlantı kapatılarak sunucunuza ek yük binmesi engellenmiş oluyor.
Header set Connection keep-alive