Görünür içerik nedir?

  • Görünür içerik, bir web sayfasının kullanıcıların kaydırmadan önce ekranlarında gördükleri kısmıdır
  • Bazen “ekranın üst kısmı” olarak adlandırılır


Başlangıçta bir kullanıcı tarafından görülebilen içeriğe öncelik verme

Yüklenmesi çok hızlı ve net görünen web siteleri genellikle yavaş web siteleri kadar büyüktür, sitenin çok hızlı yükleniyor gibi görünmesi için ekranın üst kısmındaki içeriğe öncelik vermişlerdir.

Kullanıcılar içeriği hızlı bir şekilde gösteren web sayfalarını sever ve Google da öyle. Bu makale, çok daha hızlı sayfa yüklemeleri için ekranın üst kısmındaki içeriğe nasıl konsantre olacağınız konusunda bazı bilgiler verecektir. Google sayfa hızı aracında “görünür içeriğe öncelik ver” hatasını alıyorsanız, bu sorunu düzeltmenize yardımcı olur.

Ekranın üst kısmındaki içeriğin boyutunu küçültme

Google , bunu başarmak için iki ana strateji önerir ve sayfalarımızı incelemek için bize oldukça iyi bir taslak sunar. İkisini de derinlemesine ele alacağız.

  • HTML’nizi önce ekranın üst kısmındaki kritik içeriği yükleyecek şekilde yapılandırın
  • Kaynaklarınız tarafından kullanılan veri miktarını azaltın

Ana içeriğe öncelik ver

Bir kullanıcının web sayfanızın yüklenme süresini algılama biçimini iyileştirmenin en hızlı, en basit ve yaygın yollarından biri, HTML’nizin başka şeyler sunmadan önce web sayfanızın içeriğini sunmasını sağlamaktır. Bunu göstermek için çok yaygın bir senaryoya bakalım …

Kenar çubuğuna sahip sayfa

html yapısı - önce kenar çubuğu

Yukarıdaki resimde solda kenar çubuğu ve sağda içerik bulunan bir web sayfası görüyoruz. Ayrıca HTML’de kenar çubuğunun HTML’deki içerikten önce geldiğini de görüyoruz.

Bu, eleştirel içeriğin başka şeylerin arkasına itilmesinin bir örneğidir. Bunun nedeni, HTML’de önce kenar çubuğundan bahsedilirse, kenar çubuğunun içerik alanından önce yüklenmesi gerekir.

Tipik bir kenar çubuğunda, üçüncü taraflara dayanan reklamlar, sosyal düğmeler ve benzeri diğer içerikler bulunur. Kenar çubuğunuz ana içeriğinizden önce yükleniyorsa, aslında kullanıcıyı görmeye geldikleri içeriği görmek için bekletiyorsunuz demektir. Diyelim ki bir Google adsense reklamınız, bir twitter düğmesi, facebook düğmesi ve bu kenar çubuğunda bir Google plus düğmesi var. Bu senaryoda, yalnızca sayfa yükleme süresine saniye eklemekle kalmaz, daha kötü bir şey yaparsınız. Bir kullanıcının içeriğinizi görmesi için geçen süreye saniye ekliyorsunuz.

Kenar çubuğunuzdaki şeylerin yüklenmesi zaman alıyorsa, tarayıcının kullanıcıya ana içeriği gösterebilmesi için tümünün yüklenmesini beklemesi gerekir. Bir kullanıcı için bu sinir bozucu çünkü kenar çubuğunuza, altbilginize veya sosyal düğmelerinize bakmak için sayfanıza gelmediler, ana içeriğinizi görmeye geldiler.

Bu basit bir işlemle değiştirilebilir. Bu adımı uyguladığınızda kullanıcılarınıza öncelikle ana içerik sunulur.

İçerik bölümünü kenar çubuğu bölümünün önüne yerleştirin

Kenar çubuğu bölümünü kopyalayıp yapıştırıp içerik bölümünden sonra yapıştırırsanız, sayfanız ilk önce kenar çubuğunuzdaki şeyleri beklemek zorunda kalmadan ana içeriği sunar.

html yapısı - önce içerik

İçerik bölümü HTML’nizde ilk olduğunda, içerik önce yüklenir …

  • Web sayfanız içeriğinizi indirir ve görüntüler
  • Kullanıcılar içeriği hemen görebilir
  • Kullanıcınız okurken kenar çubuğu reklamlarınız ve düğmeleriniz yükleniyor olabilir
  • Kullanıcılar mutlular çünkü beklemiyorlar

Bu, önce kritik içerik sağlamak için HTML’nizin yapısını değiştirmeye bir örnektir, ancak web sayfalarımızın kullanıcıların (ve Google’ın) bir sayfa yükünü görmek istediği şekilde yüklediğinden emin olmak için yapmamız gereken daha çok şey vardır.

