HTTP2'ye Hazırlanmak: Web Tasarımcıları ve Geliştiriciler İçin Bir Kılavuz

Köprü Metni Aktarım Protokolü (HTTP), sunucunuz ile web sitenizin ziyaretçilerinin tarayıcıları arasındaki bağlantıyı yöneten protokoldür. 1999'dan beri ilk kez , bu protokolün yeni bir versiyonuna sahibiz ve herkes için çok daha hızlı web siteleri vaat ediyor.

Bu makalede, web tasarımcıları ve geliştiricileri için geçerli olan HTTP2'nin temellerine bakacağız. Yeni protokolün bazı temel özelliklerini açıklayacağım, tarayıcı ve sunucu uyumluluğuna bakacağım ve HTTP2'nin daha fazla benimsendiğini gördükçe düşünmeniz gerekebilecek şeyleri ayrıntılandıracağım.

Smashing hakkında daha fazla okuma :

• Önyükleme: Ne İşe Yarar?
• AMP Hakkında Bilmeniz Gereken Her Şey
• Smashing Magazine'in Performansını Artırma

Bu makaleyi okuyarak, kısa ve uzun vadede iş akışınızda neleri değiştirmeyi düşünmeniz gerektiğine dair bir genel bakış elde edeceksiniz. Ayrıca, gündeme getirilen sorunları daha ayrıntılı incelemek isterseniz bol miktarda kaynak ekleyeceğim. Amacım, HTTP2'ye geçişinizi planlarken iyi kararlar alabilmeniz için size yeterli arka planı vermek.

HTTP'nin Kısa Tarihi

HTTP, ilk olarak 1991'de tanımlanan, son büyük revizyonu olan HTTP/1.1 ile 1999'da yayınlanan eski bir protokoldür. 1999'daki web siteleri, bugün geliştirdiğimiz web sitelerinden çok farklıydı. Http2'de Daniel Sternberg, ortalama bir web sitesinin ana sayfasını yüklemek için gereken veri miktarının 1,9 MB olduğunu ve bir sayfayı görüntülemek için 100'den fazla ayrı kaynak gerektiğini belirtiyor - bir "kaynak", bir resim veya yazı tipinden herhangi bir şeydir bir JavaScript veya CSS dosyasına.

HTTP/1.1, modern bir web sitesini görüntülemek için gereken çok sayıda kaynak alınırken iyi performans göstermez. Bu makalenin ilerleyen bölümlerinde göreceğimiz gibi, web geliştiricileri olarak bildiğimiz en iyi performans uygulamalarının çoğu, HTTP/1.1 sınırlamalarıyla başa çıkmamızdan gelir.

SPDY

2009'da Google'daki iki mühendis, üzerinde çalıştıkları SPDY adlı bir araştırma projesi hakkında paylaşımda bulundu. Bu proje, HTTP/1.1'deki bazı sorunları ele aldı. SPDY şunları yapmak için yola çıktı:

• çoğullama olarak bilinen tek bir TCP bağlantısı üzerinden eşzamanlı isteklere izin verir;
• tarayıcıların, bir sayfanın görüntülenmesi için hayati önem taşıyan kaynakların önce sunucu tarafından gönderilebilmesi için varlıklara öncelik vermelerine izin verin;
• HTTP başlıklarını sıkıştırın ve azaltın;
• server push uygulayın, böylece bir sunucu hayati kaynakları istenmeden önce tarayıcıya gönderebilir.

Ayrıca SPDY, tarayıcı ve sunucu arasında şifreli (HTTPS) bir bağlantı gerektirir.

SPDY, HTTP'nin yerini almaz; bunun yerine, protokol için bir tüneldir ve mevcut HTTP isteklerinin ve yanıtlarının gönderilme şeklini değiştirir. Hem sunucudan hem de o sunucuya bağlanan tarayıcıdan destek gerektirir . NGINX'te sağlanan destek ve Apache'de desteği etkinleştirmek için Google'dan sağlanan paketlerle, makul miktarda SPDY benimsendi. Tarayıcı desteği, onu destekleyen tüm büyük tarayıcıların modern sürümleriyle de oldukça iyidir.

HTTP2

