Pradinis interneto svetainių optimizavimo vadovas

„Pexels“ įvaizdis malonus.

Esu pradedantysis ir sugebėjau pasiekti 99/100 „Google“ optimizacijos reitinge. Jei aš galiu tai padaryti, tu gali ir tu.

Jei esate panašus į mane, jums patinka įrodymai. Taigi, čia yra „Google“ „PageSpeed ​​Insights“ rezultatai be jokių problemų, svetainę, kurią palaikau ir neseniai praleidau optimizuodama:

Mano „PageSpeed ​​Insights“ balo ekrano kopija.

Aš labai didžiuojuosi šiais rezultatais, tačiau noriu pabrėžti, kad vos prieš porą savaičių nesuvokiau, kaip optimizuoti svetainę. Tai, ką šiandien turiu su jumis pasidalinti, yra tiesiog daugybė duomenų paieškos ir trikčių šalinimo, skausmo, kurio noriu jums nepagailėti.

Šis straipsnis yra suskaidytas į kiekvieno optimizavimo poskyrius, jei norite peršokti.

Aš jokiu būdu nesu ekspertas, tačiau esu įsitikinęs, kad įgyvendinę žemiau pateiktus metodus matysite rezultatus!

Vaizdai

„Pexels“ atvaizdas malonus (ir tikrai optimizuotas „Medium“).

Kaip pradedančiajam interneto kūrėjui, vaizdai nebuvo kažkas, į ką aš kada nors atkreipiau dėmesį. Žinojau, kad pridėjus aukštos kokybės vaizdus į savo svetainę ji taps profesionaliau atrodanti, tačiau niekada nesustojau svarstyti apie jų poveikį mano puslapio įkėlimo laikui.

Pagrindinis dalykas, kurį padariau optimizuodamas savo vaizdus, ​​buvo juos suglaudinti.

Žvelgiant atgal, tai turėjo būti gana intuityvu iš „get-go“, bet tai nebuvo skirta man, todėl galbūt tai nėra ir jums.

Paslauga, kuria naudojau savo paveikslėlių glaudinimą, buvo „Optimizilla“ - lengvai naudojama svetainė, kurioje įkeliate savo vaizdus, ​​pasirenkate norimą glaudinimo lygį ir tada atsisiųsite suglaudintą vaizdą. Mačiau, kad kai kurių mano išteklių dydis mažėja 70%, o tai eina ilgą kelią link greitesnio krovimo laiko.

„Optimizilla“ vargu ar yra vienintelis pasirinkimas jūsų vaizdų glaudinimo poreikiams. Kai kuri atskira, atvirojo kodo programinė įranga, kurią galite naudoti, yra „ImageOptim“, skirta „Mac“, arba „FileOptimizer“, skirta „Windows“. Jei norite glaudinti naudodami kūrimo įrankius, yra „Gulp“ ir „WebPack“ papildiniai, kurie turėtų padaryti apgaulę. Nesvarbu, kiek tu darai, tiek ilgai, kiek darai. Spektaklio laimėjimas yra vertas minimalių pastangų.

Atsižvelgiant į jūsų naudojimo atvejį, taip pat gali būti verta pažiūrėti į failų formatą. Paprastai tariant, JPG bus mažesnis nei PNG. Pagrindinis skirtumas, ar aš naudoju vieną, ar kitą, yra tas, ar man reikalingas skaidrumas už vaizdo: Jei man reikia skaidrumo, aš naudoju png, kitu atveju naudoju JPG. Čia galite pasinerti giliau į abiejų privalumus ir trūkumus.

Be to, „Google“ pasirinko gana gražų žiniatinklio formatą, tačiau kadangi jis dar nepalaikomas visose naršyklėse, aš nesiryžtu jo naudoti. Ateityje stebėkite tolimesnę paramą!

Aš ne tik padariau suglaudinęs savo vaizdus, ​​kad gaučiau rezultatus, kuriuos jums parodžiau aukščiau, bet jei norite toliau optimizuoti, tai puikus straipsnis.

Vaizdo įrašas

Nuotrauka Terje Sollie iš „Pexels“.

