İçeriğe geç

Web sayfalarını optimize etmenin püf noktaları

Merhaba genellikle,blog yazarları gibi daha çok içerik ile ilgilenen web site sahiplerinin takıldığı bir probleme değinmek istiyorum. Birazdan göstereceğim küçük işlemleri yaparak daha stabil ve hızlı bir web sitesine sahip olabilirsiniz.

Sayfa yapısı

javascript kodlarınızı sayfanızın alt kısmında tanımlamanız oldukça önemli. Ancak stil kodlarınızı bu yazdığıma aldanıp aynı şekilde tanımlamayın. Onlar sayfanın head etiketleri arasında durmaya devam edecek.

<html>
    <head>
        <meta charset="utf8">
        <title>Örnek sayfa</title>
        <link rel="stylesheet" type="text/css" href="page.css" />
    </head>
    <body>
        
        <!-- Javascript kütüphaneleri  -->
           <!-- JS kodları burada! -->
        <!-- Javascript kütüphaneleri -->
    </body>
</html>

Kod tekrarlarına ölüm!

Bir web sitesinin ciğerini sökecek kadar kötü durumlara yol açabilen kod tekrarlarına meydan okuyun.  Tekrar eden kodlar sadece açılış performansını etkilemez ayrıca web sitesine gereksiz yük bindirir. Kod tekrarına sadece php veyahut javascript kodları girmemekte bunu da unutmayın. Css kodlarınız içindede gereksiz kod yazmaktan kaçının.

Sayfa görselleri

Web sayfasına çağırdığınız bir görselin çok büyük olması sonrasında bu büyük görseli alıp css kullanarak şekillendirmeniz size büyük performans kaybı yaşatır. Eğer 400×400 bir alanınız varsa orada kullanacağınız görselin tam olarak o boyutlarda olması sayfada ki gereksiz yükten sizi arındıracaktır.

Hatalı kullanım ->

<html>
    <head>
        <title>Bunu sakın yapma!</title>
        <!--
       <style Bu still kodlarını kullandığım editör yüzünden şuan ekleyemiyorum :/
            div {
                width:300px;
                height:300px;
            }
            img {
                width:100%;
                height:100%;
            }
        style> //Tagları düzeltirsiniz :DD
        -->
    </head>
    <body>
        <div>
            <img src="http://pop-verse.com/wp-content/uploads/2015/08/galaxy-wallpaper-36.jpg" />
        </div>
    </body>
</html>

Javascript kodlarınızı sıkıştırın.

Javascript kodlarının sıkıştırılması performans açısından büyük fark yaratabilir.

$(document).ready(function(){
        $('body').append('Merhaba dünya!');
        alert('Append edildi.');
    });
$(document).ready(function(){$("body").append("Merhaba dünya!"),alert("Append edildi.")});

Ön belleğin gücü adına!

projenizde bir cache mekanizmasının olması kelimenin tam anlamıyla hayatınızı kurtarabilir. Sadece performanstan bahsetmiyorum ayrıca maliyet kısmında da fayda sağlaması mümkün. Cache önemli,cacheyi sevin.

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir