Veb-sayt sürətinin optimallaşdırılması: 2020-ci ildə bunu necə etmək olar # addım-addım

Təxminən on il əvvəl Google, sayt sürətinin veb axtarış sıralamasına təsir edəcəyini açıqladı. Yazı sürətin reytinqə təsirini aydınlaşdırmasa da, elanı oxuyan veb ustaları veb sürət optimallaşdırmasının inkişaf planlarının başında olmalarını başa düşdülər.


Əlavə olaraq Sürət optimallaşdırmasının SEO faydaları, səhifə yükləmə vaxtları veb saytınızda nə qədər istifadəçinin qaldığını müəyyənləşdirmək baxımından vacibdir. Bu barədə HubSpot məlumat verir Dönüşümün azalması səhifə yükləmə müddətinin artması ilə əlaqədardır – yükləmə müddətinin bir saniyə gecikməsi dönüşümün ~ 20-30% azalmasına səbəb ola bilər!

Veb sürətinin optimallaşdırılması təlimatı

Son bir neçə ildə ortalama səhifə ölçüsündə artım müşahidə olunur. Əslində 2018-ci ildə, orta hesabla bir səhifə ölçüsü 2 MB-dən çox idi! Bu səhifə yükünün əhəmiyyətli bir hissəsi şəkillər, statik fayllar və videolardan ibarətdir.

Ən azı demək, veb saytınızın ölçüsü və ümumi sayt sürətiniz çox şey tələb edir! Getdikcə artan səhifə yükü ilə də, saytınızın necə işləməsini yaxşılaşdırmaq üçün edə biləcəyiniz işlər var. Bu yazı hamısını müzakirə edir.

Veb sürətinin optimallaşdırılması: Başlamazdan əvvəl sizə lazım olan şey

Bu yazı, artıq diqqətdə olan iki əsas şeyin olduğunu güman edir:

  • WordPress-in özünün üstündə çox şişkinliyi təqdim etməyən optimallaşdırılmış bir mövzudan istifadə edirsiniz.
  • Kifayət qədər sürətli bir qonaqsınız.

Bu iki qutuya işarə vurursanız, veb saytınıza yükləmə müddətinin minimal olmasına əmin olmaq üçün üzərinə götürə biləcəyiniz hərtərəfli iş siyahısını araşdırmaq üçün aşağıdakı hissələrə keçə bilərsiniz..

Veb sürət optimallaşdırması ilə işə başlayın

Bir veb səhifənin anatomiyası

anatomiya

Veb səhifələrinizi sürət üçün optimallaşdırmaq üçün həvəs veb səhifəsinə nə daxil olduğunu başa düşməkdir. Ən məşhur komponentlərdən keçək:

  • Bir veb səhifəyə quruluş və məzmun verən HTML kodu – hətta WordPress saytınızdakı tərəfi çalışdırsa da, verilənlər bazasında olanların hamısını götürmək və statik HTML çıxışına çevirmək
  • Dizayn, işləmə və qarşılıqlı əlaqədə kömək edən statik sənədlər (CSS, JavaScript)
  • Arxa planlar, loqotiplər və məzmun üçün şəkillər

Bir səhifə göstərmək üçün brauzer bir veb səhifənin hər bir elementi üçün – HTML, statik sənədlər, şəkillər, xarici məzmun şəklində səhifəni tələb edir. Buna görə də sayı HTTP tələbləri veb sayt sürətinin optimallaşdırılmasında da mühüm rol oynayır.

Harada dayandığınızı tapmaq: veb sürət optimallaşdırma vasitələri

Veb saytınızı optimallaşdırmağa kömək edən xüsusi texnikalara keçməzdən əvvəl, veb səhifələrin sürətini təhlil etməkdə kömək edən vasitələrə nəzər salaq..

Təsadüfi bir sınaq aləti axtaran bir başlanğıcsınızsa, istifadə etməyi düşünə bilərsiniz the Pingdom Alətləri veb saytınızı tez bir zamanda qiymətləndirmək üçün suite. Daha tam bir həll üçün başınıza gələ bilərsiniz Google-ın səhifə sürəti haqqında məlumatları.

Pingdom Sürət TestiSürət testləri üçün Pingdom alətləri

Bunlara əlavə olaraq, bir brauzer plagini şəklində sürətli bir seçim axtarırsınızsa, cəhd edə bilərsiniz YSlow, veb saytları sınaqdan keçirir və brauzerdən təkliflər verir. Bundan əlavə, GTmetrix vasitədir YSlow’un test nəticələrini hesabat üçün istifadə edir.

