DOMContentLoaded nasıl iyileştirilir?

İnsanların en hızlı araba, en hızlı koşucu, en hızlı bilgisayar işlemcisi, hatta en hızlı web sitesi tarafından büyülendiği bir sır değil. Günümüzün teknoloji endüstrisinde, en yüksek hız ve performansı elde etmek için web sitenizi duyarlı web tasarımı ile optimize etmek bir zorunluluktur. 

Özellikle dünya nüfusunun beşte biri internete mobil cihazlar aracılığıyla eriştiği için geçerlidir. Bu nedenle, web sitelerinin çeşitli cihazlara hızlı bir şekilde uyum sağlama yeteneğine ihtiyacı vardır.

Duyarlı davranmamayı seçen şirketler, büyük adaptasyon maliyetleriyle karşı karşıya kalır ve nihayetinde performans düşer. Bu, üç şeye bağlanabilir: yükleme performansı, oluşturma performansı ve programlama performansı. Bu makalede, insanların yaptığı en popüler hatalardan nasıl kaçınılacağına odaklanmak istiyorum, ancak önce, sizi bir uygulamanın ne zaman “hızlı” olarak adlandırılabileceğini tanımlayan birkaç yazılı olmayan kuralla tanıştırmak istiyorum:

  • Time for the First Byte: 201ms – 351ms
  • DOM Content Loaded: 1001ms – 2002ms
  • JS Load Event Fired: 901ms – 2202ms
  • Total Download Size: 1MB – 2MB
  • DNS Lookup: 10ms – 20ms
  • HTTP Requests per page: 50 – 75

Fazla Kilolardan Kurtulmak

Çok kodlu devasa bir uygulamanız olabilir ama bu projelerin çoğunda en büyük probleminizin görsellerle olduğunu göreceksiniz. Yükleme süresini ve HTTP isteklerinin sayısını artırırlar. Yüksek kaliteli şeffaf PNG dosyaları kullanırsanız, daha da fazla baş ağrısına neden olabilir. Yani, uygun araçları kullanmaya başlayana ve görüntü kümelerini nasıl düzenleyeceğinizi öğrenene kadar.

Bu görüntüleri düzenlemenin ilk adımı, onları uygun şekilde hazırlamaktır. JPEG’leri optimize etmek kolay olsa da, insanlar genellikle kalite düştüğü için PNG resimlerini optimize etmenin bir yolu olmadığından şikayet ederler. Ancak eski ama ücretsiz “Color Quantizer” uygulamasına bir göz atın. Bu, PNG görüntülerini kaliteden ödün vermeden optimize etmek için harika bir araçtır. Doğru optimizasyondan sonra görüntüler keskin görünüyor. Bu araçla, yarım megabaytın üzerindeki görüntüleri en az iki kez optimize edebilirsiniz ve kalite kaybı neredeyse tespit edilemez olacaktır.

Görüntüleri optimize etmenin başka bir yolu da sprite kullanmaktır. Sprite’lar, hızlı web sayfası yükleme için kilit noktalardan biri olan HTTP isteklerinin miktarını azaltmanıza olanak tanır. SASS ve Compass kullanarak otomatik sprite üretimi için meslektaşım Paul Gabronis tarafından yazılmış bir eklenti öneririm. Adı “ Easy Sprites ” ve inan bana – çok kolay. Bu eklenti yalnızca web sitenizin hızını artırmakla kalmayacak, aynı zamanda verimliliğinizi de artıracaktır. İnsanlar ilgileniyorsa, SVG spritelarını da deneyebilirler

Çok büyük görüntüler için JPG aşamalı biçimini veya ön yükleyiciyi kullanmalısınız. Bu, sayfa içeriği hala yüklenirken sayfanın oluşturulmasını engellememeye yardımcı olacaktır.

Herhangi bir nedenle hareketli görüntüleri kullanamıyorsanız, satır içi Base64 görüntülerini deneyin. Bu, HTTP isteklerinin miktarını da azaltabilir. Öte yandan satır içi görüntüler normal PNG dosyalarından biraz daha ağırdır, bu nedenle bunlara dikkat edin. Pusula kullanıyorsanız, görüntüleri kolayca Base64’e dönüştürebilirsiniz

.test-class  {
    background:inline-image("test-image.png") no-repeat 0 0;
}