SPDY'nin hem sunucularda hem de tarayıcılarda benimsenerek bazı başarılar elde ettiğini gördük. Ancak, Internet Explorer 11'in desteklenmesine rağmen Microsoft'un Edge tarayıcısının onu düşürdüğünü de fark etmiş olabilirsiniz. Burada neler oluyor?

Microsoft'un HTTP protokolünün en son sürümü olan HTTP2 desteğini uygulaması nedeniyle Edge'de SPDY desteği kaldırıldı. Mevcut diğer tarayıcılar hala SPDY desteğini sürdürürken, Chrome 2016'da desteği kaldıracak ve muhtemelen diğer tarayıcılar da bunu takip edecek. Yazma sırasında Edge, Firefox, Chrome ve Opera hem SPDY hem de HTTP2'yi destekler. iOS dahil olmak üzere Safari, bu yıl Safari 9'un piyasaya sürülmesiyle bu gruba katılacak.

HTTP2, yeni protokol için bir başlangıç ​​noktası olarak kullanılan SPDY'nin başarısını temel alır. Bu nedenle, SPDY'nin hedeflerinin çoğu HTTP/2'de karşılanır. HTTPS bağlantısı gereksinimi kaldırıldı. Bununla birlikte, tüm tarayıcı satıcıları yalnızca TLS (https) bağlantıları için HTTP2 uygulamaya karar verdi. Bu nedenle, sunucudan sunucuya iletişimde potansiyel olarak açık metinli HTTP/2 kullanabilseniz de, tarayıcılara HTTP2 sunma kullanım durumumuz, HTTP2'ye geçmeyi düşünmeden önce sitenizin https üzerinde çalıştırılması gerektiği anlamına gelir.

HTTP2 belirtimi Şubat 2015'te tamamlandı; bir yıl sonra, modern tarayıcılarda tarayıcı desteği mükemmel. SPDY'de olduğu gibi, HTTP2 hem tarayıcı hem de sunucu düzeyinde destek gerektirir ve zaten birçok web sunucusu uygulaması vardır. Bunları HTTP/2 wiki'den takip edebilirsiniz. W3Techs'in Temmuz 2015'ten itibaren benimseme oranlarını detaylandıran bir gönderisi de var. Nispeten yeni olduğu düşünüldüğünde, bu protokolün benimsenmesi hızla gerçekleşmektedir.

Web Sitelerimizi Değiştirmek Zorunda mıyız?

HTTP/2, HTTP/1.1 ile geriye dönük olarak uyumludur , bu nedenle onu tamamen yok saymak mümkün olacaktır ve her şey eskisi gibi çalışmaya devam edecektir. Protokol değişikliği, kullanıcılar için tamamen şeffaftır. Bu makalenin birçok okuyucusu yıllardır HTTP/1.1 dışında bir protokol kullanıyor olacak. Bir Gmail hesabınız varsa ve ona erişmek için Chrome kullanıyorsanız, SPDY'yi ve ardından HTTP/2'yi bu konuda hiçbir şey bilmeden kullanıyor olacaksınız.

Ancak, en iyi uygulamalar olduğunu düşündüğünüz birçok şey HTTP/2 kapsamında performansa zarar verebilir. Zamanla, daha fazla sunucu HTTP/2 kullanacak şekilde güncellendikçe ve daha fazla kişi HTTP/2'yi destekleyen tarayıcılara sahip oldukça, bir zamanlar en iyi uygulamalara göre iyi optimize edilmiş web siteniz, yeni protokol için optimize edilmiş web sitelerinden daha yavaş görünmeye başlayacaktır.

HTTP/2'yi Kucaklamak İçin Neleri Değiştirmemiz Gerekiyor?

Bu makalenin geri kalanında, HTTP/2 benimsendikçe anti-kalıplara dönüşecek yaygın en iyi uygulamalardan bazılarına bakacağız. Gördüğümüz gibi, geçiş birçok web sitesi için yavaş olacak. HTTP/2'ye geçmek için, sunucu yazılımınızın protokolü destekleyecek şekilde güncellenmesi gerekir - bu, nasıl barındırıldığınıza bağlı olarak kolay veya neredeyse imkansız olabilir.