Site Saytınızın sürətini sınamaq üçün daha çox seçim etmək istəyirsinizsə, bu yazı siyahıları Ən yaxşı sürətli yoxlama vasitələrindən 5-i orada.

Bu yazıda göstərilən texnikalardan keçməzdən əvvəl veb saytınızı bir etalon kimi xidmət etmək üçün burada sadalanan vasitələrdən birində işlətdiyinizdən əmin olun. Hər hansı bir veb sürət optimallaşdırması etdikdən sonra hər hansı bir sürət inkişafını yoxlamaq üçün alətə qayıtdığınızdan əmin olun.

Addım 1: Statik sənədləri optimallaşdırın

Bu təlimatın ilk addımı statik sənədlərin optimallaşdırılmasına yönəlmişdir – ən populyar tərz cədvəlləri (CSS sənədləri) və skriptlər (JS sənədləri) şəklində..

(a) CSS başına, JS altına keçin

Görülməsi lazım olan ilk optimallaşdırma, üslub vərəqlərinin səhifə quruluşunuzun bölümünə getdiyinə əmin olmaqdır, halbuki bütün skriptlər səhifənizin bağlanma etiketinin üstündədir Bunun arxasındakı məntiq sadədir:

  • Ümumiyyətlə üslub cədvəlləri skriptlərə nisbətən daha kiçikdir
  • Brauzer səhifənin gövdəsini təqdim etməzdən əvvəl stil tabları etiketə yükləndikdən sonra səhifədə göstərilən hər hansı bir element müvafiq üsluba sahib olacaqdır.
  • Səhifənin məzmunu yükləndikdən sonra skriptlərin funksionallığı ümumiyyətlə işə düşür, beləliklə, skriptlər ümumiyyətlə altın altına yerləşdirilə bilər

Bu təcrübə veb saytınıza gələnlərin yüklənməsini gözləyərkən xəyal qırıqlığı içində bir səhifə buraxmamalarını təmin edir.

Skriptlər hissəsini tez idarə etmək üçün WordPress üçün Skriptləri Footer plaginlərinə quraşdıra bilərsiniz. Avtopilotda işləyir və işi yaxşı yerinə yetirir.


Ayaq alt yazıları Ayaq alt yazıları

Müəllif (lər): Joshua David Nelson

Cari versiya: 0.6.4.1

Son Yeniləmə: 15 aprel 2020

skriptlər-to-footerphp.0.6.4.1.zip


94% Reytinqlər


20,000 + quraşdırır


3.1.0Tələblər

(b) Minifasiya qurun

Minifikasiya, bir faylın icrası üçün zəruri olmayan hissələrin çıxarılması prosesidir. Məsələn, tərz cədvəllərinizdə və ya skriptlərinizdə aşağıdakılar yerinə yetirmək üçün lazım deyildir:

  • boşluq boşluğu
  • şərhlər
  • uzun funksiyalı və dəyişən adlar
  • istifadə olunmamış kod

Minifikasiya statik sənədlərinizin ölçüsünü azaltmaqla çox kömək edir. Bənzər bir xidmətdən istifadə edərək sənədlərinizi kiçiltə bilərsiniz Minifləşdirin, və ya bunlardan birini quraşdırmaq WordPress-də minifasiya plaginləri.

(c) asinxron yüklənmədən istifadə edin

Bir veb brauzer bir veb səhifədə göründüyü kimi ardıcıllıqla qaynaqlar təqdim edir və tələb edir. Bu sinxron yükləmə adlanır. Bununla birlikdə brauzerin bu standart işləməsini istifadə edərək dəyişdirə bilərsiniz async atributu mümkün olduqda resursları yükləmək. Məsələn, bir ssenari asynchronously aşağıdakı kimi yükləyə bilərsiniz:

Budur WordPress-də asinxron yükləmə ilə kömək edən plaginlərin siyahısı.

(d) GZIP sıxılma istifadə edin

GZip sıxılma, HTTP tələbləri vasitəsi ilə qaynaqları sıxışdırmaq üçün bir texnikadır. GZip sıxılma ilə, server, veb səhifəni göstərərkən brauzerin açdığı zippli resursları göndərir..

Resursu sıxışdırıb açmaq üçün tələb olunan vaxt və resurslar, serverdən müştəriyə daha kiçik bir fayl ötürülməsi zamanı qənaət olunan vaxt və bant genişliyi ilə daha üstündür. Bu texnika yalnız səhifələri daha sürətli yükləmir, həm də server xərclərinə qənaət edir.

