Google’dan Martin Splitt, web sayfası oluşturma ve bunun SEO’yu nasıl etkilediği hakkında bir Duda Web Seminerine katıldı. Oluşturma, bir tarayıcı bir web sayfası istediğinde olan şeydir, Core Web Vitals puanlarının önemli bir parçasıdır . Bunu anlamak, Önemli Web Verilerindeki gizemin bir kısmını ortadan kaldırmaya yardımcı olur.
Web Sayfası Oluşturma
Web sayfası oluşturma, tarayıcı ile web sayfası arasında gerçekleşen şeydir, bir web sayfası oluşturma sürecidir. Verimli bir işleme süreci, yüksek Temel Web Verileri puanlarıyla sonuçlanır. Daha az verimli oluşturma, satışları, reklam kazançlarını ve hatta web sayfasının taranmasını belirli bir dereceye kadar etkileyebilir. Google’dan Martin Splitt’ten işlemenin ne olduğunu tanımlaması istendi. Martin, bir tariften yemek pişirmek ile bir web sayfası yapmak arasında bir benzetme yaparak yanıt verdi. HTML , Köprü Metni İşaretleme Dili anlamına gelir. Oluşturma işlemi aracılığıyla bir tarayıcıyla erişilebilen belgeler oluşturmaya yönelik bir biçimdir. Martin Splitt işlemeyi açıkladı:
“HTML’yi bir tarif olarak düşünürseniz ve orada tüm malzemelere sahipseniz: bir sürü metnin var, bir sürü resmin var, bir sürü eşyan var, Ama tarifte gerçekten yok. Tarif, bir şeyin nasıl yapılacağına dair tüm bu talimatları içeren bir kağıt parçası.” Martin’in açıklamasının ilk kısmı, HTML’nin bir tarif, talimatlar gibi olduğudur. Metin ve resimler, web sayfası olan bitmiş yemeği oluşturmak için kullanılan şeylerdir. Martin, web sayfası kaynaklarını gerçek fiziksel içeriklerle karşılaştırarak analojiye devam etti: “Şimdi, bir web sitesinin kaynakları, CSS, JavaScript dosyaları ve ayrıca resimler, videolar, sayfanın gerçekte daha sonra göründüğü gibi görünmesini sağlamak için yüklediğiniz her şey gibi bileşenlerdir. Tarayıcınızda bildiğiniz ve kullandığınız web sitesi, tarayıcınızda gördüğünüz son yemektir.”
Render, Pişirme İşlemi Gibidir
Martin daha sonra görselleştirmeyi, malzemeleri (görüntüler, CSS, vb. gibi kaynaklar) alma ve pişirme işlemini gerçekleştirme süreciyle karşılaştırdı. O devam etti:
“Ve render, hemen hemen bunun pişirme veya hazırlık sürecidir.”
Googlebot Tarama ve Oluşturma
Sonraki Martin, Googlebot için oluşturmanın ne olduğunu açıklıyor. Martin, Googlebot’u ve oluşturmayı açıkladı:
“Yani emekleme temelde büyük bir yemek tarifleri kitabına giriyor ve sadece bir tarifin olduğu bir sayfa alıyor ve bunu bizim alanımıza, erişimimize koyuyor, sanki burada bir mutfak masasında duruyoruz… ve yemek pişirmenin başlamasını bekliyoruz. ve emekleme bize basitçe bir tarif verecek. Ve sonra işleme, işlemenin devam ettiği süreçtir, Aha! İlginç! Şuradaki Crawler, bana bu on malzemeyi getirir misin? Ve paletli uygun olacak, evet, sana ihtiyacın olan bu on malzemeyi aldım. Çok teşekkürler! Ve sonra pişirmeye başlıyoruz. İşte render budur.”
Web Sayfası Derlemesi için HTML’yi Ayrıştırma
Sonraki bölüm bir programlama sözcüğü olan ayrıştırmayı tanıtır. Ayrıştırma, yalnızca HTML belgesinin tüm bölümlerini (JavaScript, CSS, HTML öğeleri) almak ve web sayfasını oluşturmak için yönergeleri izlemektir. Martin, işleme konusundaki tartışmasına devam etti:
“Yani işleme, HTML’yi ayrıştırır. Temelde HTML, taramadan geldiğinde, sadece bir grup metindir, uygun biçimde biçimlendirilmiştir, ancak…Metin! Bunu görsel bir temsil haline getirmek için, ki bu gerçekten web sitesidir, onu oluşturmamız gerekir, bu da tüm kaynakları getirmemiz gerektiği anlamına gelir, metnin bize nasıl olmamızı söylediğini temel olarak anlamamız gerekir: Burada bir başlık var, tamam. Sonra orada bir resim var ve resmin yanında bir sürü metin var ve ardından resmin altında başka bir başlık var, bu daha küçük bir başlık, bu daha düşük seviyeli bir başlık … ve sonra bir video var ve sonra o videonun altında biraz daha metin var ve bu metinde buraya, buraya ve buraya giden üç bağlantı var. Ve tüm bu montaj süreci, bu ne olduğunu anlama ve ardından tarayıcı pencerenizde etkileşime girebileceğiniz görsel bir temsile birleştirme, yani oluşturma.
Oluşturmada JavaScript’in Rolü
Bazı JavaScript , web sayfasını oluşturmak (oluşturmak) için kritik öneme sahiptir. Bir iletişim formuyla ilişkili komut dosyaları gibi oldukça fazla JavaScript, site ziyaretçisinin kaydırabileceği, okuyabileceği ve bir gezinme menüsünü tıklayabileceği etkileşimli bir web sayfasının ilk oluşturulmasında gerçekten gerekli değildir. Web sayfası oluşturmayı hızlandırmak (ve Önemli Web Verilerini iyileştirmek) için, web sayfası için gerekli değilse bazı kritik olmayan JavaScript ertelenebilir veya tamamen hariç tutulabilir. Sayfayı görünür ve etkileşimli hale getirmek için önemli olan bazı JavaScript’ler vardır ve bazıları henüz veya hiç önemli değildir. Martin açıkladı:
“Ve oluşturmanın bir parçası olarak, JavaScript’i ilk aşamada çalıştırıyoruz çünkü JavaScript temelde tarifin içinde bir tarif oluyor. JavaScript şu şekilde olabilir, şimdi gidip soğanları doğrayın! Yani artık soğanları ham madde olarak aldınız ama soğanları bir bütün olarak yemeğinize koymuyorsunuz, onları kesiyorsunuz. Ve JavaScript bunun için gerekli, değil mi? …JavaScript yürütmesi, oluşturmanın yalnızca bir parçasıdır.”
Düzen Ağacı
Martin daha sonra Düzen Ağacı hakkında konuşmaya başlar. Web sayfasının tüm bölümlerinin hiyerarşik bir temsilde düzenlenmesi olan Belge Nesne Modeline atıfta bulunuyor. Bir web sayfasının farklı “parçaları”, bir ağacın yaprakları gibidir. HTML’de, Martin’in Yerleşim Ağacı dediği yapraklara düğümler denir. Martin, Düzen Ağacını açıklıyor:
“Ancak JavaScript yürütmesi bittiğinde veya JavaScript yürütmesi olmadığında da sorun yok. Ama sonra olan şey, bu parçaları ve parçaları nasıl bir araya getirmemiz gerektiğini ve onları sayfada nasıl bir araya getirmemiz gerektiğini çözüyormuş gibi bir araya getiriyoruz ve bu da Düzen Ağacı denen bir şeye yol açıyor. Ve Düzen Ağacı bize şeylerin ne kadar büyük olduğunu, sayfanın neresinde olduğunu söyler. Görünürlerse veya görünmezlerse, bir şeyin arkasında başka bir şey varsa. Bu bilgi, JavaScript’i yürütmek kadar bizim için de önemlidir, çünkü JavaScript, sunucu tarafından teslim edildiği gibi ilk HTML’de olmayan içeriği değiştirebilir, silebilir veya ekleyebilir. Yani kısaca render. Biraz HTML’den, ekranda potansiyel olarak bir grup piksele kadar. Render budur.”
Pahalı Oluşturma, Kullanıcı Deneyimini Etkileyebilir
Martin daha sonra JavaScript’in enerji tüketimi üzerindeki etkisi hakkında faydalı bilgiler sunuyor. Bazı JavaScript’lerin zaman ve enerji açısından ne kadar maliyetli olabileceğini açıklamak için “pahalı” kelimesini kullanıyor. JavaScript’in karbondioksit, bir sera gazı ile nasıl karşılaştırıldığından ve bunun kullanıcıları ve nihayetinde yayıncıların ve e-ticaret mağazalarının alt satırını nasıl etkilediğinden bahsediyor. Martin, pahalı işlemenin etkisini şöyle açıklıyor:
“Google Arama, bu durumda gerçek dünyadaki bir kullanıcıyla tamamen aynı mücadeleyi veriyor. Çünkü gerçek dünyadaki bir kullanıcı için, modern bir telefonda ve gerçekten hızlı, fantastik ve pahalı bir telefonda olsanız bile, daha fazla yürütme her zaman, her zaman daha fazla güç tüketimi anlamına gelir. Olay bu. Ve … JavaScript’i İnternetin CO2’si olarak adlandıran insanlar oldu ve bunun tamamen yanlış olduğunu düşünmüyorum. …Ne kadar pahalı yaparsanız, deneyim olarak bizim için o kadar kötü olur. Google Arama gerçekten umursamıyor. Sadece ihtiyacımız olan kaynaklara yatırım yapmalıyız ve mümkün olduğunca az enerji ve zaman harcadığımızdan emin olmak için birçok optimizasyon yapıyoruz. Ama açıkçası, bunu optimize ediyorsanız, hoş ve gerçekten hoş bir yan etki, kullanıcılarınızın daha az pile ihtiyaç duydukları için muhtemelen daha mutlu olmalarıdır, eski telefonları oraya koyduğunuz şeyle hala iyi çalışacak ve yapabilecekler. web içeriğinizi tüketin ve belki de rakiplerinizi değil, çünkü rakiplerinizin umurunda değil ve aslında telefonlarında kullanmak için daha az uygun bir şey üretiyorlar. Yani bu, Google’ı kullanıcı deneyimiyle karşılaştıracağınız bir şey değil. Bu bir nevi aynı sorun veya aynı zorluk gibi ve Google Arama da dahil olmak üzere hepimiz bununla karşı karşıyayız.”
Oluşturmanın Önemiyle İlgili Görüşler
Önemli Web Verileri, özellikle teknisyenler Belge Nesne Modelleri, DOM ağaçları ve işleme hakkında konuştuğunda biraz soyut ve gizemli olabilir. Martin Splitt’in analojileri, Core Web Vitals puanlarını anlamanın önemli bir bölümünden bu gizemin bir kısmının çıkarılmasına yardımcı oldu. Tartışmasının bir başka yararı da, pahalı oluşturma kavramı ve bunun, telefonları daha eski olan ve sayfayı oluşturmada sorun yaşayan site ziyaretçilerini nasıl etkileyebileceği hakkında farkındalık yaratmaktır. Ve sadece eski telefonlar değil, daha yeni telefonlar, günlerce açıksa ve RAM birden çok açık tarayıcı penceresine yayılmışsa bir web sayfasını indirirken sorun yaşayabilir. Son olarak, render kavramının gizemini çözdü. Bu, önemli bir şeyi anlama konusundaki ilerlemeyi yavaşlatmak veya durdurmak için teknik jargon gibi birkaç şey olduğundan, web sayfası hızını ve Önemli Web Verileri performansını iyileştirme konusunda konuşmayı ilerletmeye yardımcı olur.
