| Translations Blog |

PNG Clipart

Middleman va Nginxdan foydalanib, Google-ning 100 ballik tezligini qanday olish mumkin

Tarjima qilingan maqola - How to Get 100/100 Google Page Speed Score with Middleman and Nginx

Muallif(lar) - Michael Elliott

Maqolaning manbasi:

https://elliotec.com/how-to-get-100-google-page-speed-score/

Har birimiz sekin saytlardan nafratlanamiz. Aksincha, har birimiz tezkor saytlarni sevamiz.
Yaqinda Google AMP (Tezlashtirilgan Mobil Sahifalar) da ishladim. Bu veb-sayt shubhali veb-saytlarni masalaning yuqori qismida Google mobil veb-indeksida kamaytirishga mo'ljallangan. Men shaxsan AMP ning yomon ekanligiga ishonaman, lekin bu ushbu maqola mavzusiga taalluqli emas.

Pastki satr - tezkor veb-saytlar yaratish orqali yanada yaxshi foydalanuvchi tajribasiga ega bo'lishingizdir va bu AMPga ulanishingizga hojat yo'q. Biroq, agar bu maqolada tasvirlangan usullar sizning sahifangizni AMP-da ko'rsatish uchun yaxshi boshlanish nuqtasi bo'lishi mumkin.

Men o'qiyotgan saytning oldingi qismida Middleman veb-saytlarining statik generatoridan foydalanaman. Nginx serverida Raqamli Okean tomchilari tomosha qilingan, shuning uchun men ushbu blog va uning to'plamida mukammal skorga qanday erishganim haqida bir necha misollarni keltiraman.

Google PageSpeed ​​Insights

Google PageSpeed ​​Insights - Veb-sayt tezligini ma'lum ko'rsatkichlar asosida baholash uchun Google vositasi, jumladan:

Men tezkor veb-saytga muhtojman va vaqtning 100 foizini olish yaxshi, shuning uchun elliotec.com saytida 100/100 ball olish uchun tadqiqotga bordim. Endi sizlarga buni qanday qilishni aytaman.

Sahifa o'lchami

Ushbu qoidalardan biriga o'tishdan oldin, xususan, sahifaning o'lchamlari haqida xabar bering. Kodlar bazasini kichik qilib qo'ying. Agar siz barcha sahifalaringizda barcha katta Bootstrap CSS kodini yuklashga kerak bo'lmasa, osonroq va sozlang. Agar sizda sahifangizda bir necha javascriptga kerak bo'lmasa, masalan, blog uchun, uni o'sha erda qoldirmang. Yuzlab millisekundlarning hisobiga bir nechta mayda chiziqli animatsiyalarga ega bo'lish, odatda foydalanuvchiga bunga loyiq emas. Biroq, tovar belgisi yoki talablarning katta qismi sizni jiddiy JavaScript-ni talab qiladigan joyda joylashtirsa, siz hali ham nozik va tez saqlash uchun foydalanishingiz mumkin bo'lgan strategiyalar mavjud.

Mijozlar va serverlarni boshqarish

100/100 baho olishingiz kerak bo'lgan bir narsa - asosiy vositalarni to'g'ridan-to'g'ri nazorat qilish va ular atrofida vositalarni yaratish. Ishlashni maksimal darajaga ko'tarish uchun ushbu saytni konfiguratsiyalar bilan yaratish uchun statik generator saytidan foydalanardim. Ushbu saytda hech qanday javascript yo'q (Squaresend elektron pochta plaginidan tashqari), lekin agar kerak bo'lsa, men uni boshqa aktivlarim kabi qayta ishlashni istayman. Mana, men sizning Middleman config.rb ning to'liq versiyasiga havola qilish uchun link.

Bunga qo'shimcha ravishda, siz fayllarni hosting serverini to'liq boshqarishingiz kerak bo'ladi. Men serverlar ustidan to'la nazoratga muhtoj bo'lganimda Nginx-dan foydalanishni istayman va bular faqat statik fayllar bo'lgani uchun, men bu erda yaxshi ish o'rinlari mavjud bo'lgan Nginx qismidan tashqarida ma'lumotlar bazasini yoki orqa qismini o'rnatishga hojat yo'q.