GZip sıxılma WP Fastest Cache kimi bir neçə WordPress önbelleme plaginlərinin bir hissəsidir.

(e) Məşhur kitabxanalar üçün Google CDN istifadə edin

Bu addımdakı son optimallaşdırma texnikası Saytınızda istifadə olunan hər hansı bir ümumi kitabxananı əldə edərkən ya Google ya da Microsoft CDN istifadə etmək. Arxasındakı səbəb sadədir – bu CDN-lərin populyarlığına görə, ziyarətçinin brauzerindəki mənbənin önbelleğli bir versiyasının olması ehtimalı var.

Addım 2: Şəkilləri optimallaşdırın

Yuxarıda müzakirə edildiyi kimi, illər ərzində veb səhifələrin ölçüsünün artmasının əsas mənbəyi görüntülərdir.

Hətta CodeinWP-nin öz nömrələrinə nəzər yetirin:

görüntü yükü

Buna görə, görüntülərə toxunmaq veb saytınızın sürətindəki ən əhəmiyyətli inkişaflara səbəb olmalıdır, və edir.

Şəkillər bir veb sayt üçün vacibdir, lakin veb üçün tam keyfiyyətli şəkillərdən istifadə həqiqətən tövsiyə edilmir. Şəkilləri kifayət qədər vizual keyfiyyət verərkən ölçüsünü kəskin dərəcədə azaldacaq dərəcədə sıxmalısınız.

Bunun baş verməsi üçün bir neçə iş görə bilərsən və veb sayt sürətini optimallaşdırmağı unutmayın:

(a) Düzgün ölçülü şəkillər yükləyin

Mövcud mövzu, ehtimal ki, görüntüləyə bilən görüntünün ən böyük ölçüsünə malikdir – ölçülü dərəcədə. Bunun nə olduğunu öyrənin və bundan sonra yalnız iki dəfə böyük olan şəkillər yükləyin.

Niyə iki dəfə? Bu da mövzuya görüntülərin retina keyfiyyətli versiyalarını göstərməyə imkan verəcəkdir.

(b) Şəkilin düzgün növündən istifadə edin

İnternetdə ən çox istifadə edilən iki şəkil növü JPG və PNG-dir.

Bir-birlərinə bənzəmirlər.

  • JPG şəkilləri, rəngləri çox olan fotoşəkillər və digər mürəkkəb şəkillər üçün nəzərdə tutulur
  • PNG şəkilləri interfeys ekranı kimi az rəngli məlumatlara sahib olan qrafiklər üçün mükəmməldir.

Bir PNG görüntüsünə nümunəmövzular

(c) Yükləməzdən əvvəl şəkilləri yerli olaraq optimallaşdırın

Saytınıza hər hansı bir şəkil yükləməzdən əvvəl istifadə edə biləcəyiniz müxtəlif vasitələr var.

tinypng
imageoptim

(d) Yalançı şəkillərinizi yükləyin

Şəkilləri optimallaşdırmaq üçün başqa bir üsul, tənbəl yükləmə, bir ziyarətçi onu görmək üçün aşağı diyirlənməyincə görüntünün yüklənmədiyi bir tətbiqdir..

lazyload demoCodeinWP-də tənbəl yükləmə nümayişi

Saytınızdakı tənbəl şəkilləri yükləmək üçün tam rəhbərlik.

(e) Şəkil optimallaşdırma plagini alın

Ən son, ən azı, WordPress saytınız üçün keyfiyyətli bir görüntü optimallaşdırma plagini almalısınız. Hansı birini istifadə etməyinizdən asılı olaraq, şəkil optimallaşdırma ehtiyaclarının əksər hissəsini avtopilotda edə bilərsiniz.

Budur 6 ən yaxşı görüntü optimallaşdırma plaginləri müqayisə edildi.

Sürətli bir tövsiyəyə ehtiyacınız varsa, özümüzü yoxlayın Optimol. Pulsuz planda bir CDN-yə əlavə olaraq yüksək effektiv görüntü sıxılmasını təmin edir! Optimole əsas rəqiblərinə qarşı verildiyi zaman da bəzi mükəmməl nəticələr verir:

PNG optimallaşdırma nəticələri

