Daha önce Google Page Speed puanınızı arttırmak için bir kaç ipucu vermiştim, şimdi daha detaylı olarak anlatacağım.
Google Page Speed, birçok algoritmayı kullanarak sitenize 100 üzerinden hız puanı veren Google servisidir. Aşağıdaki anlatımları uygulayarak site hızını 100‘e kadar çıkartabilirsiniz.
JavaScript’i küçültün: https://jscompressor.oguzturk.net/ adresindeki Online JavaScript Tool sayesinde, javascript dosyalarınızı bozmadan boyutlarını küçültebilirsiniz.
CSS’i küçültün: https://csscompressor.oguzturk.net/ adresindeki Online CSS Compressor sayesinde, css dosyalarınızı bozmadan boyutlarını küçültebilirsiniz.
Resimleri optimize edin : Resimlerinizi optimize etmek için en başta PhotoShop olmak üzere birçok optimize programı mevcuttur, sizlere bu işi zahmetsiz yapan online bir servis göstereceğim.
Resimlerinizi google standartlarında kalitesini bozmadan küçültmek için en alttaki siteyi kullanın. (yenilenmiştir.)
Sıkıştırmayı etkinleştirin : Google Page Speed sıkıştırma sorunu ile ilgili sağlıklı Türkçe kaynaklar mevcut değil. Sıkıştırma sorununu tamamen ortadan kaldıracak, birçok sunucuda deneyip sizler için derlediğim .htaccess kodları aşağıdadır.
Aşağıdaki kodları .htaccess dosyasına eklediğinizde, google pagespeed sıkıştırma hatası ve diğer bazı hataları almayacaksınız. Kodlar 2 Aralık 2015 tarihinde güncellenmiştir. Kodların yanında ingilizce açıklamaları mevcuttur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<IfModule mod_expires.c> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # RSS feed ExpiresByType application/rss+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType font/truetype "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" <IfModule mod_headers.c> Header append Cache-Control "public" </IfModule> </IfModule> |
AdBlock veya WindScribe tarzı bir reklam engelleyici kullandığınız için kodları göremiyorsunuz, https://oguzturk.net için reklam engelleyicileri kapatarak veya izin vererek kodları görüntüleyebilirsiniz.
HTML’yi küçültün : Bu sorunuda çözmek html dosyanızdaki boş satırları ve gereksiz boşlukları temizlemeniz gerekiyor.
JavaScript kodlarını ayrıştırmayı sonraya bırakın : JavaScript kodlarını ayrıştırmayı sonraya bırakmak için .js dosyalarınızı aşağıdaki biçimde değiştirmeniz bu sorunu çözecektir.
|
1 |
<script type=”text/javascript”>/*<![CDATA[*/function downloadJSAtOnload(){var a=document.createElement("script");a.src="http://www.siteniz.com/javascriptdosyaniz.js";document.body.appendChild(a)}if(window.addEventListener){window.addEventListener("load",downloadJSAtOnload,false)}else{if(window.attachEvent){window.attachEvent("onload",downloadJSAtOnload)}else{window.onload=downloadJSAtOnload}};/*]]>*/</script> |
AdBlock veya WindScribe tarzı bir reklam engelleyici kullandığınız için kodları göremiyorsunuz, https://oguzturk.net için reklam engelleyicileri kapatarak veya izin vererek kodları görüntüleyebilirsiniz.
İpucu: Yukarıdaki kodu kullanmadan dışarıdan çağırdığınız js dosyalarınızı direk html, php içinde kullanarak kodları en üst satırlarda bile kullansanız hata almazsınız.
Yeni resim optimize sitesi:
http://optimizilla.com/
Merhaba,
.htacsess dosyası için verdiğiniz kodları girdiğimde siteye erişim kesiliyor.500 inte… server hatasını alıyorum.
Birşeyleri yanlış yapıyorum ama neyi bilmiyorum. Yardımcı olurmusunuz bu konuda..
Kodlar sürekli güncellenmektedir, 500 hatası alıyorsanız kodlardan bazıları sunucunuzla uyumsuz demektir, tek tek kaldırarak hata veren kodu bulabilirsiniz. Bazı sunucularda bazı bileşenler kurulu olmadığı için bu hatayı alıyorsunuz.
Merhaba, ben JavaScript kodlarını ayrıştırmayı sonraya bırakın konusunu bir türlü çözemiyorum. Web te detaylı bir bilgi yok, nasıl yapılacağına dair de hiç bir bilgi yok şunu insanlık namına anlatabilirseniz çok iyi olacak hocam teşekkürler.
Hocam teşekkür ederiz bilgiler için.
HTML’yi küçültün : html dosyanızdaki boşlukları silin demişsiniz. Bu html dosyası nerede WordPress te. Hangi dosya.
Teşekkürler.
WordPress için temanızın tüm dosyalarında düzenleme yapmanız gerekiyor tema dosyalarınızı tek tek açıp fazla satırları, boşlukları, /* */ – gibi açıklama için kullanılan kodları temizlemeniz gerekmektedir. Yada WordPress hızlandırma eklentilerini kullanarak kolayca yapabilirsiniz.
WordPress üzerinde javascript satırlarına nasıl müdahale edileceğini çözemedim. Bir bilginiz var mıdır ?
Herhangi bir script uzantısının sonuna “defer” satırını ekleyerek yüklemeyi sonraya bırakabileceğimizi öğrendim ancak wp içinde buna nasıl müdahale edileceğini çözümedim. Zoru buldum kolayı bulamadım 😀
Bazı sitelerde söylendiği gibi js dosyasının sonuna .php, .html gibi kodlar ekleyerek veya defer yöntemiyle çözmek yerine bu kodları html, php içine almanız kesin çözüm olacaktır.
Anlayamadığım nokta hangi dosyalarımızı ve ne şekilde bu sitelerde gerekli işlemlere tabi tutacağımız.O konuda bilgi verir misiniz ? WordPress sitem var. “JavaScript’i küçültün” ve “CSS küçültün” işlemlerini yapmak istiyorum.Bu işlemler hakkında nasıl bir yol izlemem gerektiği konusunda bir açıklama yaparsanız çok memnun olurum.
Hangi dosyaları küçülteceğinizi google pagespeed sayfasında size söylüyor.
Hatta alt kısımda “Bu sayfa için, optimize edilmiş resim, JavaScript ve CSS kaynaklarını indir.” linkine tıklayarak optimize edilmiş sürümlerini indirebiliyorsunuz.
Alternatif olarak gtmetrix kullanabilirsiniz.
JavaScript’i küçültün: http://jscompressor.oguzturk.net/ adresindeki Online JavaScript Tool sayesinde, javascript dosyalarınızı bozmadan boyutlarını küçültebilirsiniz.
demişsiniz, hangi js dosyalarını küçültmeliyiz? Mesela PageSpeed Insights bana,
https://static.xx.fbcdn.net/rsrc.php/v2/yt/r/W9XT21QGx8V.js sayfasının sıkıştırılması 117,1 KB tasarruf (%72 azalma) sağlayabilir.
demiş fakat bunun hangi dosya olduğunu nasıl anlayacağım?
her sitede düzelteceğiniz dosyalar farklılık gösterir.
sizin belirttiğiniz W9XT21QGx8V.js dosyası facebook üzerinden çekilen bir js dosyasıdır, büyük ihtimalle sitenizdeki facebook beğen bölümünü çalıştıran js dosyası, maalesef bu dosyayı küçültemezsiniz. Sadece php kodu içinden çağırarak bu sorunu çözebilirsiniz.
Çok güzel pratik bilgiler vermişsiniz. Benim için çok faydalı oldu. Teşekkürler.
Detaylı bir anlatım olmamış hangi kodun neyin arasına yapıştırılacak belirtmemişsiniz google pagespeed sıkıştırma hatası ve diğer bazı hataları almayacaksınız. demişsin ben yapıştırdım sıkıştırma olmadı
Arkadaşlar Google Page Insights css ve js küçültme işlemlerini yapabilirsiniz. Sitenizin hızını sorguladığınızda en altta “Bu sayfa için, optimize edilmiş resim, JavaScript ve CSS kaynaklarını indir.” ibaresi olacak. Daha sonra o dosyaları indirip filezilla yardımı ile temanıza atabilirsiniz. Artık css ve js dosyalarınız küçülmüş olacaktır. İyi forumlar.
Teşekkürler, sitemi optimize ettim araçlar sayesinde.