Ön Uç Performansı 2021: Hızlı Kazançlar

Yayınlanan: 2022-03-10

Kısa özet ↬ 2021'i hızlı yapalım! Metriklerden araçlara ve ön uç tekniklerine kadar, bugün web'de hızlı deneyimler oluşturmak için bilmeniz gereken her şeyi içeren yıllık bir ön uç performans kontrol listesi. 2016'dan beri güncellendi.

İçindekiler

Hazırlanmak: Planlama ve Metrikler
Gerçekçi Hedefler Belirleme
Çevreyi Tanımlamak
Varlık Optimizasyonları
Derleme Optimizasyonları
Teslimat Optimizasyonları
Ağ, HTTP/2, HTTP/3
Test ve İzleme
Hızlı kazanç
Her şey tek sayfada
Kontrol Listesini İndirin (PDF, Apple Pages, MS Word)
Her şey tek sayfada
Kontrol Listesini İndirin (PDF, Apple Pages, MS Word)
Sonraki kılavuzları kaçırmamak için e-posta bültenimize abone olun.

Hızlı kazanç

Bu liste oldukça kapsamlıdır ve tüm optimizasyonların tamamlanması biraz zaman alabilir. Peki, önemli gelişmeler elde etmek için sadece 1 saatiniz olsaydı ne yapardınız? Hepsini 17 düşük sarımlı meyveye kadar kaynatalım. Açıkçası, başlamadan önce ve bitirdikten sonra, 3G ve kablo bağlantısında En Büyük İçerikli Boyama ve Etkileşim Süresi de dahil olmak üzere sonuçları ölçün.

Gerçek dünya deneyimini ölçün ve uygun hedefler belirleyin. En hızlı rakibinizden en az %20 daha hızlı olmayı hedefleyin. En Büyük İçerikli Boyamada kalın < 2.5sn, İlk Giriş Gecikmesi < 100ms, Etkileşim Süresi < 5sn yavaş 3G'de, tekrar ziyaretler için, TTI < 2sn. En azından First Contentful Paint ve Time To Interactive için optimize edin.
Squoosh, mozjpeg, guetzli, pingo ve SVGOMG ile görüntüleri optimize edin ve bir görüntü CDN'si ile AVIF/WebP'yi sunun.
Ana şablonlarınız için kritik CSS hazırlayın ve bunları her şablonun <head> bölümüne satır içine alın. CSS/JS için, maks. 170KB sıkıştırılmış (0.7MB sıkıştırılmış).
Komut dosyalarını kırpın, optimize edin, erteleyin ve tembel yükleyin. Fazlalıkları kaldırmak ve hafif alternatifleri kontrol etmek için paketleyicinizin yapılandırmasına yatırım yapın.
Statik varlıklarınızı her zaman kendi kendine barındırın ve her zaman üçüncü taraf varlıklarını kendi kendine barındırmayı tercih edin. Üçüncü taraf komut dosyalarının etkisini sınırlayın. Cepheleri kullanın, etkileşimde widget'ları yükleyin ve titreme önleyici snippet'lere dikkat edin.
Bir çerçeve seçerken seçici olun. Tek sayfalık uygulamalar için, kritik sayfaları tanımlayın ve bunları statik olarak sunun veya en azından önceden oluşturun ve bileşen düzeyinde aşamalı hidrasyon kullanın ve etkileşimde modülleri içe aktarın.
Yalnızca istemci tarafı oluşturma, performans için iyi bir seçim değildir. Sayfalarınız fazla değişmiyorsa önceden oluşturun ve mümkünse çerçevelerin başlatılmasını erteleyin. Mümkünse, akış sunucusu tarafı oluşturmayı kullanın.
Eski kodu yalnızca <script type="module"> ve modül/nomodule modeline sahip eski tarayıcılara sunun.
CSS kurallarınızı yeniden gruplandırmayı deneyin ve gövde içi CSS'yi test edin.
Daha hızlı dns-lookup , ön preconnect , prerender prefetch , preload ve ön işleme ile teslimatı hızlandırmak için kaynak ipuçları ekleyin.
Web yazı tiplerini alt kümelere ayırın ve bunları eşzamansız olarak yükleyin ve hızlı ilk işleme için CSS'de font-display .
HTTP önbellek üstbilgilerinin ve güvenlik üstbilgilerinin doğru ayarlanıp ayarlanmadığını kontrol edin.
Sunucuda Brotli sıkıştırmasını etkinleştirin. (Bu mümkün değilse, en azından Gzip sıkıştırmasının etkinleştirildiğinden emin olun.)
Sunucunuz Linux çekirdeği sürüm 4.9+ üzerinde çalıştığı sürece TCP BBR tıkanıklığını etkinleştirin.
Mümkünse OCSP zımbalamasını ve IPv6'yı etkinleştirin. Daima bir OCSP zımbalanmış DV sertifikası sunun.
HTTP/2 için HPACK sıkıştırmasını etkinleştirin ve varsa HTTP/3'e geçin.
Yazı tipleri, stiller, JavaScript ve resimler gibi varlıkları bir hizmet çalışanı önbelleğinde önbelleğe alın.

