Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, konuşmacı web sitelerinin açılış sürecini ve critical render path kavramını anlatmaktadır.
- Video, bir web sitesinin nasıl yüklendiğini adım adım açıklamaktadır. Önce HTML dosyası, ardından CSS dosyası ve son olarak font dosyalarının nasıl aktarıldığını göstermektedir. Critical render path kavramı, sitenin açılış süresini etkileyen faktörleri açıklamakta ve bu süreyi kısaltmak için kendi font dosyası kullanma, CSS dosyasını küçültme ve CSS minify araçlarını kullanma gibi çözümler sunmaktadır. Video, CSS minify işleminin nasıl yapıldığını gösteren bir örnekle sonlanmaktadır.
- 00:04Critical Render Path Nedir?
- Critical render path, bir web sitesinin açılış sürecinde tarayıcı tarafından sunucudan alınan dosyaların sıralamasını ifade eder.
- Tarayıcı önce HTML dosyasını alır, ardından CSS dosyasını ve son olarak font dosyasını alır.
- Font dosyası varsa, tarayıcı CSS dosyasını aldığında siteyi yüklemiyor, fontun da gelmesini bekliyor.
- 02:23Critical Render Path'in Etkileri
- Font dosyası varsa, sitenin açılış sürecinde ekstra bir işlem daha eklenir ve site bir-iki saniye daha geç açılabilir.
- Sitelerin geç yüklenme ve yanıt vermeme nedenleri, critical render path ile anlaşılabilir.
- CSS dosyası alındığında site yüklenmez, fontun da gelmesini bekler çünkü yazılar bu font dosyalarına bağlıdır.
- 03:20Critical Render Path'i Hızlandırma Yöntemleri
- Kendi font dosyamızı kullanarak Google sunucularından çağırmak yerine, sitemizin açılış sürecini hızlandırabiliriz.
- CSS dosyasını daha küçük hale getirerek sitemizin açılış hızını artırabiliriz.
- CSS minify, CSS dosyasını küçültmek için kullanılan bir yöntemdir; satır boşluklarını ve CSS öğesi olmayan yorumları kaldırarak dosya boyutundan tasarruf sağlar.