PageSpeed Kuralları ve Önerileri

Ilya Grigorik

Bu kılavuzda, PageSpeed Insights kuralları bağlam içinde incelenmektedir: Kritik oluşturma yolunu optimize ederken nelere dikkat edilmeli ve neden?

Oluşturmayı engelleyen JavaScript ve CSS'yi kaldırın

İlk oluşturma sürecini en hızlı şekilde gerçekleştirmek için sayfadaki kritik kaynak sayısını en aza indirin ve (mümkün olduğunda) ortadan kaldırın, indirilen kritik bayt sayısını en aza indirin ve kritik yol uzunluğunu optimize edin.

JavaScript kullanımını optimize etme

JavaScript kaynakları, async olarak işaretlenmediği veya özel bir JavaScript snippet'i aracılığıyla eklenmediği sürece varsayılan olarak ayrıştırıcı engellemesindedir. JavaScript'i engelleyen ayrıştırıcı, tarayıcıyı CSSOM'yi beklemeye zorlar ve DOM oluşturmayı duraklatır. Bu da, ilk oluşturma süresini önemli ölçüde geciktirebilir.

Eşzamansız JavaScript kaynaklarını tercih etme

Eşzamansız kaynaklar, belge ayrıştırıcının engellemesini kaldırır ve tarayıcının komut dosyasını yürütmeden önce CSSOM'yi engellemekten kaçınmasına olanak tanır. Komut dosyası async özelliğini kullanılabiliyorsa genellikle bu, ilk oluşturma için gerekli olmadığı anlamına da gelir. İlk oluşturma işleminden sonra komut dosyalarını eşzamansız olarak yüklemeyi düşünün.

Eşzamanlı sunucu çağrılarından kaçının

unload işleyicilerde XMLHttpRequests tarafından gönderilen verileri sınırlamak için navigator.sendBeacon() yöntemini kullanın. Birçok tarayıcı bu tür isteklerin eşzamanlı olmasını gerektirdiğinden, sayfa geçişlerini zaman zaman fark edilir bir şekilde yavaşlatabilirler. Aşağıdaki kod, sunucuya veri göndermek için unload işleyici yerine pagehide işleyicisinde navigator.sendBeacon() özelliğinin nasıl kullanılacağını gösterir.

    <script>
      function() {
        window.addEventListener('pagehide', logData, false);
        function logData() {
          navigator.sendBeacon(
            'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
            'Sent by a beacon!');
        }
      }();
    </script>

Yeni fetch() yöntemi, eşzamansız olarak veri isteğinde bulunmak için kolay bir yol sağlar. Henüz her yerde kullanılamadığından, kullanımdan önce mevcut olup olmadığını test etmek için özellik algılamayı kullanmanız gerekir. Bu yöntemde yanıtlar, birden fazla etkinlik işleyici yerine Promises ile işlenir. XMLHttpRequest yanıtının aksine getirme yanıtı, Chrome 43'te başlayan bir akış nesnesidir. Yani json() için yapılan bir çağrı da Vaat döndürür.

    <script>
    fetch('./api/some.json')
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' +  response.status);
            return;
          }
          // Examine the text in the response
          response.json().then(function(data) {
            console.log(data);
          });
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
      });
    </script>

fetch() yöntemi, POST isteklerini de işleyebilir.

    <script>
    fetch(url, {
      method: 'post',
      headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
      },
      body: 'foo=bar&lorem=ipsum'
    }).then(function() { // Additional code });
    </script>

JavaScript'i ayrıştırmayı ertele

Tarayıcının sayfayı oluşturmak için yapması gereken iş miktarını en aza indirmek amacıyla, görünür içeriğin ilk oluşturma işlemi için oluşturulmasında kritik olmayan, gerekli olmayan komut dosyalarını erteleyin.

Uzun süre çalışan JavaScript'lerden kaçının

Uzun süre çalışan JavaScript'in, tarayıcının DOM, CSSOM oluşturmasını ve sayfayı oluşturmasını engellediğinden, ilk oluşturma mantığı için gerekli olmayan tüm başlatma mantığı ve işlevlerini sonraki bir zamana erteleyin. Uzun bir başlatma sırasının çalışması gerekiyorsa tarayıcının aradaki diğer etkinlikleri işleyebilmesi için diziyi birkaç aşamaya bölebilirsiniz.

CSS Kullanımını Optimize Etme

Oluşturma ağacını oluşturmak için CSS gereklidir ve JavaScript genellikle sayfanın ilk kurulumu sırasında CSS'de engeller. Gerekli olmayan tüm CSS'lerin (örneğin, basılı ve diğer medya sorguları) kritik olmayan CSS olarak işaretlendiğinden ve kritik CSS'nin miktarı ile bunların teslim süresinin mümkün olduğunca kısa olduğundan emin olun.

CSS'yi doküman başlığına koyun

Tarayıcının <link> etiketlerini keşfedebilmesi ve CSS isteğini mümkün olan en kısa sürede gönderebilmesi için tüm CSS kaynaklarını HTML dokümanında mümkün olduğunca erken belirtin.

CSS içe aktarmalarını önleme

CSS içe aktarma (@import) yönergesi, bir stil sayfasının başka bir stil sayfası dosyasındaki kuralları içe aktarmasına olanak tanır. Bununla birlikte, kritik yola ek gidiş gelişlere yol açtığından bu yönergelerden kaçının: İçe aktarılan CSS kaynakları yalnızca @import kuralı içeren CSS stil sayfası alınıp ayrıştırıldıktan sonra keşfedilir.

Satır içi oluşturma engelleyici CSS

En iyi performans için kritik CSS'yi doğrudan HTML dokümanına satır içi olarak ekleyebilirsiniz. Bu da kritik yoldaki ek gidiş dönüşleri ortadan kaldırır ve doğru yapılırsa yalnızca HTML'nin engelleyen kaynak olduğu "tek gidiş dönüş" kritik yol uzunluğu sağlayabilir.

Geri bildirim