HTTP/2 Server Push Nedir?

HTTP/2 server push, web sitesi hızını artırmak için yeni yollarından biridir. Bu yeni yol Web sayfalarını düzgün bir şekilde yüklemek, gereken kaynakları indirmek ve web sunucusuna istekte bulunabilmek için tarayıcıların web sayfaları ve dosyaları arasında gezinme zorunluluğunu ortadan kaldırır.

HTTP/2 server push, web sayfalarının HTTP başlığında kaynakları belirlemeye izin verir, böylece tarayıcılar, bu kaynakları bulabilmek için web sayfaları ve dosyaları arasında gezinmeye ihtiyaç duymadan önce bu belirtilen kaynakları bilir. Tarayıcıların gerekli dosyaları indirmek için istekte bulunurken bu kaynakları keşfetmeyi beklemeleri gerekmeyeceğinden, kaynakları erken indirmeye başlamalarına olanak tanır. Bu şekilde, HTTP/2 server push, web sitesi kaynaklarının erken indirilmesine izin verir.

Tarayıcılar Web Sitelerini Nasıl Yükler?

HTTP/2 sunucu gönderiminin nasıl çalıştığını anlamak için önce web sitesi dosyalarının bir tarayıcıya nasıl yüklendiğini görelim:

Web tarayıcınıza bir web adresi girdiğinizde ve ardından enter tuşuna bastığınızda veya bir bağlantıya tıkladığınızda, tarayıcı web sitesinin barındırıldığı web sunucusuna bağlanmak için bazı işlemlerden geçer. Ardından tarayıcı, web sayfasını görüntülemek için bir istekte bulunur. Buna karşılık olarak sunucu o sayfanın HTML belgesini (ana web sayfası) gönderir.

Ardından tarayıcı sayfayı ayrıştırır/geçer ve o sayfada başka bir gerekli dosya (örn. CSS, JS, resimler, yazı tipleri, vb.) için bir bağlantı bulduğunda, tarayıcı bu dosyayı indirmek için başka bir istekte bulunur. Ardından tarayıcı başka bir dosya bulduğunda, o dosyayı indirmek için başka bir istekte bulunur ve bu böyle devam eder.

Ardından tarayıcı her dosyayı indirirken bu dosyaları gözden geçirir ve web sayfasını ekranınıza aktarmaya başlar. Ve sadece web sitesi adresini kullanarak bir web sitesini ekranınızda bu şekilde görürsünüz.

HTTP/2 Server Push Nedir?

Bir web tarayıcısı web sayfalarınızdan herhangi birini görüntülemeyi istediğinde, web sunucunuz yalnızca o web sayfasının HTML dosyasını gönderir. Ardından tarayıcı bu HTML dosyasını okur/çözümler ve HTML dosyasında ve ek dosyalarda bu dosyaları bulduğu için sunucuya ek dosya (CSS, JS, resimler vb.) istekleri gönderir.

HTTP/2 server push, tarayıcı bir web sayfasını ilk kez görüntülemeyi istediğinde, web sunucularının HTML belgesinin yanında gerekli dosyaları göndermesine izin verir. Böylece, web sunucusu bu ek kaynakları tarayıcı talep etmeden önce göndermeye başlar. Bu nedenle, bu ek dosya isteklerini yapmak için geçen süreyi ortadan kaldırır. Zamandaki bu azalma, web sitenizin yükleme hızını artırmaya yardımcı olur.

HTTP/2 Server Push Hızı Nasıl Etkiler?

Hangi dosyaların gönderildiğine bağlı olarak, web sitesi yükleme hızında çeşitli sonuçlar görebilirsiniz. Örneğin, yalnızca ekranın üst kısmındaki içerikleri yüklemek için gereken kaynakları zorlarsanız (bunlar, web sayfasını hiç kaydırmadan tarayıcı ekranında görünen içeriklerdir), web sitenizin yüklenme hızı, sitenin yüklenme hızına göre daha hızlı görünecektir. 

Bu ayrıca size daha yüksek bir Google PageSpeed ​​Insights puanı verecektir.

Yalnızca web sayfasının başka bir dosyasını ayrıştırırken tarayıcılar tarafından keşfedilen dosyaları gönderirseniz, web sitenizin toplam yüklenme hızı artacaktır. Ancak hem ekranın üst kısmındaki içerikler için gerekli olan dosyaları hem de başka bir dosyayı ayrıştırırken bulunan dosyaları iterseniz, toplam site hızınız bazen daha da artabilir ancak yukarıdaki sayfanızın yüklenme hızının düşmesine neden olabilir.