Web sitenizde özellikle HTTP/2 için değişiklik yapmadan önce, ziyaretçilerinizin onu destekleyen tarayıcılara sahip olup olmadığını da düşünmeniz gerekir. Çok güncel tarayıcılar kullanan çok sayıda insanı çeken web sitelerinin sahipleri, bu geçişi, günlüklerinde kullanıcıların çoğunluğunun eski tarayıcılarda olduğunu gösteren site sahiplerine göre daha erken gerçekleştirebilecekler. Bunu yansıtmak için, size bu geçiş döneminde nasıl çalışacağınıza dair bazı öneriler de vereceğim.

TLS'ye Geçiş Yapın

Pek çok web sitesi için HTTP/2'ye geçmenin en zor yanı HTTP/2 olmayabilir, bunun yerine siteyi güvenli bir bağlantı üzerinden çalıştırma gereksinimi olabilir. Yeni bir site geliştiriyorsanız veya eski bir siteyi güncelliyorsanız, ilk adımınız, mümkün olan en kısa sürede https'yi başlattığınızdan veya https'ye geçtiğinizden emin olmak olmalıdır. Bu sadece HTTP/2 için önemli değil, Google bir sıralama sinyali olarak güvenli bağlantılar kullanıyor ve tarayıcılar https olmayan web sitelerini 'güvenli değil' olarak işaretlemeye başlıyor. Gelecekte, coğrafi konum gibi bazı güçlü HTML5 özelliklerinin güvenli bir bağlantı olmadan kullanılamayacağını göreceksiniz.

Şu anda yalnızca http olan bir siteniz varsa, önerim önce https'ye geçişe öncelik vermek ve ardından HTTP/2 stratejinize karar vermek olacaktır.

Birden Fazla Görüntü Dosyasını Sprite'a Dönüştürme

HTTP 1.1'de, tarayıcı için büyük bir resim almak, küçük resimler için çok sayıda istek yapmaktan çok daha verimlidir. Bunun nedeni, birden çok isteğin arka arkaya sıraya girmesidir. Bu sorunu çözmek için küçük simgelerimizi bir hareketli grafik dosyasına dönüştürmemiz tavsiye edildi.

Ortaya çıkan hareketli grafik, bir HTTP isteğiyle döndürülerek, birden çok isteğin sıraya alınması sorununu önler. Ancak, ziyaretçi bu simgelerden yalnızca birini gösteren bir sayfada olsa bile, o tek resmi görebilmek için gerekenden çok daha büyük bir dosya indirmesi gerekecektir.

HTTP/2'nin çoğullama yeteneği sayesinde , kaynakların bu şekilde sıralanması artık bir sorun olmaktan çıkıyor. Küçük resimleri tek tek sunmak çoğu durumda daha iyi olacaktır; sadece ziyaretçinin bulunduğu sayfa için gerekli olanı sunmanız gerekecek. Bazı durumlarda bir hareketli karakter oluşturmak yine de garanti edilir; HTTP istekleri, performansın yalnızca bir yönüdür. Bazı görüntüleri bir hareketli grafikte birleştirmek, daha iyi sıkıştırma ve dolayısıyla genel olarak daha küçük bir indirme boyutu sağlayabilir, özellikle de bu görüntülerin tümü yüklenen sayfada kullanılıyorsa. Ancak, bir hareketli grafiğin her zaman en iyi seçim olduğu artık söz konusu olmayacak.

Veri URI'lerini Kullanarak Resimleri Satır İçi Oluşturma

HTTP/1.1'deki birden çok HTTP isteği sorunu için başka bir geçici çözüm, veri URI'lerini kullanarak CSS'de satır içi görüntüler oluşturmaktır. Görüntüleri bu şekilde gömmek, stil sayfasını çok daha büyük hale getirecektir. Bunu, varlıkları birleştirmek için başka bir optimizasyon tekniğiyle birleştirdiyseniz, bir ziyaretçi, resimlerin kullanıldığı sayfaları hiç ziyaret etmese bile, büyük olasılıkla bu kodun tamamını indirecektir.

HTTP/2'de HTTP isteklerinin çok ucuz olması nedeniyle, bu "en iyi uygulama" performansa yardımcı olmaktan çok engel olacaktır.

CSS ve JavaScript'i Birleştirme