PluginOriginal PNG Ölçüsü OptimizationOptimization% Sıxılma
Optimol301 KB34 KB88.7%Zərərsiz və itkisiz
Təsəvvür edin301 KB67 KB77.7%Zərər
TinyPNG301 KB79,7 KB73.5%Zərər
QısaPixel301 KB90.4 KB69.96%Zərər
Gülüş301 KB247 KB17.9%Zərərsiz
EWWW301 KB257.4 KB14,6%Zərərsiz

JPG optimallaşdırma nəticələri

PluginOriginal JPG SizeAtom OptimizationOptimization% Sıxılma
QısaPixel518 KB169 KB67.36%Zərər
TinyPNG518 KB248.6 KB52%Zərər
Optimol518 KB274 KB47%Zərərsiz və itkisiz
Təsəvvür edin518 KB338.7 KB34.64%Zərər
EWWW518 KB488.9 KB5.7%Zərərsiz
Gülüş518 KB493 KB4.9%Zərərsiz


Şəkil optimallaşdırılması və Optimole tərəfindən tənbəl yükləmə Şəkil optimallaşdırılması & Optimole tərəfindən tənbəl yük

Müəllif (lər): Optimol

Cari versiya: 2.3.1

Son Yeniləmə: 21 aprel 2020

optimole-wp.zip


96% Reytinqlər


50.000 + quraşdırır


WP 4.7 + tələb olunur

Addım 3: HTTP sorğularını optimallaşdırın

Yazının əvvəlində bir istifadəçi brauzerinin veb səhifəni yükləməyə başladıqda, həqiqi köçürmələrin fərdi HTTP tələbləri ilə edildiyini müzakirə etdik. Tək bir sorğu hər bir mənbəyi alır. Beləliklə, belə sorğuların sayının artması veb səhifənizin yükləmə müddətini artırır.

sayt istəkləriBir veb səhifənin HTTP tələbləri

(a) Faylları birləşdirin

HTTP sorğularının yükünü minimuma endirmək üçün ilk vəzifə oxşar qaynaqları birləşdirməkdir. Resursları minatlandırarkən oxşar sənədləri birlikdə birləşdirə bilərsiniz. Məsələn, bütün üslub cədvəlləri (CSS sənədləri) və bütün xüsusi JavaScript sənədləri tək sənədlərə birləşdirilə bilər. Bu, bütün mənbələri yükləmək üçün müştərinin etməli olduğu tələblərin sayını azaldır.

Yenə bunlar WordPress üçün minifasiya plaginləri sizə kömək edə bilər.

(b) DNS axtarışlarını minimuma endirin

Www.codeinwp.com kimi bir domenə HTTP tələbi edildikdə, serverin IP ünvanını tapmaq üçün bir DNS (domen adı sistemi) axtarış aparılır. Nəticə olaraq, hədəfiniz veb saytın yüklənməsini sürətləndirmək üçün DNS axtarışlarının sayını minimuma endirmək olmalıdır..

Budur a Kinsta tərəfindən sərin bələdçi bunu necə etmək barədə.

(c) Yaşamağa imkan verir

Heç bir optimallaşdırmadan, brauzer hər bir resurs üçün tək bir HTTP sorğusu göndərir. Yükləmə tamamlandıqdan sonra bu əlaqə bağlanır. Brauzer daha sonra yeni bir qaynaq üçün serverə yeni bir sorğu verir. Yaşamaq, bir resurs yüklədikdə istəyi ləğv etməyən bir texnikadır.

Aşağıdakı yollarla sağ qalmağı təmin edə bilərsiniz:

(d) yönləndirmələri minimuma endirmək

Bir yönlendirme, bir müştərini bir yerdən bir qaynağın başqa bir yerinə avtomatik olaraq aparması üçün bir təlimatdır. Hər yönləndirmə veb səhifənizin yükləmə müddətini artırır və tamamilə zəruri olmadıqda kodunuzdakı yönləndirmələrin qarşısını almalısınız.

(e) bir CDN istifadə edin

Bir CDN (məzmun çatdırılma şəbəkəsi), müştərilərə məzmunu tez və effektiv şəkildə çatdıran geniş coğrafi məkanlarda mövcud olan veb serverlər toplusudur..

Bir mənbə tələb edən bir müştəriyə resurs coğrafi baxımdan müştərinin yerləşdiyi yerə ən yaxın bir serverdən xidmət ediləcəkdir. Bu, tələb olunan məzmunun ən qısa zamanda müştəriyə çatmasını təmin edir!

WordPress saytları üçün ən yaxşı CDN həllərini müqayisə edən ayrı bir mənbəyimiz var.

Addım 4: Keşləmə

