Web sitenizi 1 saniye altında açılır hale getirin.

Google PageSpeed’te 100% başarı sağlama yöntemleri...

Web site performansının önemi ziyaretçinin web sitesini rahat kullanmasının yanı sıra arama motorlarında hızlıca yükselmenin en önemli faktörüdür; dahası web sitenizde performans elde etmek için ekstra maliyetler ortadan kalkar.

Web site performansı arttırmanın bir çok yolu mevcuttur. Sıkı çalışma ile istediğiniz sonucu elde edebilir, 1 saniye altında açılan siteler ile profesyonel çalışma yaptığınız kullanıcı tarafından anlaşılır, işinize verdiğiniz ciddiyetten dolayı güven duyulursunuz.


Web sitesinde kullanılan dosyaları sıkıştırmak

Kullandığımız kod ve stil dosyalarını sıkıştırarak %70 oranında başarı sağlamış oluruz; dosyaları küçültülmüş olarak kullandığımızda işlemlerin yapılması daha hızlı olur. Sıkıştırma için hazırladığınız bir uygulama yoksa, dosya sıkışmakta kullanmanızı önereceğim (YUI, IO, Runtime Memory CACHE, Web CACHE) .Net platformunda kullanılan kütüphaneleri mevcut. Örnek verecek olursak;

YUI ile Stil ve kod dosyalarını sıkıştırmak ve belleğe almak

if (HttpContext.Current.Cache[“bellekismi”] == null){ 
string dosyaYolu1 = HttpContext.Current.Server.MapPath(“jquery.js”);
string dosyaYolu2 = HttpContext.Current.Server.MapPath(“style.css”);
string dosya1 = System.IO.File.ReadAllText(dosyaYolu1);
Yahoo.Yui.Compressor.JavaScriptCompressor _js = new Yahoo.Yui.Compressor.JavaScriptCompressor();


dosya1 = _js.Compress(dosya1) + System.Environment.NewLine;
string dosya2 = System.IO.File.ReadAllText(dosyaYolu2);
Yahoo.Yui.Compressor.CssCompressor _css = new Yahoo.Yui.Compressor.CssCompressor();
dosya2 = _css.Compress(dosya2) + System.Environment.NewLine;

HttpContext.Current.Cache.Insert(“js bellek ismi”, dosya1, new System.Web.Caching.CacheDependency(dosyaYolu1),
System.Web.Caching.Cache.NoAbsoluteExpiration, CacheDuration);
} 
HttpContext.Current.Response.Write((string)HttpContext.Current.Cache[“bellekismi”]);


Web sitesinde kullanılan dosyaları ön belleğe almak

Web sitenizin geç yükleniyor olması ve kullanıcıya aynı içeriği tekrar yükleyip sunuyor olması ciddi derecede performans ve trafik kaybına neden olur! bu sebeple yapılması gereken iki farklı belleğe alma yöntemi vardır.


Dinamik olarak beleğe alınan veriler (Memory CACHE)

Dosyadan veya veri tabanından gelen verileri belirli süre ile belleğe almak, yeni bir ekleme veya değişiklik yapana dek sunucu ram inde saklamak ve gelen isteklerin talebini bellekten karşılamak.

Örnek yapı aşağıdaki gibidir.

System.Runtime.Caching.MemoryCache mc = System.Runtime.Caching.MemoryCache.Default;
        string bellek = string.Empty;
        if (mc.GetCacheItem("anahtar") != null) {
            bellek = mc.GetCacheItem("anahtar").Value.ToString(); }
        else
        {
            string veriler = "..............";
            mc.Add("anahtar", veriler, DateTime.Now.AddDays(3));
            bellek = veriler;
        }

Tüm verileri bellekten silmek

İçerik yönetimi kullandığınızı varsayarak, yeni bir kayıt ekleme, silme veya kayıt değiştirme işlemi sonrasında bellekten verileri temizlemeniz gereklidir; aksi takdirde eklediğiniz kayıt belirlediğiniz süre kadar görünmeyecektir; aşağıdaki örnek kod ile sorunu çözmüş olursunuz.