Oluşturma sürecimizin son adımı olarak, çoğumuz web sitemizde kullanılan tüm küçük CSS ve JavaScript dosyalarını birleştireceğiz. Bu kaynakları yönetmeyi kolaylaştırmak için geliştirme sırasında genellikle bunları ayrı tutmak istiyoruz - ancak tarayıcıya bir dosya teslim etmenin performans için beş dosya teslim etmekten daha verimli olduğunu biliyoruz. Bir kez daha HTTP isteklerini sınırlamaya çalışıyoruz.

Bunu yapıyorsanız, ana sayfanıza gelen bir ziyaretçi, çoğunu hiç kullanmasalar bile web siteniz için gereken tüm CSS ve JavaScript'i indirebilir. Bir geliştirici olarak, web sitesinin her alanı için belirli dosyaları dikkatlice seçip derleme işleminize dahil ederek bu sorunu çözebilirsiniz, ancak bu oldukça fazla iş olabilir.

Birleştirmeyle ilgili ek bir sorun, her şeyin önbellekten bir kerede temizlenmesi gerekmesidir. Kod tabanının sık sık değişen bölümlerine daha kısa bir tarih verirken, uzun bir son kullanma tarihini asla değiştirmeyen bazı dosyalara veremezsiniz. Tek bir sayfada kullanılan CSS'nin bir satırı bile değiştirilirse, hepsinin süresi dolması gerekir.

Bunun nereye gittiğini gördüğünü hayal ediyorum! HTTP istekleri, HTTP/2 dünyasında ucuzdur . Geliştirme sırasında varlıklarınızı kullanılacakları sayfalara göre düzenlemek çok daha iyi olacaktır. Daha sonra yalnızca ziyaretçinin ihtiyaç duyduğu kodu sunabilirsiniz. Çok sayıda küçük stil sayfası indirmek önemli olmayacak. Ayrıca, işlerin ne sıklıkta değiştiğine göre de düzenleyebilirsiniz; uzun ömürlü varlıklara daha uzun süre bakılabilir.

Kaynakları Ana Bilgisayarlar Arasında Bölme: Sharding

HTTP/1.1 ile, açık bağlantı sayısı ile sınırlandırılırsınız. Çok sayıda kaynak yüklemek kaçınılmazsa, bu kısıtlamayı aşmanın bir yolu, onları birden çok etki alanından almaktır. Bu, alan paylaşımı olarak bilinir. Bu, daha iyi yükleme süreleri sağlayabilir, ancak bunu web siteniz için hazırlamanın geliştirme ek yükünden bahsetmiyorum bile, sorunlara neden olabilir.

HTTP/2, ihtiyaç duyduğunuz kadar kaynak isteyebileceğiniz için bu etki alanı paylaşımı ihtiyacını ortadan kaldırır . Aslında, ek TCP bağlantıları oluşturduğu ve HTTP/2'nin kaynaklara öncelik vermesini engellediği için bu teknik muhtemelen performansa zarar verecektir.

HTTP/2'ye Şimdi Nasıl Hazırlanırsınız

Uzun ömürlü olmasını beklediğiniz ancak sunucu desteğinden dolayı HTTP/2'yi başlatamadığınız bir projeye başlıyorsanız, HTTP/2'ye nasıl hazırlanabileceğinizi düşünmeye değer. Şimdi oluşturma işleminize, daha sonra geçişi kolaylaştıracak birkaç şey ekleyebilirsiniz.

Sprite'lara ve Veri URI'lerine Ek Olarak Bireysel Varlıklar Oluşturun

Grafikler oluşturuyorsanız, sürecinize bu bireysel varlıkların oluşturulmasını ve optimizasyonunu da ekleyin veya performansın en iyi şekilde bunlarla geliştirileceğini düşünüyorsanız, sayfaya özel daha küçük hareketli grafikleri ekleyin. Bu, web siteniz için devrilme noktasına ulaşıldığında büyük sprite'lardan küçük (veya hiç) sprite'lara geçmenizi kolaylaştıracaktır.

Aynısı veri URI'leri için de geçerlidir. Bunları şu anda CSS'nizde kullanıyorsanız, bu teknikten vazgeçtiğinizde görüntüleri hazır bulundurun.

Varlıklarınızı Web Sitesi Bölümüne Göre Düzenleyin