Ve çok fazla dosya yüklemek, ekranın üst kısmındaki içeriklerin yüklenmesini ve ayrıca web sitenizin toplam yükleme süresini yavaşlatabilir. Bunun nedeni, birden fazla dosyayı aynı anda itmek, indirme hızını tüm dosyalar arasında dağıtacak ve bu da tüm dosyaların indirme hızını yavaşlatacaktır. Sonuç olarak, diğer dosyaların oluşturulması da gecikecek ve bu da ekranın üst kısmındaki içeriğin yüklenmesini ve toplam web sitesi yükleme hızını yavaşlatacaktır.

Daha da kötüsü, dosyaları kritik oluşturma yolu üzerindeki etkilerini dikkate almadan göndermek, ekranın üst kısmındaki içerikler için gerekli olan kritik bir dosyadan önce kritik olmayan bir dosyanın oluşturulmasına neden olabilir. Bu, herhangi bir dosyayı hiç itmemekle karşılaştırıldığında, ekranın üst kısmındaki içeriğin yüklenmesini daha da yavaşlatabilir.

Bu aynı zamanda, herhangi bir tasarım olmadan yalnızca web sitesi içeriğini gördüğünüz ve bir süre sonra biçimlendirmeyi geri aldığı ve her şeyin normal göründüğü FOUC (Flash of Unstyled Content) sorununu ortaya çıkarabilir.

HTTP/2 Server Push için Hangi Dosyaları Kullanmalıyım?

Yukarıda tartışıldığı gibi, etkilerini doğru bir şekilde düşünmeden dosyalarla sunucu push’u kullanmak, web sitesi yükleme hızı üzerinde çeşitli etkilere sahip olabilir. Doğru dosyaları göndererek web sitesi hızında bir iyileşme elde edebilir, ancak sonuçlarını fark etmeden dosyaları göndererek ters bir etki görebilirsiniz. Bu yüzden HTTP/2 server push ile hangi dosyaları kullandığınıza dikkat etmelisiniz.

Yalnızca, ekranın üst kısmındaki içeriği yüklemek için gerekli olanlar gibi anahtar istekleri göndermenizi öneririm. Ancak daha ileri gitmek istiyorsanız, HTML dosyasının kendisi dışında yalnızca web sayfasının başka bir dosyasından bulunabilen dosyaları da aktarabilirsiniz, ancak bunu yapmanın daha iyi bir yolu, önyükleme  kullanmaktır.

Ön yükleme, HTTP/2 server push’a benzer şekilde çalışır, ancak sunucudan dosya göndermek yerine, tarayıcıların bu dosyaları aynı anda yüklemesine izin verir. 

Ancak, FOUC sorununu önlemek ve web sitesi tasarımınızı düzgün bir şekilde yüklemek için web sitesi yükleme sürecinde çok erken CSS dosyalarına ihtiyaç vardır. Bu nedenle, CSS dosyalarını zorlamak, daha hızlı bir CSS yükleme hızı elde etmek için iyi bir fikir olabilir.

Ancak LiteSpeed ​​Cache eklentisi, daha iyi CSS yükleme davranışı elde etmemize yardımcı olacak Critical CSS özelliğine sahiptir. Bu nedenle, bu CSS HTTP/2 seçeneğini etkinleştirmeniz gerekmez. Kritik CSS, bu ayarlar sayfasındaki başka bir seçenektir, bu yüzden orada tartışılmıştır.

Server Push: Nasıl Yapılır?

Sunucu push yönergesi, belirli kaynaklar için sunucu push yönergeleri tarafından takip edilen bağlantı başlığı kullanılarak web sayfalarının HTTP başlığında verilir.

Server push yönergesi, HTML önyükleme kaynak ipucundan yararlanır. Bu nedenle, belirtilen kaynakların server push yönergesi içinde rel=preload kullanılır. 

Aşağıda, bazı yaygın dosya türlerini sunucuya göndermek için bazı örnek sözdizimi verilmiştir…

Bu, sunucu push CSS dosyalarına yönelik bir sözdizimidir:

 

link: </style.css>; rel=preload; as=style

 

• /style.css sunucuya göndermek istediğiniz dosyadır, bu nedenle sizin için farklı olabilir
• as Önceden yüklemek istediğiniz kaynak türünü belirtir

İşte sunucu push JavaScript dosyalarının sözdizimi:

link: </main.js>; rel=preload; as=script

Sunucu push görsel dosyaları için bir sözdizimi:

 

link: </logo.png>; rel=preload; as=image

 

Server Push Çoklu Dosyalar

Push yönergelerini virgülle ayırarak birden fazla dosyayı sunucu push edebilirsiniz. Aşağıda sunucuya bir CSS ve bir JS dosyası göndermek için bir sözdizimi verilmiştir.

 link: </style.css>; rel=preload; as=style , </main.js>; rel=preload; as=script

Server push, web tarayıcılarına belirtilen dosyaları web sayfalarına uygulama talimatı vermez. Bu nedenle, server push kullanırken bile, bu web sayfalarına uygulanacak dosyalar için web sayfalarındaki (HTML dosyaları) bu dosyaları ayrı olarak bağlamanız gerekir.