Niekada nenaudojau vaizdo įrašų jokiuose dabartiniuose projektuose, todėl paliesiu tai tik trumpai, nes nemanau, kad esu geriausias šaltinis tam.

Tai yra viena iš tų situacijų, kai greičiausiai leisdavau profesionalams sunkiai kilnoti. „Vimeo“ siūlo puikią vaizdo įrašų talpinimo platformą, kur jie pablogins vaizdo kokybę, jei bus lėtesni ryšiai, ir suglaudins jūsų vaizdo įrašus, kad būtų optimizuotas našumas.

Taip pat galėtumėte priglobti vaizdo įrašus „Youtube“ ir naudoti šį „youtube-dl“ įrankį, norėdami juos atsisiųsti iš „Youtube“, konfigūruodami vaizdo įrašus pagal savo svetainės poreikius.

Norėdami rasti kitų galimų sprendimų, patikrinkite „Brightcove“, „Sprout“ ar „Wistia“.

Džipas

Gauti? Pašto indeksas? „Pexels“ įvaizdis malonus.

Net neįsivaizdavau, koks yra čipinimas, kai iš pradžių diegiau savo svetainę.

Trumpai tariant, „gzip“ yra failų glaudinimo formatas, kurį supranta dauguma naršyklių ir kuris gali veikti užkulisiuose nereikalaujant vartotojo net žinoti, kad tai vyksta.

Priklausomai nuo to, kur laikote savo programą, čipinti gali būti taip paprasta, kaip apversti konfigūracijos jungiklį, kad nurodytumėte, jog norite, kad jūsų serveris „gzip“ failus išduotų juos. Šiuo atveju mano svetainė yra priglobta „Heroku“, kuri šios galimybės nenumato.

Kaip paaiškėja, yra paketų, į kuriuos reikia aiškiai įtraukti glaudinimą į savo serverio kodą, o tai suteikia galimybę naudotis „gipipping“ pranašumais mainais į tik kelias kodo eilutes. Naudodamas šią glaudinimo tarpinę programinę įrangą, aš galėjau 75% sumažinti „Javascript“ ir CSS rinkinių dydį.

Verta patikrinti, ar jūsų prieglobos paslauga teikia „gzip“ parinktį. Jei taip nėra, pažiūrėkite, kaip pridėti gipping prie jūsų serverio pusės kodo.

Mažinimas

Minesuotas ananasas, maloniai sutikus Pexels.

Mažinimas - tai nereikalingų simbolių pašalinimas iš kodo, nepažeidžiant jo funkcionalumo (tarpai, naujos eilutės simboliai ir pan.). Tai leidžia sumažinti failo, kurį vežate internetu, dydį. Tai taip pat naudinga užmaskuojant jūsų kodą, nes slaptiems įsilaužėliams tampa sunkiau aptikti silpnąsias saugumo vietas.

Šiomis dienomis smulkinimas paprastai atliekamas kaip kūrimo proceso dalis naudojant „Webpack“ ar „Gulp“ ar kitą alternatyvą. Tačiau šie konstravimo įrankiai gali turėti šiek tiek mokymosi kreivės, taigi, jei ieškote lengvesnių alternatyvų, „Google“ rekomenduoja HTML Minifier HTML, CSSNano CSS ir UglifyJS Javascript.

Naršyklės kaupimas

Ne visai taip, kaip naršyklė saugo duomenis, bet ji yra tokia artima, kaip aš galėjau gauti. Pagarbiai „Pexels“.

Statinių failų saugojimas naršyklės talpykloje yra labai efektyvus būdas padidinti jūsų svetainės greitį, ypač vykstant atgal tam pačiam klientui. Nežinojau, kol „Google“ man nepasakė, kad kai kurie mano ištekliai nebuvo tinkamai talpykloje, nes trūko HTTP atsakymo, kurį siunčiau iš savo serverio, antraščių.

Įkėlus mano pagrindinį puslapį, mano serveriui pateikiamas prašymas gauti duomenis apie daugybę dainų, kurios vėliau pateikiamos muzikos grotuve. Neatnaujinu dainų šioje svetainėje labai dažnai, todėl neprieštarauju, jei vartotojas ateina į mano svetainę ir mato tas pačias dainas iš paskutiniojo apsilankymo laiko, jei dėl to mano puslapis įkels jas šiek tiek greičiau.

