Render engelleme nedir?

  • Oluşturma, yükleme anlamına gelir; bu nedenle, bir şey oluşturma engelleme yapıyorsa, sayfanın olabildiğince çabuk yüklenmesini engellediği anlamına gelir.

Not: Bu makale, css engelleme css (tamamen farklı bir şey) render değil, render engelleme javascript hakkındadır .

Javascript’i engelle

Google , web sayfalarınızın ekranın üst kısmındaki içeriğinin yüklenmesini engelleyen javascriptsleri kaldırmanızı veya ertelemenizi 1 önerir .

Ekranın üst kısmında, kullanıcının başlangıçta ekranlarında gördüğü anlamına gelir . Bu ekran bir telefon, ipad, masaüstü veya kullanıcının web sayfanızı görmek için kullandığı her şey olabilir.

ekranın üstünde ve altında

Bu uygulama uzun zamandır sayfa hızına giren insanlar tarafından kullanılmaktadır, ancak web yöneticilerinin ve tasarımcılarının büyük çoğunluğu için yenidir ve biraz kafa karıştırıcı olabilir ve hatta imkansız gibi görünebilir.

Sadece mümkün değil, aynı zamanda iyi bir web vatandaşı olmak da gereklidir ve yavaş bağlantıları olan kullanıcıları önemsemeseniz bile, Google’daki sıralamanızı önemsersiniz. Bunu optimize etmezseniz Google’daki sıralamanız risk altındadır. Özellikle, Google web sayfanızın belirli cihazlar (telefonlar, ipad’ler vb.) İçin iyi yüklenmediğini görürse, sizi kullanıcılara yavaş sayfalara veya kullanıcıya neden olan sayfalara göndermek istemediği için sizi sonuçlara dahil etmezler içerik için çok uzun süre beklemek.

Oluşturma engelleme javascripts nasıl belirlenir

Sayfanızın ne yüklediğini bilmeniz gerekir. Bunu yapmanın birkaç yolu vardır. Sayfanızın veya temanızın karşılaştığı sorunlara genel bir bakış için sayfa hızı aracımızla sayfanızın ne yüklediğine bakmanızı öneririz . Şu anda oluşturmayı engelleyen belirli dosyaları almak için Google sayfa hızı analizleri aracını kullanmanız gerekir . Bu araç, belirli bir sayfayı engelleyen dosyaların tamlarını size bildirir.

Oluşturma engelleme javascripts nasıl kaldırılır

En yaygın suçlu javascript ve bunun için harika bir örnek, web sayfalarının büyük bir yüzdesi üzerinde kullanılan bir javascript dosyası olan jQuery’dir. Büyük olasılıkla kullanıyorsunuz (varsa aracımızla öğrenin).
Bu javascript dosyası oldukça büyük, aslında sayfanızı oluşturmak için web sayfanızın yüklediği en büyük dosya olabilir.

jQuery popüler bir javascript dosyasıdır ve genellikle görüntünün içine veya dışına solma gibi çok az şey yapmak için kullanılır. Web sayfanızı yüklemeden önce jQuery’yi yüklemek için genellikle bir neden yoktur, ancak sayfaların büyük çoğunluğu bunu yapar.

Eğer jQuery kullandığınız şey ekranın altındaysa , gerekmeden önce yüklemeniz için bir neden yoktur . Daha önce yüklüyorsanız, bu sayfa hızı kılavuzunu izlemiyorsunuz ve kullanıcılarınızı bekletiyorsunuz.

Bunu düzeltmek için jQuery çağrısının yapıldığı yeri değiştirmeniz gerekir. Bu, web sayfanızın html’sinde yapılır. Çoğu web sitesinin şu anda jQuery’yi arama şekli, aşağıda gösterildiği gibi belgenin başındadır.

<head>
<meta name = description content = "burada açıklama." />
<title> burada başlık </title>
<style>
stiller burada
</style>
<script src = "jquery.js">
</script>
< / head>

Bu jQuery çağrısı (oldukça büyük bir dosya) yapılır ve sayfada başka bir şey gösterilmeden önce tarayıcı tarafından indirilmesi gerekir . Bu kötü. Eğer jQuery kullandığınız şey yukarıdaki resimde gösterildiği gibi katlama içeriği için bile gerekli değilse bu gerçekten kötüdür.

Sık kullanılan kısmi bir çözüm

Genellikle jQuery çağrısı belgenin başından kaldırılır ve o zamana kadar gerekmediği için sayfanın altında başka bir yere taşınır. Ne yazık ki bu yeterli değil.

<! - jquery'ye ihtiyacınız olmayan şeyler (sayfanızın çoğu) burada ->
<script src = "jquery.js">
</script>
<! - jQuery'ye ihtiyacınız olan şey burada ->

Gerçek çözüm

Javascript’i oluşturma yolundan tamamen kaldırmak için, sayfa yüklenene kadar ertelenmesi gerekir. Javascript’i tamamen ortadan kaldıran Google tarafından önerilen çözümü kullanarak bunun için bir öğreticim var .

Bunu iyi izlemek için sayfanızın ne yüklediğini ve neden yüklediğini bilmeniz gerekir

Web sayfanızın yaptığı her şey kullanıcılarınıza daha fazla zaman ayırır. Web sayfanızın hangi istekleri yaptığını bilmiyorsanız, bilmeye başlamanız gerekir. jQuery iyi bir örnektir, çünkü çok yaygındır ve böyle büyük bir dosya (yaklaşık 100kb). Tüm ortak bir senaryoda, sayfadaki bazı sözcüklerde solma gibi sıradan bir görev yapmak için sadece 10 kb olan küçük bir web sayfasının jQuery gibi büyük bir dosyayı (web sayfasının kendisinden on kat daha büyük) çağırmasıdır. “Hey bu harika görünüyor!” gördüğünüzde, ancak kullanıcı sayfanızı görmek için on kat daha fazla beklemesini sağlayacak kadar havalı mı? aynı etki CSS veya daha küçük javascript ile de olabilir.

Örnek olarak jQuery kullandım ama kötü olduğunu söylemiyorum. Aynı şeyler Google analitiği gibi yaygın javascripts veya widget’ları veya hatta insanların çok sevdiği sosyal Facebook, Twitter düğmelerini gösteren bazı üçüncü taraf javascripts için de söylenebilir.