100/100 Google Page Speed ​​Puanı Nasıl Alınır?

Herkes yavaş web sitelerinden nefret eder. Herkes hızlı web sitelerini sever.
Şişkin web sitelerini mobil web dizininde Google sonuçlarının tepesinde olmaktan kurtarmaya yönelik olarak hazırlanan bir Google AMP (Hızlandırılmış Mobil Sayfalar) projesinde son zamanlarda çalıştım. Ben şahsen AMP’nin bizim için kötü bir şey olduğunu düşünüyorum, fakat bu yazı noktasının yanında.

Bu makalenin amacı, hızlı web siteleri inşa ederek daha iyi bir kullanıcı deneyimi elde edebilmeniz ve AMP kullanmanız gerekmemesidir. İsterseniz, bu yazıdaki yöntemler sayfalarınızı AMP’ye asgari bir çaba sarf etmek için iyi bir başlangıç ​​noktası olabilir.

Statik site üreticisi Aracı’nı şu an okuduğunuz web sitesinin önü için kullanıyorum ve bir Nginx sunucusundaki bir Dijital Okyanus Damlası’nda barındırdığından, bağlamda mükemmel puana nasıl ulaştığımın bazı örneklerini vereyim Bu blog ve yığınının.

Google PageSpeed ​​Insights
Google PageSpeed ​​Insights , Google’ın sağladığı belirli ölçütlere dayalı bir web sitesinin hızını elde etmek için sağladığı bir araçtır:

Açılış sayfasının yönlendirmelerini önleme
İşlev engelleme engelleme JavaScript ve CSS’yi, ekranın üst kısmındaki içerikte kaldırın
Sıkıştırmayı etkinleştir
Tarayıcı önbelleğini kullan
CSS’yi minify
HTML’yi minify
JavaScript’i küçült
Resimleri en iyileştir
Görünür içeriğe öncelik verme
Sunucu yanıt süresini azalt
Hızlı bir web sitesi istedim ve bazen% 100 şeyler almak istedim, bu yüzden elliotec.com’u 100/100 puanı almak için bir maceraya başladım. Anladım.
Şimdi sana nasıl alacağını söyleyeceğim.

Sayfa boyutu
Özellikle bu kurallardan herhangi birine başlamadan önce, genel olarak sayfa boyutu hakkında konuşalım. Kod tabanınızı küçük yapın. Bootstrap’ın muazzam CSS kod tablasının tümünün tüm sayfalarınıza yüklenmesi gerekmiyorsa, daha hafif bir şey kullanın ve özelleştirin. Sayfanızda, bir blog gibi bir sürü JavaScript’e ihtiyacınız yoksa, o zaman buraya koymayın. Yüzlerce milisaniye pahasına birkaç küçük süslü animasyona sahip olmak genellikle bir kullanıcıya değmez. Bununla birlikte, eğer markanın temel parçaları veya gereksinimleri sizi ağır JavaScript’in gerekli olduğu bir yere koyduysa, onu ince ve hızlı tutmak için hala kullanabileceğiniz stratejiler vardır.

İstemci ve Sunucu Kontrolü
100/100 puanı elde etmeniz gereken bir şey, ön uç varlıkların doğrudan kontrolü ve onların etrafında araçlar inşa etmektir. Mümkün olduğunca performansını artırmak için yapılandırmalarımla bu siteyi oluşturmak için statik site oluşturucu Aracı’nı kullandım. Bu web sitesinde neredeyse hiç JavaScript yok (e-posta için Squaresend eklentisi hariç), ancak buna ihtiyacım olsaydı onu varlıklarımın geri kalanı gibi kullanıyordum. Başvuru için benim tam Aracı config.rb’ye bağlantı var .

Ayrıca dosyalarınızı barındıran sunucunun tam kontrolüne ihtiyacınız olacaktır. Sunucularımın tam kontrolünü istediğimde Digital Ocean’da Nginx kullanıyorum ve sadece statik dosyalar olduğundan aslında bir veritabanını veya arka uçu burada işin iyi bir parçasını oluşturan Nginx parçasının dışında kurmam gerekmiyor.

Metrikleri yıkma
Şimdi bazı ayrıntılara geçelim.