Norėdama padidinti našumą, į savo serverio atsakymo objektą („Express / Node server“) pridėjau šį kodą:

res.append („Cache-Control“, „max-age = 604800000“);
res.status (200) .json (atsakymas);

Viskas, ką aš darau čia, prie savo atsakymo prideda talpyklos valdymo antraštę, kurioje sakoma, kad po savaitės (milisekundėmis) ištekliai turėtų būti persiųsti iš naujo. Jei atnaujinsite šiuos failus dažniau, gali būti tikslinga sutrumpinti maksimalų amžių.

Turinio platinimo tinklas

Realus CDN vaizdas, maloniai sutikus Pexels.

Turinio paskirstymo tinklas arba CDN yra tinklas, leidžiantis viso pasaulio vartotojams būti geografiškai artimesniems jūsų turiniui. Jei vartotojas turi įkelti didelį vaizdą iš Japonijos, bet jūsų serveris yra JAV, tai užtruks ilgiau nei tuo atveju, jei turėtumėte serverį Tokijuje.

CDN leidžia jums naudotis daugybe visame pasaulyje esančių įgaliotųjų serverių, leidžiančių greičiau įkelti jūsų turinį, nepaisant to, kur yra jūsų galutinis vartotojas.

Noriu pastebėti, kad man pavyko pasiekti aukščiau matomus rezultatus prieš įgyvendinant CDN - norėjau juos tiesiog paminėti, nes joks straipsnis apie svetainių optimizavimą nebus išsamus, jų neminint. Turite vieną iš šių blogų berniukų savo svetainėje, jei planuojate turėti pasaulinę auditoriją.

Kai kurie populiarūs CDN yra „CloudFront“ ir „CloudFlare“.

Įvairūs

Čia yra dar keli patarimai, kaip išspausti dar daugiau sulčių:

  • Optimizuokite savo svetainę, kad pirmiausia įkeltumėte „virš matomos ribos“ turinį, kad padidintumėte suprantamą savo svetainės našumą. Vienas įprastų būdų tai padaryti yra tingus įkelti vaizdus, ​​kurie nerodomi nukreipimo puslapyje.
  • Jei jūsų programa netaiko „Javascript“, kad būtų galima pateikti HTML, pvz., Svetainę, sukurtą naudojant „Angular“ arba „React“, greičiausiai saugu įkelti scenarijaus žymas HTML failo kūno dalies apačioje. Tačiau tai gali turėti įtakos jūsų interaktyviam laikui, taigi, tai NE technika, kurią rekomenduočiau kiekvienoje situacijoje.

Apibendrinant

Tai yra tik ledkalnio viršūnė, kai reikia optimizuoti savo svetainę. Priklausomai nuo srauto, kurį gaunate, ir jūsų teikiamos paslaugos, daugelyje skirtingų sričių gali atsirasti efektyvumo kliūčių. Gal jums reikia daugiau serverių, gal jums reikia serverio, turinčio daugiau RAM, galbūt jūsų trigubai įterpta kilpa galėtų panaudoti tam tikrą pertvarkymą - kas žino?

Pagreitinti jūsų svetainę nėra visiems tinkamo, todėl galų gale turėsite priimti geriausius sprendimus pagal savo situaciją, remdamiesi matavimais. Negaiškite laiko optimizuodami tai, ko nereikia optimizuoti. Išanalizuokite savo svetainės našumą, kad surastumėte kliūtis, tada puoškite konkrečiai.

Tikiuosi, kad šiame straipsnyje rasite ką nors naudingo! Kaip jau minėjau, šioje srityje dar turiu daug ko išmokti. Jei turite papildomų patarimų ar rekomendacijų, palikite juos komentaruose žemiau!

Jei jums patiko šis straipsnis, pateikite jam keletą patarimų ir patikrinkite:

  • Įrankiai, kurių norėčiau, kad būčiau žinojęs, kai pradėjau kodavimą
  • Įrankiai, kurių norėčiau, kad būčiau žinojęs, kai pradėjau kodavimą: Peržiūrėta

Taip pat leiskite man sekti „Twitter“.