Veb saytın optimallaşdırılmasına dair bir başlanğıc kitabçası

Pexels'in görünüş nəzakəti.

Mən bir başlanğıcdayam və Google'un optimallaşdırma sıralamasında 99/100-ə nail ola bildim. Mən bunu edə bilərəmsə, siz də edə bilərsiniz.

Mənim kimi olsan, sən sübutu sevirsən. Beləliklə, Google-ın PageSpeed ​​Insights'ın hasslefreebeats üçün nəticələri, qoruduğum və son vaxtlarda optimallaşdırmağa bir müddət sərf etdiyim bir veb sayt:

Mənim PageSpeed ​​Insights hesabımın ekran görüntüsü.

Bu nəticələrlə olduqca qürur duyuram, ancaq bir neçə həftə əvvəl bir veb saytı necə optimallaşdıracağım barədə bir ipuçum olmadığını vurğulamaq istəyirəm. Bu gün sizinlə bölüşməli olduğum şey sadəcə çox sayda googling və problemlərin aradan qaldırılması, əziyyət çəkməyinizin nəticəsidir.

Bu məqalə, hər bir optimallaşdırma üçün alt hissələrə bölünmüşdür, əgər atlamaq istəyirsənsə.

Mən heç bir mütəxəssis deyiləm, amma əminəm ki, aşağıda göstərilən üsulları tətbiq etsəniz, nəticələr görərsiniz!

Şəkillər

Pexels'in görüntü nəzakəti (və mütləq Orta tərəfindən optimallaşdırılmışdır).

Bir başlanğıc veb-geliştirici olaraq, şəkillər heç ağlına gəlmədiyim bir şey deyildi. Veb saytıma yüksək keyfiyyətli şəkillər əlavə etməyimin daha peşəkar görünəcəyini bilirdim, amma səhifəmin yükləmə vaxtına təsirlərini düşünməyə heç vaxt davam etmirdim.

Şəkillərimi optimallaşdırmaq üçün etdiyim əsas şey onları sıxışdırmaq idi.

Geriyə baxanda, bu get-go-dən olduqca intuitiv olmalı idi, amma bu mənim üçün deyildi, bəlkə də sizin üçün deyil.

Şəkillərimi sıxışdırmaq üçün istifadə etdiyim xidmət, Optimizilla, şəkillərinizi yüklədiyiniz, istədiyiniz sıxılma səviyyəsini seçin və sonra sıxılmış görüntünü yüklədiyiniz istifadə üçün asan bir veb sayt idi. Bəzi mənbələrim üçün ölçü 70% -ə qədər azaldığını gördüm ki, bu da daha sürətli yüklənmə yollarına qədər uzun bir yol gedir.

Optimizilla çətin ki, görüntü sıxılma ehtiyacınız üçün yeganə seçimdir. İstifadə edə biləcəyiniz bəzi bağımsız, açıq mənbəli proqram Mac üçün ImageOptim və ya Windows üçün FileOptimizer-dir. Qurma alətlərindən istifadə edərək sıxışdırmaq istəsəniz, hiylə işlətməli olan Gulp və WebPack pluginləri var. Etdiyiniz qədər o qədər də əhəmiyyətli deyil. Performans qazancı minimal səy göstərməyə dəyər.

İstifadə vəziyyətinizdən asılı olaraq, fayllarınızın formatına baxmağa dəyər ola bilər. Ümumiyyətlə, jpg png-dən daha kiçik olacaq. Biri və ya digərini istifadə etməyimin əsas fərqi görüntünün arxasında şəffaflığa ehtiyacım olub-olmamasıdır: Şəffaflığa ehtiyacım varsa, mən png istifadə edirəm, əks halda jpg istifadə edirəm. Buradakı hər ikisinin müsbət və mənfi cəhətlərinə daha dərindən düşə bilərsiniz.

Ayrıca, Google olduqca şirin bir webp formatı ilə çıxdı, lakin hələ də bütün brauzerlərdə dəstəklənmədiyi üçün istifadə etməkdə tərəddüd edirəm. Gələcəkdə daha çox dəstək üçün diqqət edin!

Yuxarıda göstərdiyim nəticələr əldə etmək üçün şəkillərimi sıxmaqdan daha çox iş görmədim, amma daha da optimallaşdırmaq istəyirsinizsə burada əla məqalədir.

Video

Foto Pexels-dən Terje Sollie.

