Yapabileceğiniz en iyi şey, gereksiz kaynak indirmelerini ortadan kaldırmanın sayfa yükleme hızını artırmak için optimizasyon yaparak genel indirme boyutunu ve kalan kaynaklar sıkıştırılır.
Veri sıkıştırmaya giriş
Kullanılmayan kaynakların indirilmesini önlemek için web sitenizi ayarladıktan sonra, Sonraki adım, tarayıcının sahip olduğu kalan uygun kaynakları dokunun. Kaynak türüne bağlı olarak (metin, resim, yazı tipi vb.) kullanabileceğiniz genel araçlar arasından seçim yapabilirsiniz. etkin, belirli içerik için ön işleme optimizasyonları ve kaynaktan girdi gerektiren kaynağa özgü optimizasyonları, geliştiriciyim.
En iyi performansı sağlamak için aşağıdakilerin tümünün birleştirilmesi gerekir: teknikler:
- Daha az bit kullanarak bilgiyi kodlama işlemine sıkıştırma denir.
- Gereksiz verilerin ortadan kaldırılması her zaman en iyi sonuçları verir.
- Birçok farklı sıkıştırma tekniği ve algoritması bulunmaktadır.
- En iyi sıkıştırmayı elde etmek için çeşitli tekniklere ihtiyacınız olacaktır.
Veri boyutunu küçültme işlemi veri sıkıştırmadır. Birçok kişi sıkıştırmayı iyileştirmek için katkıda bulunulan algoritmalar, teknikler ve optimizasyonlar oranları, sıkıştırma hızı ve çeşitli sıkıştırma işlemleri için gereken bellek kullanır.
Veri sıkıştırma hakkında ayrıntılı bilgi bu kılavuzun kapsamının çok dışındadır. Bununla birlikte, sıkıştırmanın nasıl çalıştığını genel hatlarıyla anlamak önemlidir. kullanarak sayfalarınızdaki çeşitli öğelerin boyutunu küçültmek için gerekir.
Bu tekniklerin temel ilkelerini göstermek için yalnızca bu örnek için icat edilen basit bir kısa mesaj biçimini optimize etme:
# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
- Mesajlarda rastgele ek açıklamalar yer alabilir. Buna bazen ek açıklamalar da denir. yorumlar ("#" ile gösterilir) ön eki ile değiştirebilirsiniz. Ek açıklamalar etkilenmez mesajın anlamını veya davranışlarını anlamanıza yardımcı olur.
- İletiler, üstbilgiler içerebilir. Bunlar,
":") gösterilir. - Mesajlarda metin yükü bulunur.
Şundan itibaren başlayan önceki mesajın boyutunu küçültmek için ne yapılabilir? 200 karakter mi?
- Yorum ilgi çekici olsa da mesajın anlamını etkilemiyor. Mesajı iletirken içeriği kaldırabilirsiniz.
- Başlıkları verimli bir şekilde kodlamak için başarılı teknikler vardır. Örneğin, tüm iletilerin "format" olarak belirtilmiş ve "tarih", CANNOT TRANSLATE bunları kısa tam sayı kimliklerine dönüştürüp göndermeniz yeterlidir. Ancak bu, Bu yüzden, şimdilik en iyisi fikrinizi kaybetmemektir.
- Yük yalnızca metindir. İçeriğin aslında ne olduğunu bilmesek de
(görünür bir
"secret-cipher"kullanıyor) yalnızca metne bakıp çok fazla gereksizlik olduğunu gösteriyor. Göndermek yerine, tekrarlayan harflerin sayısını ve tekrar eden harf sayısını kodlayabilirsiniz. Örneğin,"AAA""3A"haline gelir. Bu da üç A'dan oluşan bir diziyi temsil eder.
Bu tekniklerin birleştirilmesiyle aşağıdaki sonucu elde edersiniz:
format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A
Yeni mesaj 56 karakter uzunluğundadır; diğer bir deyişle, oranı %72'dir. Bu önemli bir azalma demektir.
Bu, sıkıştırma algoritmalarının çeşitli durumlarda Metin tabanlı kaynakların aktarım boyutunu azaltarak. Pratikte, sıkıştırma algoritmalar önceki örnekte gösterilenden çok daha karmaşıktır ve web'de indirme sayısını önemli ölçüde azaltmak için sıkıştırma algoritmaları daha fazla bilgi edindiniz. Metin tabanlı öğelere sıkıştırma uygulandığında web sayfası Böylece kullanıcılar kaynakları yükleme konusunda daha az zaman harcayabilir, böylece kullanıcılar bu kaynaklara daha erken varabilir.
Küçültme: ön işleme ve bağlama özgü optimizasyonlar
Burada açıklanan ilk teknik küçültme'dir. Küçültme henüz bir sıkıştırma algoritması olduğundan, gereksiz ve ağırsız öğeleri kaldırmanın bir yoludur. kaynakların daha okunabilir hale gelmesi için kaynak kodda gereksiz karakterler kullanılıyor birlikte çalışır. Ancak bu okunabilirlik, işlevselliği korumak için gerekli değildir. üretim web sitelerinde o kaynak koduna sahip olduğunu ve web'deki kaynaklar.
Küçültme, bir web sitesini ziyaret eden kullanıcı sayısını teslim edilen kaynakların boyutunu küçültür ve en iyi uygulama olarak kullanıma sunuyoruz. Örneğin, paketleyiciler bir kaynakları otomatik olarak küçültebilen yaygın kullanılan yazılım türüdür. önceki kontrollerden de farklıdır.
Gereksiz veya gereksiz verileri sıkıştırmanın en iyi yolu bunları ortadan kaldırmaktır. Ancak rastgele verileri silemezsiniz. Ancak bazı bağlamlarda, veri biçimi ve özellikleri hakkında içeriğe özgü bilgiye sahipseniz, etkisini etkilemeden yük boyutunu önemli ölçüde azaltmayı veya kapasiteleri belirlemenize yardımcı olur.
<html>
<head>
<style>
/* awesome-container is only used on the landing page */
.awesome-container {
font-size: 120%;
}
.awesome-container {
width: 50%;
}
</style>
</head>
<body>
<!-- awesome container content: START -->
<div>
This is my awesome container, and it is <em>so</em> awesome.
</div>
<!-- awesome container content: END -->
<script>
awesomeAnalytics(); // Beacon conversion metrics
</script>
</body>
</html>
Önceki HTML snippet'ini ve içerdiği üç farklı içerik türünü göz önünde bulundurun. şunu içerir:
- HTML işaretlemesi.
- CSS'yi kullanabilirsiniz.
- Etkileşimleri ve diğer gelişmiş sayfa özelliklerini destekleyen JavaScript.
Bu içerik türlerinin her biri, içeriklerin geçerli olması için farklı kurallara sahiptir. içerikleri, yorumları belirlemeye ilişkin farklı kurallar vb. içerir. Soru sorusunun cevabı ise "bu sayfanın boyutu nasıl küçültülebilir?" sorusudur.
- Kod yorumları, geliştiricinin en iyi dostudur. Ancak tarayıcı,
! CSS (
/* ... */), HTML (<!-- ... -->) ve JavaScript'i çıkarma (// ...) yorum, sayfanın ve sayfanın toplam aktarım boyutunu küçültür alt kaynaklar - Bir "akıllı" CSS sıkıştırıcısı, Web Yöneticisi Araçları'nda verimsiz bir yöntem
.awesome-containeriçin kurallar tanımlayın ve iki bildirimi daraltın Böylece diğer stilleri etkilemeden tek bir öğe oluşturabilir ve daha fazla bayt tasarrufu yapabilirsiniz. Büyük Bu tür gereksizlikleri kaldırmak işe yarayabilir. Ancak daha sonra Çünkü seçiciler çoğu zaman çok daha fazla her zaman farklı bağlamlarda (örneğin, medya sorguları) yinelenmesi gerekir. - Alanlar ve sekmeler; HTML, CSS ve JavaScript'teki geliştiricilerin sağladığı kolaylıklardır. Ek bir kompresör tüm sekmeleri ve boşlukları kaldırabilir. Diğerlerinin aksine bu tür optimizasyon kolayca uygulanabilir. ve sayfanın içeriği için bu tür boşluk veya sekmelere gerek olmadığı müddetçe bir sunum oluşturun, örneğin yayının bitmediği dönemdeki alanları korumak metin, ekran okuma esnasında kullanıcıların gördüğü içeriğin okunabilirliğini göreceğiz.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>
Önceki adımları uyguladıktan sonra, sayfa 516'dan 204'e iner. Bu sayı, yaklaşık %60'lık bir tasarruf anlamına gelir. Okunabilir değil ama olması gerekmez. Modern kalkınma uygulamalarının da kaynak kodunuzun iyi biçimlendirilmiş ve okunabilir sürümlerini korumanızı sağlar. iyi optimize edilmiş kodlardan daha yüksek olarak ayarlanmış. Şununla birleştirildi: kaynak haritaları: Dönüştürülen içeriğinizin okunabilir bir temsilini üretim kodu, üretimdeki hataları daha kolay gidermenizi sağlar. aynı zamanda hem iyi bir geliştirici deneyimine sahip olmak en önemli noktalarına değindiniz.
Yukarıdaki örnek önemli bir noktayı gösteriyor: kompresör (diyelim ki rastgele metinleri sıkıştırmak için tasarlanmış bir cihaz) oldukça iyi performans bir önceki örnekte sayfayı sıkıştırma işidir, ancak bunu yorumları çıkarır, CSS kurallarını daraltabilir veya içeriğe özgü onlarca başka optimize edebilirsiniz. Bu nedenle ön işleme, küçültme ve bağlama duyarlı diğer çok önemlidir.
Benzer şekilde, yukarıda açıklanan teknikler yalnızca metin tabanlı olmanın ötesine de uygulanabilir öğeler. Resimler, videolar ve diğer içerik türlerinin her biri kendine özgü meta verileri ve çeşitli yükleri içerir. Örneğin, bir fotoğraf çekerek olduğundan, bu dosyada genellikle birçok ekstra bilgi yer alır: kamera ayarları, ayarlayabilirsiniz. Uygulamanıza bağlı olarak bu veriler kritik olabilir (örneğin, bir fotoğraf paylaşımı sitesi) yoksa tamamen işe yaramayabilir. Siz kaldırmanın değip değmeyeceğine karar vermelisiniz. Pratikte bu meta veriler, boyutu onlarca kilobayta kadar çıkabilir.
Kısacası, öğelerinizin verimliliğini optimize etmenin ilk adımı olarak, yüksek kaliteli emin olmak ve ne tür içeriklerin boyutunu küçültmek için uygulayabileceğiniz içeriğe özel optimizasyonlar yapabilirsiniz. Sonra belirledikten sonra, bu optimizasyonları kontrol etmek için değişikliklerinizin uygulanmasını sağlamak için, oluşturma tutarlı bir şekilde tanıtacağız.
Sıkıştırma algoritmalarıyla metin sıkıştırma
Metin tabanlı öğelerin boyutunu küçültmenin bir sonraki adımı, algoritmasını kullanabilirsiniz. Bu, agresif bir yaklaşımla bir adım daha ileri gidiyor. önce metin tabanlı yüklerde tekrarlanabilir kalıplar arar. kullanıcının tarayıcısına vardığında sıkıştırılmış verileri açmalıdır. İlgili içeriği oluşturmak için kullanılan Bu da söz konusu kaynakların daha da ve daha da önemli ölçüde azalmasını sağlar. daha hızlı indirmenizi sağlar.
- gzip ve Brotli, yaygın olarak kullanılan sıkıştırma algoritmalarıdır ve metin tabanlı öğeler: CSS, JavaScript, HTML.
- Tüm modern tarayıcılar gzip ve Brotli sıkıştırmasını destekler ve
Accept-EncodingHTTP istek başlığında her ikisi için de destek sunar. - Sunucunuz sıkıştırmayı etkinleştirecek şekilde yapılandırılmalıdır. Web sunucusu yazılımı genellikle modüllerin metin tabanlı kaynakları varsayılan olarak sıkıştırmasını sağlar.
- Sıkıştırma oranlarını iyileştirmek için hem gzip hem de Brotli'de hassas ayarlar yapılabilir. ayarlamaktır. gzip için sıkıştırma ayarları 1 - 9 arasında, 9 ise en iyi anlamına gelir. Brotli için bu aralık 0 ila 11'dir ve 11'dir. en iyisi olmak. Ancak, daha yüksek sıkıştırma ayarları daha fazla zaman gerektirir. Örneğin, dinamik olarak sıkıştırılmış (yani aralığın ortasındaki ayarlar, en iyi dengeyi sunma eğilimindedir. hız arasındaki farkları inceleyelim. Ancak statik sıkıştırma yanıt önceden sıkıştırılırsa ve bu işlem önceden sıkıştırıldığında, Bu nedenle, her bir sürüm için mevcut olan en agresif sıkıştırma algoritmasını kullanabilirsiniz.
- İçerik Yayınlama Ağları (CDN) genellikle otomatik sıkıştırma uygun kaynakları içerir. CDN'ler ayrıca aşağıdakiler için dinamik ve statik sıkıştırmayı yönetebilir: Böylece, daha az sıkıştırma sorunu yaşayabilirsiniz.
gzip ve Brotli, her akışa uygulanabilen yaygın sıkıştırıcılardır bayt olarak kabul edilir. İşin mutfağında, daha önce incelediği içeriğin bir kısmını hatırlarlar. ve ardından da Google Drive'daki yinelenen veri parçalarını bulmaya ve çalışabilirsiniz.
Pratikte hem gzip hem de Brotli, metin tabanlı içeriklerde en iyi performansı gösterir. için% 70-90'a kadar yüksek sıkıştırma oranları sağlar. Ancak bu gibi alternatif algoritmalar kullanılarak sıkıştırılmış olan algoritma varlıklarını kullanarak kayıpsız veya kayıplı sıkıştırma teknikleri kullanan çoğu resim biçiminde veya hiç iyileştirmediğini görebilirsiniz.
Tüm modern tarayıcılar
Accept-Encoding HTTP istek başlığı. Ancak, barındırma sağlayıcısının
web sunucusunun doğru şekilde yapılandırıldığından emin olmak, yalnızca
Sıkıştırılmış kaynakta yer alır.
| Dosya | Algoritma | Sıkıştırılmamış boyut | Sıkıştırılmış boyut | Sıkıştırma oranı |
|---|---|---|---|---|
| açısal-1.8.3.js | Brotli Dili | 1.346 KiB | 256 KiB | %81 |
| açısal-1.8.3.js | gzip | 1.346 KiB | 329 KiB | %76 |
| açısal-1.8.3.min.js | Brotli Dili | 173 KiB | 53 KiB | %69 |
| açısal-1.8.3.min.js | gzip | 173 KiB | 60 KiB | %65 |
| jquery-3.7.1.js | Brotli Dili | 302 KiB | 69 KiB | %77 |
| jquery-3.7.1.js | gzip | 302 KiB | 83 KiB | %73 |
| jquery-3.7.1.min.js | Brotli Dili | 85 KiB | 27 KiB | %68 |
| jquery-3.7.1.min.js | gzip | 85 KiB | 30 KiB | %65 |
| lodash-4.17.21.js | Brotli Dili | 531 KiB | 73 KiB | %86 |
| lodash-4.17.21.js | gzip | 531 KiB | 94 KiB | %82 |
| lodash-4.17.21.min.js | Brotli Dili | 71 KiB | 23 KiB | %68 |
| lodash-4.17.21.min.js | gzip | 71 KiB | 25 KiB | %65 |
Yukarıdaki tabloda, hem Brotli hem gzip sıkıştırmanın sağlayabileceği tasarruflar bilinen birkaç JavaScript kitaplığı sağlar. Tasarruf oranı% 65 ile arasında %86'dır. Referans olarak, maksimum hem Brotli hem de gzip için her dosyaya bir sıkıştırma düzeyi uygulanmıştır. Her yerde gzip yerine Brotli'yi tercih edin.
Sıkıştırmanın etkinleştirilmesi, sıkıştırmayı etkinleştirmenin en basit ve en etkili yardımcı olur. Web siteniz bu özellikten yararlanmıyorsa kullanıcılarınızın performansını artırmak için büyük bir fırsattır. Neyse ki web'deki birçok sunucular, bu önemli optimizasyonu etkinleştiren varsayılan yapılandırmalar sağlar. çok etkili olduğunu gördük. ve sıkıştırma hızını dengeler.
Sıkıştırma işleminin çalıştığını görmenin hızlı bir yolu, Chrome Geliştirici Araçları'nı açıp Ağ paneline giderek, seçtiğiniz bir sayfayı yükleyin ve ağ paneline gidin.
Önceki resimde olduğu gibi, aşağıdakilerin bir dökümünü göreceksiniz:
- İsteklerin sayısı (bu sayı için yüklenen kaynak sayısı) sayfasını ziyaret edin.
- Tüm isteklerin aktarım boyutu. Bu, projenizin etkisini bir sayfanın kaynaklarından herhangi birine uygulanan sıkıştırma işlemidir.
- Tüm isteklerin kaynak boyutu. Bu, bir projeyi başlatmak için gereken kaynakların sayfa, sıkıştırma açıldıktan sonra gösterilir.
Core Web Vitals üzerindeki etkiler
Yansıtılan metrikleri yansıtan metrikler olmadığı sürece performans iyileştirmeleri ölçülemez bahsedeceğiz. Core Web Vitals girişimini Gerçek kullanıcı deneyimini yansıtan metrikler oluşturup bu metriklerle ilgili farkındalığı artırmak. Bu metrik, örneğin basit sayfa yükleme süresi gibi kullanıcı deneyimi kalitesini açık bir şekilde yansıtmaz.
Bu kılavuzda açıklanan optimizasyonları web sitelerinin Core Web Vitals üzerindeki etkileri kaynaklara göre değişiklik gösterebilir. optimize edilmiş olması gerekir. Ancak burada, şu optimizasyonları uygulayarak web sitenizin Core Web Vitals performansını iyileştirebilirsiniz:
- Küçültülmüş ve sıkıştırılan HTML kaynakları, dosyanın yüklenmesini iyileştirebilir
keşfedilebilir hale getirmek ve böylece
daha iyi olur. Bu, bir sayfanın Largest Contentful Paint
(LCP) ekleyin.
rel="preload"gibi kaynak ipuçları, bulunabilirliği ile ilgili olabilir; çok fazla sayıda kaynak kullanılması, bant genişliği çakışması. Gezinme isteği için HTML yanıtının sağlanmasıyla bir dosya sıkıştırıldığında, içlerindeki kaynaklar mümkün olan en kısa sürede keşfedilebilir. önceden yükleme tarayıcısı ile. - Ayrıca bazı LCP adayları, sıkıştırma kullanılarak daha erken yüklenebilir. Örneğin, örneğin, LCP adayları olan SVG resimlerinin kaynak yüküne sahip olabilir. Süre kısaltılır. Bu, şundan farklıdır: yaptığınız optimizasyonlara örnek olarak verilebilir. diğer sıkıştırma yöntemleriyle kendiliğinden sıkıştırılır (örneğin, JPEG resimler kayıplı sıkıştırma kullanır.
- Buna ek olarak, metin düğümleri LCP adayları da olabilir. Teknikler bir web yazı tipi kullanıp kullanmadığınıza bağlı olarak, bu kılavuzdaki Google'a gönderir. Bir web yazı tipi kullanıyorsanız en iyisi web yazı tipi optimizasyonu geçerlidir. Ancak, web yazı tiplerini kullanmıyor sistem yerine kaynak yükleme süresi gerektirmeden görüntülenen yazı tipleri. CSS'nizi sıkıştırmak bu süreyi kısaltır. Bu da, sayfanızın potansiyel LCP metin düğümleri daha erken oluşabilir.
Sonuç
Metin tabanlı öğelerin kodlamasını ve aktarılmasını nasıl optimize ettiğiniz bir temel çizgisidir. kavraması olsa da büyük etkisi olan bir kavramdır. Şunları yaptığınızdan emin olun: sadeleştirmeye uygun kaynakların verimli bir şekilde kullanılmasını sağlamak için bu optimizasyonlardan yararlandığını görebilirsiniz.
Daha da önemlisi, bu süreçlerin otomatik hale getirildiğinden emin olun. Örneğin, bir paketleyici kullanarak uygun kaynaklara küçültme uygulamasını sağlayabilirsiniz. Emin olun web sunucusu yapılandırmanızın sıkıştırmayı desteklediğini ancak bundan daha da kullanılabilecek en etkili sıkıştırmayı seçebilirsiniz. Bunu mümkün olduğunca önemsiz hale getirmek için CDN'leri kullanarak, sıkıştırmayı otomatik hale getirmekle kalmaz, ancak bunu çok hızlı bir şekilde yapabilirler.
Bu temel performans kavramlarını web sitenizin varsa, performans optimizasyonu çalışmalarınızın tutarlı bir sonraki optimizasyonların sağlam bir temele dayanmasını sağlayabilirsiniz. göz önünde bulundurmalısınız.