Ko'rsatkichlarni buzish

Keling, ba'zi tafsilotlarni ko'rib chiqamiz.

Ochish sahifasi yo'l-yo'riqlaridan saqlaning

Bu birinchi nuqta asosan o'zini tushuntiradi. Siz sahifaga o'tirishni xohlamaysiz va foydalanuvchini iloji boricha yo'naltirishingiz kerak. Bu nisbatan tez-tez ish joyi sayt mobilga yo'naltirilganda va u ishlash uchun juda qimmat. Mumkin bo'lsa iloji bo'lsa, mobil qurilmalar uchun mo'ljallangan sayt yarating va saytning mobil versiyalariga yo'naltirish kerakligini oldini olish uchun unga javob bering.

Siquvni faollashtirish

Bu erda serverni nazorat qilish kerak. HTTP tezkor uzatish uchun tarmoq orqali siqilgan fayllarni jo'natishda yordam berib, ularni brauzerga yuborishdan oldin barcha mumkin bo'lgan variantlardan foydalanishimiz kerak. Nginx va Middleman bilan ishlashni osonlashtiradi. Mening global nginx.conf menda:

#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;
}

Va Midmanning versiyasida:

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

Brauzerni keshlashdan foydalanish

Brauzer brauzerni yuklab olingan resurslarni muayyan vaqt davomida saqlashga imkon beradi va shu bilan bir xil fayllarni qayta-qayta yuklashni davom ettirmaydi. Shunga qaramay, bu Nginx bilan juda oson, turli xil fayl turlariga amal qilish muddatini belgilash, masalan, ushbu veb-sayt uchun mahalliy nginx.conf da bo'lgani kabi:

#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;
}

Bundan tashqari, oddiygina qo'shilish konfiguratsiyasiga oddiy qo'shilgan holda Middleman-da bajariladigan fayl nomlari bo'yicha noyob xash resurslarini belgilab, faqat o'zgarmagan fayllarni keshlashingiz mumkin:

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

Biz aktivlarni kamaytiramiz

Eng mashhur va oddiy sahifa tezligi strategiyasidan biri sizning aktivlaringizni minimallashtirishdir. HTML, CSS va JavaScript-ni kamaytiradigan inline qadamlarga ega bo'lgan zamonaviy veb-ishlab chiqarishda muhim ahamiyatga ega, ammo u juda kam.Chiziq o'lchamini minimalizatsiya bilan keskin qisqartirishingiz mumkin. Middleman'da, siz qilishingiz kerak bo'lgan yagona narsa sizning config.rb ishingizda bir nechta qatorlarni qo'yadi, masalan:

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

CSS va JS minifikatsiyasi Middleman bilan bepul bo'ladi, lekin siz boshqa narsalar kabi katta daromad sifatida sizga berilmasa ham, albatta siz istagan HTML qismiga gem middleman-minify-html qo'shishingiz kerak bo'ladi.

Rasmni optimallashtirish

Rasmlar odatda brauzer tomonidan o'lchamiga va tezligiga qarab yuklab olinadigan eng qimmat fayllardir, shuning uchun bu sizning ishlashingizdagi eng yuqori natijalarni olishingiz mumkin bo'lgan hududdir. Boshlash uchun odatda eng kam o'lchamli va sifatli tasvirlarga ega bo'lishni xohlaysiz. Photoshop singari vositalar ko'plab kuchli ishlarni bajarish qobiliyatiga ega, ammo ularni tasvir bosqichida qurish bosqichida ham optimallashtirishingiz mumkin. Albatta, Middleman bilan juda oson. Albatta, Middleman bilan bu juda qiyin. Avval siz gemfaylga gem 'middleman-imageoptim', git: 'https://github.com/plasticine/middleman-imageoptim', branch: 'master' qo'shishni xohlaysiz, keyin:

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

Qanchadan-qancha, siz bu og'ir tasvirlardan bir tonna og'irlikni sindirib tashladingiz.