Kontrol Listesini İndirin (PDF, Apple Pages)

Bu kontrol listesini göz önünde bulundurarak, her türlü ön uç performans projesine hazır olmalısınız. Kontrol listesini ihtiyaçlarınıza göre özelleştirmek için kontrol listesinin baskıya hazır PDF'sini ve düzenlenebilir bir Apple Pages belgesini indirmekten çekinmeyin:

Kontrol listesi PDF'sini indirin (PDF, 166 KB)
Apple Pages'deki kontrol listesini indirin (.pages, 275 KB)
Kontrol listesini MS Word'de indirin (.docx, 151 KB)

Alternatiflere ihtiyacınız varsa, Dan Rublic'in ön uç kontrol listesine, Jon Yablonski'nin "Tasarımcının Web Performansı Kontrol Listesi" ve FrontendChecklist'e de göz atabilirsiniz.

Kapalıyız!

Optimizasyonlardan bazıları, çalışmanızın veya bütçenizin kapsamı dışında olabilir veya uğraşmanız gereken eski kod göz önüne alındığında, aşırıya kaçmış olabilir. Bu iyi! Bu kontrol listesini genel (ve umarız kapsamlı) bir rehber olarak kullanın ve bağlamınız için geçerli olan kendi sorun listenizi oluşturun. Ancak en önemlisi, optimizasyondan önce sorunları belirlemek için kendi projelerinizi test edin ve ölçün. 2021'de herkese mutlu performans sonuçları!

İçindekiler

Hazırlanmak: Planlama ve Metrikler
Gerçekçi Hedefler Belirleme
Çevreyi Tanımlamak
Varlık Optimizasyonları
Derleme Optimizasyonları
Teslimat Optimizasyonları
Ağ, HTTP/2, HTTP/3
Test ve İzleme
Hızlı kazanç
Her şey tek sayfada
Kontrol Listesini İndirin (PDF, Apple Pages, MS Word)
Her şey tek sayfada
Kontrol Listesini İndirin (PDF, Apple Pages, MS Word)
Sonraki kılavuzları kaçırmamak için e-posta bültenimize abone olun.

Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard, Patrick'e çok teşekkürler. Hamann, Gideon Pyzer, Andy Davies, Maria Prosvernina, Tim Kadlec, Rey Bango, Matthias Ott, Peter Bowyer, Phil Walton, Mariana Peralta, Pepijn Senders, Mark Nottingham, Jean Pierre Vincent, Philipp Tellis, Ryan Townsend, Ingrid Bergman, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov ve Rodney Rehm'in yanı sıra herkesin kullanması için performans optimizasyonu konusundaki çalışmalarından öğrenilen teknikleri ve dersleri paylaşan fantastik topluluğumuz için. . Gerçekten harikasın!