Önce katlama içeriğinin üzerine yükleme

Ekranın üst kısmındaki içeriğin yüklenmesi kavramı kafa karıştırıcı olabilir. Google’ın bununla ne anlama geldiğini açıklamak için altbilginizi düşünün …

Bir kullanıcının sayfayı görüp görmeyeceğinden emin olmadığınızda, altbilginiz için CSS, Javascript, resimler vb. İndirebilmek için neden kullanıcı sayfayı görmek için beklemeli?

Ziyaretçilerinizin birçoğunun altbilginizi bile görmeyeceğini söylemeye çalışacağım. Bu durumları düşünün …

  • Bir kullanıcı ana sayfanızı ziyaret eder, aradıklarını ana navigasyonunuzda görür, tıklar ve o sayfaya gider.
  • Bir kullanıcı web sayfalarınızdan birine gider, bir reklam görür ve tıklar (sayfanızdan ayrılır)
  • Bir kullanıcı satın almak için bir lamba arar ve lamba sayfanızda sona erer, kullanıcı istediği bir lambayı görür ve öğe detay sayfasına gitmek için görüntüyü tıklar.

Yukarıdaki tüm senaryolarda, kullanıcı altbilginizi hiç görmedi! Yine de, bu kullanıcıların, gerçekten görmeye geldikleri bilgilerle karşılaşmadan önce altbilginiz için birkaç dosya yüklemesini sağlıyorsunuz.

Bu, daha yeni ve daha hızlı dünyamızda bir şeyler yapmanın akılsız bir yoludur.

Altbilgi bir nedenle sayfanın altında

web sitesi altbilgisi

Yukarıdaki resimde oldukça altbilgisi olan bir web sayfası görüyoruz. Birçok wordpress blog temasında böyle bir altbilgi var.

Fotoğraflı bir biyografi (indirilecek resim) var, sayfanızın geri kalanının gerektirmediği CSS gerektiren sütunlarda ve belki de javascript kullanan ve iletişim kurması (harici aramalar yapma, alma) harici dosyalar) bir üçüncü tarafla – bu durumda twitter – bilgi sunmak için.

Kısacası, bu altbilgi birçok harika şey yapar, ancak çoğu durumda tarayıcının sayfayı yüklemeden önce tüm bu altbilgi öğelerini bulması ve indirmesi gerekir. Bu, kullanıcının göremeyeceği bir şey için bu kadar çok şey yüklemek, aynı zamanda kullanıcının görmeye geldiklerini görmesini engellemenin hiçbir anlamı yoktur.

Öncelikle ekranın üst kısmındaki içeriği yükleme

İdeal bir durumda, kullanıcı, altbilginizin yüklenmesini beklemeden web sayfanızın ana içeriğini görür. Fakat bu nasıl başarılır?

Yapılma şekli size yalan söylemeyeceğim, biraz düşünce ve planlama gerektirir. Ancak bir sayfa için nasıl yapılacağını anladıktan sonra, web sitenizin tamamında kolayca çalıştırabilirsiniz. Ancak bir sayfa ile başlamalısınız. Bir web sayfasının nasıl yüklendiğine genel bakalım …

Bir tarayıcı bir web sayfasını nasıl yükler

Web sayfanız yüklendiğinde, tarayıcı sayfanın nasıl yükleneceğini belirleyen belirli adımlar atar (bu basitleştirilmiş bir sürümdür, ancak temelde ne olur):

  • Tarayıcı HTML dosyasını indirir
  • HTML’yi ayrıştırır (bakar)
  • Yüklemesi gereken bir şeyle (resim, harici CSS dosyası vb.) Karşılaşır ve HTML’yi ayrıştırmayı durdurur
  • Harici kaynağı yükler
  • Harici kaynak CSS veya Javascript ise bu dosyayı ayrıştırır
  • Ardından, yüklenmesi gereken başka bir kaynağa gelene kadar HTML’yi ayrıştırmaya devam eder

Bu süreç boyunca, tarayıcı mümkün olan en kısa sürede içeriğin mümkün olduğunca fazlasını göstermeye çalışıyor. Bu nedenle, tarayıcı harici kaynaklar gibi engellerle karşılaşmadan önce bazı web sayfası içeriğimizin ilk ve tamamen yüklenmesini sağlamanın yolları vardır.

Ekranın üst kısmındaki içeriğe, tarayıcının ayrıştırılması gereken herhangi bir şey yüklemesi gerekmeden önce herhangi bir harici kaynağa güvenmeyerek veya bu kaynakları erken yükleyerek öncelik verilebilir.

Bildiğimiz birkaç şeye bakacağız, ancak size göstereceğim gibi, daha iyi kullanılabilir. Bakacağımız şeyler …

  • HTML
  • CSS
  • JavaScript

HTML