Server javob vaqtini kamaytirish

Google serverlarning javob berish vaqtini qabul qilish uchun etarli darajada qattiq chegaraga ega - uni 200 milodiy ostida saqlang. Bu kabi statik sayt uchun bu asosan muammo emas. Men bir xil raqamli okeandagi o'nlab server bloklarini joylashtirsam, ular resurslar uchun jang qilishlari va ishlarini sekinlashtirishi mumkin, shuning uchun uni tavsiya etmayman. Agar sizda ma'lumotlar bazasi so'rovlarini bajaradigan va boshqalar mavjud bo'lsa, serveringiz 200 ms ga nisbatan sekinroq bo'lishi mumkin bo'lgan boshqa sabablar mavjud va siz uni tahlil qilish va takomillashtirishga vaqt sarflashni xohlaysiz.

Prioritet ko'rinadigan kontent

Ko'zda tutilgan tarkibga ustuvor ahamiyat berish ko'pchilikning ustidagi kontentni ko'rsatish uchun serverga qo'shimcha orqaga o'tishni talab qilmaydigan darajada kichik bo'lishi kerakligini anglatadi. Buni keyinchalik uchinchi tomon skriptlarini yuklab olish va yuqorida tasvirlangan kontentni kichik va tez tutib turish kabi xatti-harakatlar amalga oshirilishi mumkin. Bu erda ko'plab boshqa ma'lumotlar yordam beradi, lekin ba'zan bunga erishish juda qiyin, ayniqsa, sizning dastlabki ko'rinadigan tarkib sifatida tasvirlaringiz bo'lsa.

JavaScript-ni va CSS-ni ekranning kattaroq tarkibida bloklashini bekor qiling

Bu, ehtimol, ro'yxatdagi eng zo'r narsadir va bu avvalgi bilan bog'liq. Buni etkazib beradigan bir necha strategiya mavjud. Birinchidan, agar siz uchinchi tomon Java skriptlariga kerak bo'lsa yoki async barcha script uchun mos kelmaydigan atributni quyidagi kabi qo'shsangiz: <script async src="main.js"> tashqi javascript fayllari boshqa kontentni yuklashni va ko'rsatishni bloklamaydi va mos kelmaydigan tarzda yuklanadi.

Keyinchalik tashqi resurslarni qidirish o'rniga CSS va JS qo'shing. Qo'l bilan bajarish dahshatli va yomon bo'lishi mumkin, lekin bizda uning uchun vositalar mavjud. Barcha aktivlaringizni sahifalaringizga bog'lash uchun bir necha qadamlar mavjud.

# config.rb
configure :build do
  activate :minify_css, inline: true
  activate :minify_javascript, inline: true
end
< style>< %= sprockets.find_asset('site').to_s % >

shuningdek, siz kiritmoqchi bo'lgan har qanday skript uchun, <script> teglarida, albatta.

Va nihoyat, mening saytimda Google Analytics skriptini olishda muammolar paydo bo'ldi, shuning uchun renderlashni bloklamaydi. Men ro'yxatga kiritilmagan so'nggi narsa edi va men bu 100/100 ballni ko'rmaganimdan juda xafa bo'lgan edim. Mening haqiqiy maqsadim miqdori bo'lgani uchun va saytim juda tez bo'lgani uchun, Google Analytics buyruq faylini e'tiborsiz qoldirish uchun Sahifa statistikasi vositasini aldash uchun achinarli hacked onlaynni topdim. Agar ular o'zlariga zid bo'lishi mumkin bo'lsa, men buni qila olaman, deb ishonaman, siz ham shunday qila olasiz!

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

Hammasi tugadi!

Hammasi shu. Agar siz ushbu maqoladagi ko'rsatmalarga o'z statik saytingizdan foydalangan bo'lsangiz, Google Page Speed'da 100/100 ballni oling. Tezlik nima muhim va u sizning veb-saytingizdan foydalanadigan har bir kishi uchun yaxshi va bu ham SEO uchun foydali bo'lishi kerakmi?