Heç bir veb sürət optimallaşdırma təlimatı, önbelleğe dair bir bölmə olmadan mövcud ola bilməz. Daha əvvəl müzakirə etdiyimiz bəzi texnikalar, məsələn GZip sıxılma və minificaiton, bu gün bir çox keş həllinin bir hissəsidir.

Keshləmə, ehtiyac olduqda tez bir zamanda əldə etmək üçün bir mənbənin müvəqqəti bir anbarda saxlanması fenomeninə aiddir. Öyrənmənin müxtəlif formaları var:

  • Səhifə önbelleği: Serverdə saxlanan bir səhifənin statik bir HTML versiyası
  • Verilənlər bazası önbelleği: serverdə saxlanan ümumi verilənlər bazası sorğularının nəticələri (məsələn, saytınızdakı ən yaxşı 10 yazı)
  • Brauzer önbelleği: Səhifənizin hissələrini brauzerdə saxlamaq

Bu yazıdakı ən populyar WordPress önbelleme plaginlərini müqayisə etdik. TL; DR: Gedin yoxlayın WP Roket tam həll yolu axtarırsınızsa. Alternativ olaraq, pulsuz bir şey istəsəniz, burada bir bələdçi var W3 Total Cache’i necə tənzimləmək olar.

Addım 5: Mobil üçün optimallaşdırın

Bu yazının əvvəlki hissələrində həm masa üstü, həm də mobil üçün uyğun optimallaşdırma üsullarını müzakirə etdik. Bununla birlikdə, mobil məzmunun istehlakı artır və daha kiçik bir ekranın gətirdiyi yeni çətinliklər var. Bu bölmə, beləliklə, mobil qurğular üçün veb sürət optimallaşdırma üsullarını müzakirə edir.

Mobil optimallaşdırma veb səhifənizdəki mobil ziyarətçilərin masaüstündəki həmkarları ilə eyni işləmə və səmərəliliyi təmin etməsi təcrübəsinə aiddir. Aşağıdakı siyahıda mobil qurğular üçün veb məzmununu kurasiya üçün müəyyən gigiyena amilləri var:

  • Fərqli cihazların bir veb səhifənin fərqli versiyalarını əldə etməsini təmin etmək üçün həssas veb dizaynından istifadə edin
  • Fləş və pop-lərin istifadəsindən çəkinin, çünki mobil qurğular bunu dəstəkləməyə bilər
  • Bir-birinə çox yaxın bağlantılar kimi qarşılıqlı əlaqələri yerləşdirməyin

Bu amillərə əlavə olaraq, AMP (Sürətlənmiş Mobil Səhifələr) qurğular arasında sürətli və ardıcıl olan məzmun yaratmağı hədəfləyən bir layihədir..

WordPress-də AMP ilə işə başlamaq üçün bir təlimat.


AMP

Müəllif (lər): AMP Layihə töhfəçiləri


74% Reytinqlər


500.000 + quraşdırır


WP 4.9 + tələb olunur

Daha çox məlumat

amp.1.5.3.zip

Cari versiya: 1.5.3

Son Yeniləmə: 15 aprel 2020


74% Reytinqlər


500.000 + quraşdırır


WP 4.9 + tələb olunur

WordPress.org Plugin Səhifə


AMP

Nəticə

Ümid edirəm bu təlimatda saytınızın veb sürətinin optimallaşdırılmasının ümumi səviyyəsini yaxşılaşdırmaq üçün nə etməli olduğunuz barədə bəzi tövsiyələr verilmişdir.

Yalnız yığmaq üçün; əvvəlcə yaxşılaşdırmaq üçün müəyyən sahələri həll etmək üçün bir veb səhifənin anatomiyasına baxdıq. Sonra optimallaşdırma üçün müəyyən addımlara keçdik:

  • Addım 1, stil cədvəlləri və skriptlər şəklində statik sənədlərin optimallaşdırılmasını əhatə etdi
  • Addım 2 həll edilmiş şəkillər və onların optimallaşdırılması
  • Addım 3, HTTP sorğularını optimallaşdırma üsulları haqqında idi
  • Addım 4, bir neçə populyar keşləmə üsullarını müzakirə etdi
  • Addım 5 mobil cihazların optimallaşdırılması

Veb sürətini optimallaşdırma məsələsinə gəldikdə çətinlik çəkdiyiniz bir şey varmı? Aşağıdakı şərhlərdə bizə bildirin.

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

Layihə, təqdimat və Karol K tərəfindən redaktə.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map