System.Collections.Generic.List<string> anahtarlar = MemoryCache.Default.Select(j => j.Key).ToList();
   foreach (string anahtar in anahtarlar){	
      MemoryCache.Default.Remove(anahtar);
   }
  GC.Collect(); 
  GC.WaitForPendingFinalizers();


Statik olarak belleğe alınan veriler (Client CACHE)

Web sitesinde kullanılan dosyaları belirli süre aralığında belleğe almaktır. Belleğe alınmış içerik kullanıcının tarayıcı geçmişinde saklanır. Örnek vermek gerekirse meta etiketi kullanılarak yapılır.
1 haftalık bir belleğe alma istenildiğinde

<meta http-equiv="cache-control" content="max-age=604800"> 
<meta http-equiv="expires" content="Tue, 24 Jan 2017 12:00:00 GMT">

Aspnet için örnek kod:

DateTime dt = DateTime.Now.AddDays(7);
Response.Cache.SetExpires(dt);
Response.Cache.SetMaxAge(new TimeSpan(dt.ToFileTime()));

Ya da web.config dosyasına aşağıda örnek kodlar uygulanabilir.

<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseExpires" httpExpires="Tue, 24 Jan 2017 12:00:00 GMT" />


<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.17:00:00"/>
</staticContent>
</system.webServer>

Resimleri optimize etmek ve belleğe almak

Web site performansını etkileyen en önemli kullandığımız dosyalar resimlerdir. Web sitenizi test edebileceğiniz ve başarı sağlayabileceğiniz en önemli sitelerden biri GTMetrix.com sitenizde yüksek boyutta olan resimleri optimize eder ve indirmenizi sağlar; bazı durumlarda performans analizi yaptığımızda resimleri ne kadar küçültürsek, küçültelim sonuç değişmiyor ve kullandığımız fotoğraf deforme oluyor. Bunu gidermek için dosyayı (ASCII karakterlerden oluşan kod şeması) Base64 formatında çağırmamız sorunun çözümü olacaktır. Oluşan formatı bellekte saklama gibi bir durumda söz konusu oluyor ve performans açısından çok daha etkili hale geliyor.

Aspnet için örnek kod;

public string imgBase(string resimYol, string tip, string anahtar, int saat)
    {
        
System.Runtime.Caching.MemoryCache mCache= System.Runtime.Caching.MemoryCache.Default;
        if (tip == "gif") tip = "image/gif";
        else if (tip == "jpg") tip = "image/jpeg";
        else if (tip == "png") tip = "image/png";
        string img = string.Empty;
        if (mCache.GetCacheItem(anahtar) != null)
        {
            img = mCache.GetCacheItem(anahtar).Value.ToString();
        }
        else
        {
            byte[] rbyte = System.IO.File.ReadAllBytes(HttpContext.Current.Server.MapPath("~/" + resimYol));
            img = @"data:" + tip + ";base64," + Convert.ToBase64String(rbyte);
            mCache.Add(anahtar, img, DateTime.Now.AddHours(saat));
        }
        return img;
    }
 imgBase(“/img/logo.jpg”,”jpg”,”Logo”,2);


Yukarıda yazılmış olan bellekleme fonksiyonu ile GOOGLE PAGESPEED de sıkça karşılaşılan Tarayıcı Önbellekleme Özelliğinden Yararlanın uyarısını ortadan kaldırmaktadır.


Stil, html ve kod dosyalarınızı küçültün

Web sitenizde çalışan kodların, stil dosyaların içeriğinde yer alan kodların satılarını, boşluklarını minimuma almanız, dosya boyutunu azaltır ve web sitenin hızlı çalışması yönünden avantajdır. Kısa yoldan bu işlemleri yapmanıza yarar sağlayan sitelerde mevcut.
Stil dosyalarınızı küçültmek için csscompressor.net veya cssminifier.com adresinden faydalanabilir kod dosyalarınızı minimize etmek içinde javascript-minifier.com adresinden yararlana bilirsiniz.