CSS Optimizasyonu

  1. Büyülü CSS parçacığı: transform:translateZ(0). Web tarayıcı geliştiricileri genellikle işlerin nasıl uygulanması gerektiği konusunda anlaşamazlar, bu nedenle web tarayıcı motorlarında GPU hızlandırma özelliği uygularken akılların bir araya gelmemesi şaşırtıcı değildir. Gecko motoru her şeyi hızlandırmayı seçtiyse, WebKit geliştiricileri size onu kendi başınıza seçme özgürlüğü verdi. Bu mantıklı, çünkü:
    1. Bu size cihaz kaynaklarını tahsis etme ve öncelikleri belirleme özgürlüğü verecektir.
    2. Bu, cihazın pilinden tasarruf etmenize yardımcı olacaktır.

    translateZ(0), daha önce bahsedilen, bir öğeyi değiştirmeden GPU hızlandırmasını zorlamanıza izin veren bir hack’tir. Ancak buna dikkat edin – varsayılan davranışı buna özel değildir. Gelecekte bunun için CSS özelliği atama planları var. Bu özellik hakkında daha fazla bilgi için bu açıklamayı okuyabilirsiniz .

  2. JavaScript’i Dönüştürme: JavaScript animasyonlarını CSS geçişlerine/animasyonlarına dönüştürmek faydalıdır. Bu, özellikle aynı anda birden çok öğeye animasyon uyguladığınızda geçerlidir. Farkı burada görebilirsiniz. Firefox’un CSS geçişleri/animasyonları ile aynı anda 150’den fazla öğeyi canlandırırken bazı sorunları olduğunu unutmayın.
  3. Pahalı CSS özelliklerini optimize etme: Kutu gölgesi, gradyan, kenarlık yarıçapı, anahat, opaklık gibi özelliklerin, kullanıcı arayüzünüzü yavaşlatabilecek bazı ilginç oluşturma davranışları vardır.Üç farklı senaryo ile kutu gölgesinin nasıl oluşturulduğuna dair bir örnek:

    A – öğesi yalnızca box-shadow özelliğiyle oluşturulacaktır.

    B – eleman sadece border-radius özelliği ile işlenecektir.

    C – öğesi, kutu gölgesi ve kenarlık yarıçapı özellikleriyle (A + B) oluşturulacaktır.

    Şimdi render süresinin nasıl değiştiğine bir göz atalım:

    Bir oluşturma süresi – 0.19ms

    B oluşturma süresi – 0.16 ms

    C oluşturma süresi – 0.73ms

    Bir başka ilginç şey, nasıl box-shadowişlendiğidir, ardından değer değişir:

    box-shadow: 1px 1px= oluşturma süresi 0.28ms

    box-shadow: 1px 2px 3px red= oluşturma süresi 0.16ms

    box-shadow: 1px 2px 3px 4px= oluşturma süresi 0.76ms

    Bu, bu özellikleri kullanmak zorunda olmadığınız anlamına gelmez, ancak performans sorunlarınız varsa bu bilgilerin önemli olabileceğini unutmayın. Daha ayrıntılı bilgi için bu AirBnb gönderisini okuyun.

  4. Daha az performans gösteren seçicileri aramak için otomatik testleri kullanma: İşte en iyi testlerden biri . Size kaydırma hızını azaltan seçiciler verebilir.

Optimizasyon Temelleri

Web sitenizin performansından haberdar olmak için aşağıdaki temel ipuçlarını unutmayın:

  1. CSS dosyalarınızı küçültün ve dosya miktarını minimuma indirin. Medya sorgularını ve stil sayfalarını tek bir dosyada birleştirin.
  2. CSS dosyalarınızda @import kuralını kullanmayın.
  3. JavaScript dosyaları yalnızca gövde etiketi kapatılmadan önce yüklenmelidir. Bu kuralı yalnızca çok özel durumlarda ihlal edin.
  4. JavaScript ve CSS dosyalarınızı küçültün (otomatik küçültme için https://www.npmjs.org/package/grunt-contrib-uglify ve https://github.com/gruntjs/grunt-contrib-cssmin kullanabilirsiniz ).
  5. CSS dosyalarınızı mümkün olan en kısa sürede yalnızca Head etiketine yükleyin.
  6. Kaynakları bir CDN’den (İçerik Dağıtım Ağı) yükleyin. Require.js kullanıyorsanız, CDN kullanımı şöyle görünecektir: 
    requirejs.config({
    baseUrl: "Scripts",
    paths: {
    /\* Load jquery from google cdn. On fail, load local file. \*/
    'jquery': \['//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min', 'libs/jquery-min'\],
    }
});

Akılda tutulması gereken diğer MISC optimizasyon fikirleri:

  1. Varsayılan jQuery onresize olayını kullanmak yerine şunu kullanın: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/Pratik örnek: http://jsfiddle.net/c9Dfm/
  2. Uzak bir kaynaktan bir IFrame yüklemek büyük bir baş ağrısı olabilir. IFrame’i YouTube veya Vimeo gibi web sitelerinden yüklemek, performansı biraz azaltabilir ve yerel kaynakların yüklenmesini engelleyebilir. Bu alıntı, bu tür sorunları önlemenize yardımcı olacaktır: 
    $(document).ready(function () {
    $('iframe').each(function() {
        $(this).attr('src', $(this).data('src'));
    });
});

 

Bir cevap yazın