Açılış sayfasının yönlendirmelerini önleme
Bu ilk madde çoğunlukla açıklayıcıdır. Bir sayfaya gelmek ve bir kullanıcıyı olabildiğince yönlendirmek istemiyorsunuz. Bir masaüstü sitesi mobil cihaza yönlendirildiğinde bu durum oldukça yaygındır ve performans açısından çok pahalıdır. Mümkünse, mobil olarak tasarlanmış ve sitenin mobil sürümlerine yönlendirme zorunluluğunu önleyen tepki veren bir site oluşturun.

Sıkıştırmayı etkinleştir
Burada zaten sunucunun kontrolüne ihtiyacımız var. Http, daha hızlı aktarımlar için sıkıştırılmış dosyaları ağ üzerinden göndermeyi desteklediğinden, tarayıcıya gönderilmeden önce elimizden gelen her şeyi gziplememizden yararlanmalıyız. Nginx ve Aracı ile etkinleştirmek süper kolay. Genel nginx.conf dosyamda şunlar var:

#nginx.conf

http {
    sendfile on;
    types_hash_max_size 2048;
    server_names_hash_bucket_size 128;
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/x-font-ttf font/opentype image/svg+xml image/x-icon;
}

Ve arabulucu konfigürasyonumda:

# config.rb
configure :build do
  activate :gzip
end

Tarayıcı önbelleğini kullan
Önbelleğe alma, tarayıcının indirilen varlıkları belirli bir süre boyunca tutmasına ve böylece aynı dosyaların defalarca indirilmesini zorunlu kılmamasına olanak tanır. Bu, yine de, bu web sitesi için yerel nginx.conf dosyamda nasıl olduğu gibi, farklı dosya türleri için son kullanma tarihlerini belirleyerek Nginx ile yapmak oldukça kolaydır:

#expiry map
map $sent_http_content_type $expires {
    default                     off;
    text/html                   epoch;
    text/css                    max;
    application/javascript      max;
    application/x-font-ttf      max;
    application/x-font-otf      max;
    application/font-woff       max;
    application/font-woff2      max;
    ~image/                     max;
}

server {
    listen 80;
    listen [::]:80;
    server_name elliotec.com www.elliotec.com;
    expires $expires;
    return 301 https://$server_name$request_uri;
}

Ayrıca, dosya adına eşsiz varlık karmalarını ayarlayarak değişmemiş dosyalarınızı önbelleğe alabilmenizi sağlayabilirsiniz; dosya adı, yapı yapılandırmasında basit bir eklemeyle Aracı’nda yapılır:

# config.rb
configure :build do
  activate :asset_hash
end

Varlıkları küçült
Daha iyi bilinen ve basit sayfa hızı stratejilerinden biri, varlıklarınızı küçültmektir. HTML, CSS ve JavaScript’inizi minimize eden bir yapı adımına sahip olmak modern web geliştirmede önemlidir, ancak çok atlandı. Paket boyutlarınızı küçültme ile önemli ölçüde azaltabilirsiniz. Aracıda, yapmanız gereken tek şey, sizin config.rbiçin bir iş yapmak için birkaç satır koymaktır :

# config.rb
configure :build do
  activate :minify_css
  activate :minify_javascript
  activate :minify_html
end

CSS ve JS minifikasyonu Aracılıkla birlikte gelir; ancak gem middleman-minify-html, diğer öğeler kadar kazanç sağlamayacak olsanız bile, kesinlikle istediğiniz HTML parçasına eklemeniz gerekir.

Resimleri en iyileştir
Görüntüler genellikle bir tarayıcıya boyut ve hız kadar indirmek için en pahalı dosyalardır, bu nedenle bu çaba için en fazla performans kazanımının elde edebileceği alanlardan biridir. Başlamak için, genellikle en düşük uygulanabilir boyut ve kalitede görüntüler olmasını istersiniz. Photoshop gibi araçlarda bu konuda çok fazla çalışma olanağı vardır, ancak bunları imageoptim gibi bir aracı kullanarak bir yapı adımında daha da optimize edebilirsiniz. Tabii ki Aracı ile bu oldukça zahmetsizdir. İlk gem ‘middleman-imageoptim’, git: ‘https://github.com/plasticine/middleman-imageoptim’, branch: ‘master’önce, gem dosyanıza eklemek isteyeceksiniz, o zaman:

# config.rb
configure :build do
  activate :imageoptim
end

Güzel, şu ağır görüntülerden bir ton ağırlığı tıraş ettin.

Sunucu yanıt süresini azalt
Google, kabul edilebilir sunucu yanıt süresinde oldukça katı bir eşiğe sahiptir – 200 ms’nin altında tutun. Bunun gibi statik bir site için, bu temelde bir sorun değil. Aynı Dijital Okyanus Damlasında düzinelerce sunucu bloğuna ev sahipliği yapıyordum, bunu önermemek için kaynaklar için savaşıyor olabilirler ve işleri yavaşlatabilirlerdi. DB sorguları ve benzeri işlemler gerçekleştiren bir arka uçınız varsa, sunucunuzun 200 ms eşiğinden daha yavaş olmasının çeşitli nedenleri vardır ve bunu analiz etmek ve iyileştirmek için kesinlikle zaman harcamak isteyeceksiniz.

Görünür içeriğe öncelik verme
Görünür içeriği önceliklendirmek, üstü katlanan içeriğin, sunum yapmak için sunucuya ek tur atılmasını gerektirmeyecek kadar küçük olması gerektiği anlamına gelir. Bu, daha sonra üçüncü şahıs komut dosyalarını yüklemek ve genellikle üstü katlanmış içeriği küçük ve hızlı tutmak gibi şeyler yaparak yapılabilir. Buradaki diğer öğelerin çoğunda bununla yardımcı olacak, ancak özellikle görülebilir ilk içerik olarak görüntüleriniz varsa, bu belgeyi almak çok zor.

İşlev engelleme engelleme JavaScript ve CSS’yi, ekranın üst kısmındaki içerikte kaldırın
Bu muhtemelen listedeki en karmaşık öğedir ve önceki listeyle alakalıdır. Bunu geçmek için kullandığım birkaç strateji var. Birincisi, eğer üçüncü taraf JavaScript dosyalarına ihtiyaç duyarsanız veya bu asyncniteliği tüm scriptetiketlerinize eklerseniz :, <script async src=”main.js”>böylece harici JavaScript dosyaları diğer içeriğin yüklenmesini ve oluşturulmasını engeller ve zaman uyumsuz olarak yükler.

Ardından, onlara dış kaynak çağrıları yapmak yerine CSS ve JS’yi satır içine yerleştirin. Bunu elle yapmak korkunç ve çirkin olur, ancak bunun için bizim için bir takım araçlarımız var. Tüm öğelerinizin sayfalarınıza girilmesi için birkaç adım var.

gem ‘middleman-sprockets’Aracınızın işletme hattını ele geçirdiğimizden önce uygulamanıza dişlileri ( ) eklemek zorunda kalacaksınız .
Ardından, her minify config.rbiçin inline: truekarma ekleme adımını şöyle yapın:

# config.rb
configure :build do
  activate :minify_css, inline: true
  activate :minify_javascript, inline: true
end

Son olarak, CSS’nizi çektiğiniz mizanpaj şablonunuzda ( <head>muhtemelen etiketiniz nerede olursa olsun ):

<style><%= sprockets.find_asset('site').to_s %></style>

ve aynı şekilde çizgi içine yazmak istediğiniz tüm senaryolar için <script>.

Sonunda, sitemdeki Google Analytics komut dosyasını render engellememek için almakta çok sıkıntı yaşıyordum. Listede, başaramadığım son şeydi ve 100/100 puanı görmediğime oldukça kızdım. Asıl hedefim sayı olduğu için sitemin çok hızlı bir sürede olduğu açıktı , Google Analytics komut dosyalarını görmezden gelmek için Page Speed ​​Insights aracını kandırmak için online aptal bir saldırı bulundu . Eğer kendileri ile çelişebiliyorsa bunu yapabileceğimi biliyorum ve You To Can!

if(navigator.userAgent.indexOf("Speed Insights") == -1) {
// Your Google Analytics Code Here
}

Hepsi tamam!
Başladın Kendi kendine barındırılan kendi statik siteniz için bu yazının talimatlarını uyguladıysanız Google Page Speed’de 100/100 puan alırsınız. Hız önemli ve web sitenizi kullanan herkes için iyi ve aynı zamanda bazı SEO için de iyi olmalı, değil mi?