CSS ve JavaScript birleştirme ile, dosyaların hepsi bir şekilde bir araya getirileceğinden, geliştirme kolaylığı için optimize etme eğilimi vardır. HTTP/2'ye geçtiğinizde, kaynakları dikkatli bir şekilde yöneterek en iyi performansı elde edersiniz, böylece yalnızca belirli bir sayfanın ihtiyaç duyduğu şeyler o sayfaya iletilir. Bu nedenle, gelişiminizi şimdi bu şekilde düzenlemeye başlamanız işe yarayacaktır. Şimdilik, yine de birleştirme yapabilirsiniz ve devrilme noktasına ulaşıldığında, oluşturma işleminizin bu bölümünü durdurabilir ve kaynakları tek tek sunabilirsiniz.

Etki Alanı Paylaşımını Yönetin

HTTP/1.1 için mevcut en iyi uygulama, parçalamayı iki ana bilgisayar adıyla sınırlamaktır. TLS sertifikası her iki ana bilgisayar için geçerliyse ve ana bilgisayarlar aynı IP'ye çözümleniyorsa, bağlantıları birleştirmek için HTTP/2 almanın bir yolu vardır. Tarayıcı uygulayıcıları HTTP/2'nin HTTPS üzerinden çalışmasını gerektirdiğinden , TLS sertifikasının HTTP/2 üzerinden çalışmasını sağlamak gerekir. Velocity Konferansı'ndan Ilya Grigorik'in slayt gösterisinin 26. slaytında daha fazlasını görün.

Gelmek için daha fazla

Sonunda, HTTP/2 için bir dizi en iyi uygulamayı alacağız. En iyi performans için, bu protokol size birçok kontrolü geri verecektir, bu da her proje için karar vermeniz gerekeceği anlamına gelir. Bu makalede, server push gibi HTTP/2'nin yeni özelliklerinden nasıl yararlanılacağını ele almadım. Bu teknoloji, hangi kaynakların öncelikli olduğuna karar vermenizi sağlar ve sunucuya bunları daha az önemli şeylerden önce dağıtması talimatını verir.

Ne Zaman Geçiş Yapılır?

Dağıtım yaptıkları sunucular üzerinde tam denetime sahip olmayan tasarımcılar ve geliştiriciler için karar, kullandıkları sunucular güncellenene kadar beklemek zorunda kalabilir. Halihazırda HTTP/2 sunan barındırma şirketleri var - hatta paylaşılan barındırma için bile - bu nedenle, bir destekleyici sunucuya dağıtmak, fayda sağlayacaklarını biliyorsanız, bir müşteriye önerebileceğiniz bir şeydir.

Web siteniz HTTP/2'yi destekleyen bir sunucuda barındırıldığında, HTTP/1.1 için optimizasyona devam etme veya HTTP/2 için optimize etme kararı , kullanıcılarınızın çoğunluğu tarafından desteklenen protokole bağlı olacaktır. HTTP/2'nin geriye dönük uyumlu olduğunu unutmayın - belirli bir şey yapmanız gerekmez. Yapmanız gereken karar, bunun için ne zaman optimize edeceğinizdir.

Analitik verilerinize göre karar vermeniz gerekecek. Daha fazla ziyaretçi HTTP/2'yi destekleyen tarayıcıları kullanıyorsa, bu kullanıcılar için optimizasyon yapmak için bunun makul bir devrilme noktası olduğunu öneririm. Birçoğumuz zaten o noktaya ulaşmış olacağız. Kendi analizlerinizden ve olası hedef kitlenizle ilgili bilgilerinizden toplanan verilerle birlikte Can I Use gibi sitelerden alınan verileri kullanmalısınız. Örneğin, HTTP/2'nin faydalarının çoğu, HTTP/2'yi destekleyen mobil cihazları kullananlar tarafından en keskin şekilde hissedilecektir. Yüksek bir mobil trafik yüzdesine sahipseniz, bu, HTTP/2'ye daha erken geçmeniz için bir gösterge olabilir. Bununla birlikte, Opera Mini'yi kullanarak göz atan kullanıcılardan gelen yüksek bir mobil trafik yüzdesine sahipseniz, o zaman bu, HTTP/2'ye geçişi ertelemek için bir neden olacaktır, çünkü şu anda desteği yoktur ve bazılarında çok sayıda kullanıcıya sahiptir. dünyanın parçaları.

