Web sayfası performans optimizasyonu

Bu makaleyi dinle

Web siteleri genellikle iki bölüme ayrılır: ön uç ve arka uç. Arka planın, web sitesinin kullanıcı kaydı gerçekleştirme, şifre değiştirme, makalelere yorum yapma vb. işlevlerini gerçekleştirmek için kullanıldığını anlayabiliriz. Peki ya ön uç? Aslında, bir performans fonksiyonu olmalıdır. Kullanıcının erişilebilirliğini etkileyen faktörlerin çoğu, sitenin dış sayfalarının optimizasyonu ile ilgilidir. sayfa optimizasyonu – bu makale, bu sürece genel bir bakış sunacaktır.

Makalenin içeriği:

• 1. Sayfa yükleme süresini optimize etme
• 2. Tüm sıkıştırılabilir kaynakları sıkıştırın
• 3. Site Önbelleği Optimizasyonu
• 4. Kritik Oluşturma Yolu

1. Sayfa yükleme süresini optimize etme

Daha İyi Sayfa Optimizasyonu - bu, kaynakların hiç yüklenmediği zamandır. Bu nedenle, indirilen gereksiz kaynakların sayısını en aza indirmeye çalışın.

1. Sitenizin bazı bağımlılıklarının gerekli olup olmadığını değerlendirin ve artıları ve eksileri tartın.
2. Bağımlı yükleme yolu güvenilir mi ve kullanılamadığında tüm sayfayı engelleyecek mi?

2. Tüm sıkıştırılabilir kaynakları sıkıştırın

1. Kodun tamamı sıkıştırılmış olmalıdır.
2. İstenmeyen resimleri silin.
3. Resimler yerine css3 kullanın.
4. Daha yüksek sıkıştırma oranına sahip resimler kullanın. Özellikle GIF'ler, bazı video formatları (H.264 veya WebM) GIF'lerden çok daha küçüktür.
5. Resimleri değil, WordArt yazı tiplerini kullanın.
6. Daha yeni tarayıcılara sahip kullanıcılar için daha modern resim formatları sağlayın (örneğin: WebP).
7. Farklı sayfa boyutları için çoklu çözünürlüğe sahip bit eşlemler.
8. Görüntü için bir genişlik ve yükseklik belirleyin, aksi takdirde kırpma meydana gelebilir.
9. HTTP/2'yi kullanın. Örneğin, hareketli grafik, birçok küçük resimden oluşan büyük bir resimdir ve HTTP isteklerinin sayısını azaltabilir. Ancak önbelleğe almak zordur ve küçük görüntünün değiştirilmesi tüm küçük görüntülerin önbelleğini geçersiz kılar. HTTP/2, bir bağlantıdan birden çok istek başlatılabilir, bu da sprite ihtiyacını ortadan kaldırır.

3. Web sitesi önbellek optimizasyonu

Tarayıcı önbelleğe alma mekanizması:

1. Sayfayı ziyaret edin, çeşitli kaynaklar isteyin ve tarayıcı yerel bir önbellek olup olmadığını kontrol eder.
2. Öyleyse, kaynağın süresinin dolup dolmadığını kontrol edin. Süresi dolmadı, doğrudan önbelleği kullanın. Süresi dolduğunda, sunucuya bir istek yapılır.
3. Etag ve son değiştirilen başlık alanları, gönderilen isteğe dahil edilecektir.
4. Sunucu, tarayıcı tarafından önbelleğe alınan kaynağın kullanılabilir olup olmadığını belirlemek için Etag'i ve son değiştirileni kullanır.
5. Kaynak hala geçerliyse, tarayıcıya önbelleği kullanmasını söylemek için bir 304 yanıt kodu döndürün. Aksi takdirde, güncellenen kaynağı döndürün.

Bu mantığa göre web sitenizin önbelleğini planlayabilirsiniz.

Kaynağın süresi erken dolarsa tarayıcıyı kaynağı güncellemesi için nasıl bilgilendirebilirim?

Bu genellikle mümkün değildir çünkü tarayıcı kaynağın süresinin dolmadığını görür ve hiç istekte bulunmaz. Ancak bu, kaynağın URL'sini değiştirerek elde edilebilir. Bu nedenle, kaynağın dosya adına bir sürüm numarası veya rastgele bir etiket eklemeniz gerekir. Örneğin style.12.css. Yani, tarayıcının html dosyasını önbelleğe almasına izin vermeyin, aksi takdirde tarayıcı, süresi dolana kadar sunucuyu sorgulamaz.

4. Kritik Oluşturma Yolu

Tarayıcı, web sayfasını aşağıdaki adımlarla görüntüler:

1. HTML işaretlemesini işleyin ve DOM ağacını oluşturun.
2. CSS işaretlemesini işleyin ve CSSOM ağacını oluşturun.
3. DOM ve CSSOM'u bir oluşturma ağacında birleştirin.
4. Her düğümün geometri bilgilerini hesaplamak için işleme ağacına göre düzen.
5. Ekranda her düğümü çizin.

Kritik işleme yolunun optimize edilmesi, web sayfasının mümkün olan en kısa sürede işlenebilmesi için işleme sürecinin optimize edilmesi anlamına gelir.

css

CSS dosyaları oluşturmayı engeller. Tarayıcı DOM ağacını oluşturduktan sonra, CSSOM ağacının tamamlanmasını beklemelidir. Standart olmayan CSS'yi önlemek ve tarayıcının mümkün olan en kısa sürede CSS dosyasını istemesini sağlamak için belgenin üst kısmındaki bir etiket.

css dosyalarında @import kullanmaktan kaçının çünkü tarayıcı içe aktarılan css'yi yalnızca içe aktarmayı içeren dosya yüklenip derlendikten sonra bulup yükleyecektir. Ek istekler gerektirmeyen ve ana içeriğin oluşturulmasını engellemeyen satır içi CSS kullanmayı düşünün.

js

Java betiği, CSSOM oluşturulana kadar yürütülmeye başlamayacak. js ayrıca DOM ağacının oluşturulmasını da engeller. Eşzamansız etikette işaretlenmemişse.

Artık sayfa optimizasyonunun ne olduğunu ve nasıl oluşturulduğunu anlayacaksınız. Bu süreçleri anlamak, sitenizin sayfalarını hızlı bir şekilde optimize etmenize, istekleri azaltmanıza ve yüklemeyi hızlandırmanıza yardımcı olacaktır.

Bu makaleyi okumak:

• CSS Optimizasyonu - Web Sitenizi Hızlandırmanın 21 Yolu
• Çevrimiçi JS ve CSS site kodunu optimize etme - ayrıntılı bir kılavuz

Okuduğunuz için teşekkürler: SEO YARDIMI | NICOLA.ÜST