Google PageSpeed Insights hataları ve düzeltme yöntemleri
1- Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın
internette şu şekilde notlar var
-
Öncelikle Yahoo’nun BSD lisansına sahip olan YUI Compressor’u indiriyoruz.
- Ardından zip dosyasının içinde build klasörü var. onun içinde yui-compressor-x-y-z.jar’ı bir klasöre çıkarın.
- Ardından java.exe’yi Program Files’tan bulun ve aynı klasöre kopyalayın.
- Son olarak sıkıştıracağınız JS veya CSS dosyasını aynı klasöre koyun.
- Sonra şu kodu uygulayın.Ben C: üzerinde deneme adında klasör oluşturdum.
- cmd.exe’yi
yönetici olarak açıyoruz ve şu kodu yazıyoruz: C:\deneme\java -jar
C:\deneme\yui-compressor.jar -o C:\deneme\javadosyaniz.js
C:\deneme\min-java-dosyaniz.js
Eğer
bir problemle karşılaşmadıysanız aynı klasörde min-java-dosyaniz.js
adında bir java dosyası daha bulacaksınız.Boyutuna bakın. Yüzde 60
civarında bir sıkıştırma olduğunu göreceksiniz.
diğer bi not
Aslında
bu uyarının çözümü fazlasıyla basit.Şimdi size nasıl çözüleceğini
kodlar üzerinde anlatıyım.Öncelikle aşağıdaki kod bizim örnek javascript
kodumuz olsun Kod: <script type="text/javascript" src="http://tr.analizcik.com/jscripts/prototype.js?ver=1603"></script>Şimdi
burada yapmamız gereken geciktirici defer kodunu eklemek.Yani şöyle
; Kod: <script type="text/javascript" src="http://tr.analizcik.com/jscripts/prototype.js?ver=1603"
defer></script>Kodlamada gördüğünüz üzere kodun sonuna sadece
defer kelimesi eklenmiş.Defer sizin eklediğiniz javascript kodunun veya
dosyasının sayfanın açılmasından sonra yüklenmesine olanak sağlar.Yani
javascript dosyanız sayfa yüklendikten sonra yüklenmeye başlıyacak.Ve
artık hatanız çözülmüş oldu.
Ben ise şu şekilde çözdüm
.js ve .css uzantılı dosyalarımı head içerisinde değilde </body> tagından hemen önce koydum aynı hatayı tekrar vermedi.
2- Tarayıcı önbellekleme özelliğinden yararlanın
Not defteriyle .htaccess dosyası oluşturuyoruz.sonuna txt koyuyor ama kaydettikten sonra onu silebilirsiniz.İçeriği şu şekilde
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 month”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
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”
</IfModule>
asp.net için şu şekilde yapılacağı yazılmış nette denedim çalıştı
<system.webServer>
<caching>
<profiles>
<add extension=".png" policy="CacheUntilChange"
varyByHeaders="User-Agent" location="Client" />
<add extension=".gif" policy="CacheUntilChange"
varyByHeaders="User-Agent" location="Client" />
<add extension=".jpg" policy="CacheUntilChange"
varyByHeaders="User-Agent" location="Client" />
<add extension=".js" policy="CacheUntilChange"
varyByHeaders="User-Agent" location="Client" />
<add extension=".css" policy="CacheUntilChange"
varyByHeaders="User-Agent" location="Client" />
<add extension=".axd" kernelCachePolicy="CacheUntilChange"
varyByHeaders="User-Agent" location="Client" />
</profiles>
</caching>
<httpProtocol allowKeepAlive="true">
<customHeaders>
<add name="Cache-Control" value="public, max-age=691200" />
</customHeaders>
</httpProtocol>
</system.webServer>
Codebehind sekmesinde aşağıdaki kodları kullanarak Cache i iptal etmek için ise
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.Now.AddDays(-1));
3- Resimleri Optimize edin
Sitemize giriş yaptığımız takdir de, Firebug adlı eklentimizi çalıştırıyoruz. Eklentinin konsolun da Page Speed adlı butonu hemen göreceksiniz, o butona basıyoruz daha sonra “Analyze Performance” butonuna basıyoruz. Karşınıza sitenizin eksiklikleri ve puanlaması çıkıyor.
Burada yapmamız gereken “Expand All” butonuna basıp, çıkan liste de “Resimleri Optimize Edin!” seçeneğine geliyoruz. Evet işin kolay kısmı burada arkadaşlar, liste de size sıkıştırılmış resimlerinizi indirebileceğiniz download adresini hemen veriyor.
Liste
de bulunan resimleri indirip, upload klasörüne attığınız takdir de
sitenizin hızlılık performansının yükseldiğini hissedeceksiniz.
Ek olarak farklı bir önerim sizlere, mutlaka ama mutlaka siteniz de bulunan resimlere“Width/Height” oranlarınızı vermeniz den yanadır. Örnek olarak width=”16″ height=”16″gibi arkadaşlar.
4- Sıkıştırmayı etkinleştirin
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
public class PageBase : System.Web.UI.Page
{
protected override void OnLoad(EventArgs e)
{
GZipSIKISTIRMA(HttpContext.Current);
base.OnLoad(e);
}
/// <summary>
/// Sıkıştırma uygulayan method
/// </summary>
/// <param name="context">O Anki Aktif Context</param>
public static void GZipSIKISTIRMA(HttpContext context)
{
HttpResponse Response = context.Response;
if (GzipEtkinMi(context))
{
string encoding = context.Request.Headers["Accept-Encoding"];
//deflate sıkıştırmayı destekleyenler için
if (encoding.Contains("deflate"))
{
Response.Filter = new System.IO.Compression.DeflateStream(Response.Filter, System.IO.Compression.CompressionMode.Compress);
Response.AppendHeader("Content-Encoding", "deflate");
}
else
{
//Gzip sıkıştırmayı destekleyenler için
Response.Filter = new System.IO.Compression.GZipStream(Response.Filter, System.IO.Compression.CompressionMode.Compress);
Response.AppendHeader("Content-Encoding", "gzip");
}
//Sıkıştırılmış bilgi tarayıcıya belirtiliyor!
Response.AppendHeader("Vary", "Content-Encoding");
}
}
/// <summary>
/// Sıkıştırma Destekleniyor mu kontrol et.
/// </summary>
/// <param name="context">O Anki aktif Context</param>
/// <returns>True yada False</returns>
public static bool GzipEtkinMi(HttpContext context)
{
//Tarayıcı sıkıştırma destekliyor mu ?
string AcceptEncoding = context.Request.Headers["Accept-Encoding"];
if (!string.IsNullOrEmpty(AcceptEncoding))
{
//evet
return (AcceptEncoding.Contains("gzip") || AcceptEncoding.Contains("deflate"));
}
else
{
//hayır.
return false;
}
}
}
Bunu al bir Class.cs dosyası yarat ismine PageBase ver. Eğer Web Application olarak açtıysan herhangi bir yere ekle solisyonda.
Eğer Web Site Project Açtıysan App_Code içine aç bu dosyayı ve yukardakini yapıştır.
Şimdi iki tür Kullanımı var.
Eğer Bütün aspx sayfalarda kullanmak istiyorsan otomatik şunu kullan!
public class _Default : PageBase
{
protected void Page_Load(object s, EventArgs e)
{
}
}
Eğer böyle kullanırsan bütün sayfalarında otomatik sıkıştıracaktır. Sayfa türettim çünkü.
Yok ben almıyayım diyorsan sadece şu sayfalar sıkışsın dersen şöyle:
protected void Page_Load(object s, EventArgs e)
{
PageBase.GZipSIKISTIRMA(HttpContext.Current);
}
Bu kod istediğin herhangi bir aspx sayfadan çağrılabilir.
Birinci örneği tercih ederim.
kaynak:http://www.csharpnedir.com/forum2/forum_posts.asp?TID=31260
5-CSS'yi küçültün
-css ve js sıkıştırmak için
http://www.zbugs.com/
6-Sitemap oluşturun
Sitemapin yapısından bahsedicek olursak ;
<url>
<loc> Link </loc>
<lastmod> Tarih </lastmod>
<changefreq> Frekans </changefreq>
<priority> Önem Sırası </priority>
</url>
Daha detaylı bir analiz için
hocam merhaba sıkıştırmayı tüm sayfalarda etkinleştirmek için
YanıtlaSilpublic class _Default : PageBase {
protected void Page_Load(object s, EventArgs e)
{
}
}
bu kodu nereye yapıştırmamız gerekiyor??
hala düzeltedim, sayfa 404 veriyor kodlar sıtıntılı mı?
YanıtlaSilhttp://instager.net
http://twittager.com
yazıları daha küçük yazarsan daha iyi olur çünkü böyle yine okunabiliyor az daha küçültki okuyamayalım :D
YanıtlaSilBu yorum bir blog yöneticisi tarafından silindi.
YanıtlaSil