Bugün yepyeni bir web sitesi oluşturuyorsanız, yapınız boyunca HTTP/2 optimizasyonunu aklınızda tutmanızı öneririm. Başlatma sırasında, tarayıcı veya sunucu desteği nedeniyle HTTP/1.1 için tavizler vermeniz gerektiğini düşünüyorsanız, bunların çoğu oluşturma sürecinde yapılabilir ve hissettiğiniz anda HTTP/2 sürümüne geçmenize olanak tanır. doğru zaman.

HTTP/2 Eylem Planınız

1. Güvenli bir bağlantıyla başlatın veya şimdi TLS'ye geçin Bu sizin önceliğiniz olmalıdır.
2. Oluşturma işleminizde HTTP/2 için hazırlanın. Şu anda oluşturduğunuz herhangi bir web sitesi, kullanım ömrü boyunca HTTP/2 için optimize edilmekten büyük olasılıkla fayda sağlayacaktır. Her iki protokol için de optimize edilebilecek bir oluşturma işlemi oluşturmak için yukarıdaki ipuçlarını kullanın.
3. İstatistiklerinizi kontrol edin. Web sitenizdeki tarayıcı kullanımını Can I Use'daki destek tablosuyla karşılaştırarak, HTTP/2 optimizasyonundan ziyaretçilerin yüzde kaçının faydalanacağını görebilirsiniz.
4. Hostinginizi kontrol edin. Anahtarlamadan faydalanacağınız noktaya geldiğinizde, sunucunuzun HTTP/2'yi desteklediğinden emin olmanız gerekecektir. Taşıma planlarını öğrenmek için barındırma sağlayıcınızla veya sunucu yöneticinizle görüşün.
5. HTTP/2 optimizasyonunu kullanıma açın. Sunucunuz HTTP/2'yi desteklediğinde gerisi size kalmış. Eski en iyi uygulamaları kullanmayı bırakın ve yenisine geçin. Bu, HTTP/2'yi desteklemeyen tarayıcılara sahip kullanıcıların daha yavaş bir deneyim yaşayacağı anlamına gelir; bu nedenle, değişikliğinizin arkasındaki sürücü, çoğunluğun yararlanacağı devrilme noktası olmalıdır.

HTTP/2'ye geçtiğinizde, hız artışlarını karşılaştırmak ve web sitelerinizde hangi tekniklerin en büyük farkları yarattığını görmek ilginç olacaktır. İnsanlar web sitelerini taşırken gerçek dünyadaki vakalardan bilgi görmeyi dört gözle bekliyorum. Bu bilgi, yepyeni bir en iyi uygulama nesli geliştirmemize yardımcı olacaktır.

Daha fazlasını bul

HTTP/2 hakkında artan miktarda bilgi çevrimiçi olarak mevcuttur. Bu makaleyi yazarken birçoğuna atıfta bulunduğum bazı kaynakları referansınız için burada listeledim.

• “Köprü Metni Aktarım Protokolü Sürüm 2 (HTTP/2)” (şartname), İnternet Mühendisliği Görev Gücü Bu, spesifikasyonları okumaktan hoşlanan veya ince noktaları anlaması gereken kişiler içindir. Diğer herkes için HTTP/2 SSS, ana özelliklerin mükemmel bir özetidir.
• http2 açıkladı , Daniel Sternberg Stratejinizi planlarken protokolün ayrıntılarını araştırmak istiyorsanız bu ücretsiz e-kitap okumaya değer.
• High Performance Browser Networking , Ilya Grigorik, O'Reilly Bu kitap hem HTTP/1.1 en iyi uygulamalarını hem de HTTP/2'yi kapsar. Hem bugün performansını artırmak hem de geleceğe hazırlanmak isteyen herkes için faydalı olacaktır.
• “HTTP/2 Burada, Optimize Edelim” (slideck) Ilya Grigorik Bu mükemmel slayt seti, bu makalede ele alınan bazı noktalar hakkında daha fazla bilgi içermektedir.
• HTTP/2 Göstergesi: Firefox ve Chrome Bu tarayıcı eklentisi, bulunduğunuz web sitesinin HTTP/2 üzerinden sunulup sunulmadığını size söyler.
• Daha fazla okuma için Rebecca Murphey tarafından hazırlanan bu büyük bağlantı listesine bakın.