Web site performansı için içerik yapısı

Web sitenizde kullandığınız kod dosyalarını (stil dosyaları hariç) sayfanın başına değil bitişine ekleyiz. Önceliği stillere, yazı ve resimlere veriniz, mümkünse kod dosyalarının 1 saniye sonra yüklemesini sağlayınız. Birden fazla stil dosyası bulundurmayın! var olan tek stil dosyasını belleğe alın.

Tek stil dosyasında ekran görümleri için adaptasyon uyarlaması yaptıysanız ve dosyanın boyutu fazla ise bunları farklı stil dosyalarına bölebilir ve aşağıda yer alan etikette olduğu gibi kullana bilirsiniz.

<link rel="stylesheet" media="(min-width:1000px)" href="1000px.css">
<link rel="stylesheet" media="(min-width:800px)" href="800px.css">

Farklı sitelerden gelen http isteklerine öncelik vermeyin!

Web sitenizin performansı açısından, uzak sunucudan talep edilen istekleri sona bırakın, “DNS-PREFETCH” etiketi ile, sitenizin tüm içeriği yüklendikten sonra çalışmasını sağlayın. Örnek html kodları

<link rel="dns-prefetch" href="//youtube.com"> 
<link rel="dns-prefetch" href="//s.ytimg.com/">

Özellikle sipariş aşama sayfalarında kullanmanızı tavsiye edeceğim “PRERENDER” etiketi ile sayfaya geçiş oldukça hızlı oluyor; sayfanın içeriği önceden yorumlanmış oluyor. Örnek html etiketi

<link rel="prerender" href="//www.maksiweb.com/web-tasarim/">

Web site performansının önemi arama motorlarında hızlıca yükselmenin en önemli faktörüdür.

Web site performansı nasıl arttırılır

Makalede yazılı olan işlemlerin tümünü uyguladığınızda sonuç, Google PageSpeed analizinde fotoğrafta ki gibi olacaktır.

Web sitenizin hızını test etmek için tıklayın


Web Site
Etiket:
Okunma Sayısı: 46359


Yorum Yaz

Makale hakkında ki soru ve görüşlerinizi bizimle paylaşın.



Lütfen! Yorumlarınızı imla kurallarına uygun olarak yazınız!


Web Site kategorisine ait diğer makaleler


Web Tasarım Modelleri

Web Tasarım Modelleri
Web Tasarım Modelleri; web teknolojileri alanında ki yeniliklerden biri CSS3 ile beraberinde kullanıcı deneyimine yönelik tasarım modelleri getirdi.
Editör : Maksiweb / Tarih : 12.04.2017 16:51

Http Durum Kodları

Http Durum Kodları
Http Durum Kodları; Http status kod, status code ne demek? Sunucu taraflı servisler ile iletişim sağlayan isteklerin kontrolleri yanıtlar ve durum kodları
Editör : Maksiweb / Tarih : 01.12.2017 07:28

Web Sitesi Nedir

Web Sitesi Nedir
Web Sitesi Nedir; web sitesi hakkında bilgiler web sitesi nedir ne işe yarar, web sitesi nedir nasıl yapılır, web açılımı nedir tüm ayrıntıları
Editör : Maksiweb / Tarih : 14.12.2017 09:01

Popüler Yazılar


Google PageSpeed
17, Ocak 2017 Salı

Arama Motoru Optimizasyonu
21, Şubat 2017 Salı

100% Başarılı SEO Kuralı
19, Ocak 2017 Perşembe

Popüler Sosyal Medya Siteleri
22, Şubat 2017 Çarşamba

E-bülten

Güncel makaleler'den ilk siz haberdar olmak istiyorsanız, e-bültene kayıt olun!