Yukarıda, HTML’nizin şeyleri arama biçiminin bir sayfanın yüklenme şeklini etkileyebileceğini daha önce görmüştük. HTML’nizde bahsedilenler çoğunlukla sıralı olarak yüklenir (birinci satır ilk, ikinci satır ikinci vb.), Bu nedenle içeriğe öncelik vermenin en önemli yollarından biri, en önemli içeriğinizin HTML’niz tarafından daha az önce çağrılmasını sağlamaktır. önemli içerik. Önce ekranın üst kısmındaki içeriğin üzerinde görüntülemek için HTML mizanpajınızın bazı temel özelliklerini yeniden düşünmeniz gerekebilir.

Çok yaygın bir düzen ve sayfamızın yalnızca HTML düzeniyle yüklenme şeklini nasıl değiştirebileceğimizi gösteren bir çözüm.

Sorun

Yan çubuk div ve ana içerik div içeren bir web sayfamız var. Bu düzen ile “önce katlama içeriğinin üzerinde yükleme” yapmaya çalışırsak, yapamayız veya çok sınırlı oluruz.

Çözüm

Web sayfamızı görsel olarak aynı, ancak farklı bir düzen ile yapalım. Yeni mizanpajımızda ekranın üst kısmındaki kenar çubuğu ve ekranın üst kısmındaki bir içerik alanı & ekranın alt kısmındaki ve ekranın altındaki içerik alanının altında yer alıyoruz.

Sonuç

blank

Şimdi, katlama öğelerinin üzerinde diğer sayfa şeylerinden ayrı olduğumuza göre, yukarıdaki katlama için CSS’yi satır içi ve site CSS’sinin geri kalanını yükleyen harici bir CSS dosyası olabilir.

Fark şu ki, birisi web sayfamıza geldiğinde etkileyici bir şekilde hızlı yüklenir, çünkü yukarıdaki tüm katlama içeriği harici CSS dosyalarının yüklenmesini beklemek zorunda değildir. Bu da bizi …

CSS

css teslimat

CSS’niz, hızlı sayfa yükleme sihrinin çoğunun gerçekleştiği yerdir. Aşağıda özetleyeceğim

İdeal bir CSS kurulumu sayfanızı yavaşlatmaz, hızlandırır. Bunun yapılma şekli …

  • bir (ve yalnızca bir) harici CSS dosyası
  • sayfaya özel olan ve ekranın üst kısmındaki içeriğinizin hemen yüklenmesini sağlayan eğimli bir CSS bloğu.

CSS dağıtım aracını kullanarak CSS’nizin nasıl yüklendiğini keşfedebilirsiniz .

Render engelleme css hakkında daha fazla bilgi edinin .

JavaScript

blank

Web sayfanızdaki javascript, sayfa yükleme süresine gerçekten katkıda bulunabilir, ancak zorunlu değildir.

Javascriptlerinizin içerik yüklenene kadar yüklenmesini erteleyebilirsiniz. Bu, ciddi bir düşünce gerektiren başka bir şeydir, ancak özellikle sosyal düğmeler (Google+, Facebook, Twitter, vb.) veya jQuery gibi javascript kitaplıklarını kullanarak.

Javascript nasıl ertelenir

Sayfa hızı için javascript erteleme açıklayan bir derinlemesine makale yazdım

Kapanışta

Görünür içeriğe öncelik vermenin kolay bir yanıtı yoktur, ancak sayfanızın her yönüne bakmanızı ve bunun nasıl daha iyi olabileceğini düşünmenizi gerektirir. Bakılması gereken ilk şeyler (özet):

  • HTML: Ana içeriğin her şeyden önce yüklendiğinden emin olun. Web sayfanızı ekranın üst kısmındaki içeriği göz önünde bulundurarak düzenleyin (bazı div eklemeniz gerekse bile).
  • CSS . CSS teslimatını CSS aracıyla inceleyin .
  • Javascript: Javascript’i mümkün olduğunca sayfa yükünden sonra erteleyin.

Hiç harici arama yapmayan bir örnek sayfa

Neden bu kadar hızlı olduğunu açıklayan komik bir örnek sayfa yaptım. Sayfa burada

Sayfa hiçbir şekilde harici arama yapmaz. CSS ve resimler tamamen HTML içinde bulunur, bu nedenle HTML dosyası indirilir yüklenmez sayfa görüntülenir. Bu örnek bize ideal fakat gerçekçi olmayan bir durum sunmaktadır. Bunun gibi sayfalar ihtiyaçlarımızın çoğunu karşılamaz. Ancak, sayfa hızı sorunlarının çoğunun sayfa tarafından çağrılan ve nasıl çağrıldığını gösteren harika bir iş çıkarır. Bir sayfa herhangi bir harici kaynak çağırmıyorsa, hemen yüklendiğini görüyoruz.