Mövcud layihələrimin heç birində video istifadə etməmişəm, buna görə də bu barədə ən yaxşı mənbə olduğumu hiss etmədiyim üçün bu barədə qısa danışacağam.

Bu, ehtimal ki, lehte ağır atletika etməyə imkan verdiyim vəziyyətlərdən biridir. Vimeo videoları qəbul etmək üçün əla platforma təklif edir, burada yavaş bağlantılar üçün video keyfiyyətini aşağı salacaq və performansını optimallaşdırmaq üçün videolarınızı sıxışdıracaq.

Videolarınızı Youtube-a yerləşdirə bilərsiniz və sonra videoları veb saytınızın ehtiyaclarına uyğunlaşdırarkən Youtube-dan yükləmək üçün bu youtube-dl alətindən istifadə edə bilərsiniz.

Digər mümkün həllər üçün Brightcove, Sprout və ya Wistia'ya baxın.

Gzip

Alın? Zip? Pexels'in görünüş nəzakəti.

Veb saytımı əvvəlcədən yerləşdirdiyim zaman gzipping nədir heç bir təsəvvürüm yox idi.

Uzun hekayə qısa, gzip, əksər brauzerlərin başa düşdüyü və istifadəçidən baş verdiyini bilməsini tələb etmədən pərdə arxasında işləyə bilən bir fayl sıxışdırma formatıdır.

Tətbiqinizi qəbul etdiyiniz yerdən asılı olaraq, gzipping, serverinizi onları göndərərkən gzip fayllarınızı istədiklərini təyin etmək üçün bir konfiqurasiya açarını atmaq qədər sadə ola bilər. Mənim vəziyyətimdə veb saytım bu seçimi təmin etməyən Heroku’da yer alır.

Göründüyü kimi, server kodunuzda dəqiq bir şəkildə kompressiya əlavə etmək üçün paketlər var ki, bu da yalnız bir neçə satır kod əvəzinə gzipping-in faydalarını yığmağa imkan verir. Bu sıxılma qurğusundan istifadə edərək Javascript və CSS paketlərimin ölçüsünü 75% azaltmağı bacardım.

Hosting xidmətinizin gzip seçimi təmin etdiyini yoxlamağa dəyər. Olmasa, gzipping-ni server tərəf koduna necə əlavə edəcəyinizə baxın.

Minifasiya

Pexels'in minifikasiya edilmiş ananas nəzakəti.

Minifasiya, funksiyasına təsir etmədən lazımsız simvolların silinməsi prosesidir (boşluq, yeni sətir işarələri və s.). Bu, internet üzərindən nəql etdiyiniz faylın ölçüsünü azaltmağa imkan verir. Kodunuzu pozmaq üçün də faydalıdır, bu hiyləgər hakerlərin təhlükəsizliyin zəif nöqtələrini aşkar etmələrini çətinləşdirir.

Bu günlərdə miniballaşdırma, ümumiyyətlə Webpack və ya Gulp və ya başqa bir alternativ ilə qurulma prosesinin bir hissəsi olaraq edilir. Bu qurma alətləri bir az öyrənmə əyrisi ola bilər, buna görə daha asan alternativlər axtarırsınızsa, Google HTML üçün HTML-Minifier, CSS üçün CSSNano və Javascript üçün UglifyJS tövsiyə edir.

Brauzer-Keshləmə

Brauzer məlumatları necə saxlayır, ancaq əldə edə biləcəyim qədər yaxındır. Pexels nəzakəti.

Statik faylları brauzerin ön yaddaşında saxlamaq, veb saytınızın sürətini artırmaq üçün, xüsusən də eyni müştəridən gələn ziyarətlərdə çox təsirli bir yoldur. Google mənə bildirməyincə, bəzi mənbələrimin serverimdən göndərdiyim HTTP cavabında başlıqların olmaması səbəbindən lazımi şəkildə əlaqə saxlanılmadığını bilmirdim.

Ev səhifəm yüklənəndən sonra serverimə bir musiqi pleyerində göstərilən bir dəstə mahnı haqqında məlumat almaq istənir. Bu veb saytdakı mahnıları çox tez-tez yeniləmirəm, buna görə istifadəçi veb səhifəmə girib, səhifələrini yüklədiklərini bir az daha sürətli hala gətirəcəksə, ziyarət etdikləri son vaxtdan eyni mahnıları görsəm, ağlıma gəlmir.

Bir performans artımı əldə etmək üçün, serverimin cavab obyektinə (Express / Node server) aşağıdakı kodu əlavə etdim:

res.append ("Cache-Control", "maksimum age = 604800000");
res.status (200) .json (cavab);

Burada etdiyim hər şey, bir həftədən sonra (millisaniyədə) mənbələri yenidən yükləmək lazım olduğunu söyləyən cavabım üçün bir önbelleğe nəzarət başlığını əlavə etməkdir. Bu faylları daha tez-tez yeniləsən, daha qısa bir yaş yaşı yaxşı bir fikir ola bilər.

Məzmun paylama şəbəkəsi

Bir CDN-in real həyatı, Pexels-in nəzakəti.

Məzmun paylama şəbəkəsi və ya CDN, bütün dünyadakı istifadəçilərə məzmununuza coğrafi olaraq daha yaxın olmağa imkan verən bir şəbəkədir. Bir istifadəçi Yaponiyadan böyük bir şəkil yükləməli olsa, ancaq serveriniz ABŞ-dadırsa, bu, Tokioda bir serveriniz olduğundan daha uzun sürəcəkdir.

Bir CDN, istifadəçinizin harada yerləşməsindən asılı olmayaraq, məzmununuzun daha tez yüklənməsinə imkan verən bütün dünyada yerləşən bir qrup proxy serverdən faydalanmaq imkanı verir.

Qeyd etmək istəyirəm ki, bir CDN tətbiq etməzdən əvvəl yuxarıda gördüyünüz nəticələrə nail ola bildim - sadəcə onları qeyd etmək istədim, çünki veb saytların optimallaşdırılması haqqında heç bir məqalə bunları qeyd etmədən tamamlanmaz. Bu pis oğlanlardan birini veb saytınızda görmək, dünya səviyyəli bir auditoriyaya sahib olmağı planlaşdırırsınızsa, vacibdir.

Bəzi populyar CDN-lərə CloudFront və CloudFlare daxildir.

Müxtəlif

Daha çox suyu sıxmaq üçün bir neçə daha çox məsləhət:

  • Saytınızın qəbul edilmiş işini artırmaq üçün əvvəlcə "yuxarıdan yuxarı" məzmunu yükləmək üçün veb saytınızı optimallaşdırın. Bunun ümumi yollarından biri açılış səhifəsində görünməyən tənbəl yükləmə şəkilləridir.
  • Tətbiqiniz HTML-ni göstərmək üçün Javascript-dən, məsələn bucaqlı və ya reaksiya ilə qurulmuş bir veb saytdan asılı olmayaraq, ssenarinizi etiketinizi HTML sənədinizin bədən hissəsinin altına yükləmək təhlükəsizdir. Bu, vaxtınıza interaktiv təsir göstərə bilər, buna görə də hər vəziyyət üçün tövsiyə edəcəyim bir DİQQƏT deyildir.

Nəticədə

Veb saytınızı optimallaşdırmağa gəldikdə bu aysberqin yalnız ucu. Qəbul etdiyiniz trafikin miqdarından və göstərdiyiniz xidmətdən asılı olaraq bir çox fərqli sahədə performans problemi ola bilər. Bəlkə daha çox serverə ehtiyacınız var, bəlkə daha çox operativ yaddaşa sahib bir serverə ehtiyacınız var, ola bilsin, üçlü yuva forması ilə düzəldilmiş bir sıra refaktorinq istifadə edə bilər - kim bilir?

Saytınızı sürətləndirməyə gəldikdə bir ölçülü uyğunluq yoxdur və nəticədə ölçmələrə əsaslanaraq vəziyyətiniz üçün ən yaxşı qərarlar qəbul etməlisiniz. Optimallaşdırmaya ehtiyac olmayan bir şeyi optimallaşdırmağa vaxt itirməyin. Çətinliklər tapmaq üçün saytınızın fəaliyyətini təhlil edin, sonra xüsusi olanlara hücum edin.

Bu məqalədə faydalı bir şey tapdığınıza ümid edirəm! Qeyd etdiyim kimi bu sahədə öyrənməyim üçün hələ çox şeyim var. Əlavə məsləhətlər və ya tövsiyələriniz varsa, onları aşağıdakı şərhlərdə buraxın!

Bu məqaləni bəyənmisinizsə, lütfən ona bir az məlumat verin və yoxlayın:

  • Kodlaşdırmağa başlayanda biləcəyim vasitələr
  • Kodlaşdırmağa başlayanda biləcəyim vasitələr: Yenidən baxıldı

Twitter-də mənə bir izahat verin.