Aloittelijan opas verkkosivujen optimointiin

Kuva: Pexels.

Olen aloittelija ja pystyin saavuttamaan arvon 99/100 Googlen optimointisuosituksessa. Jos voin tehdä sen, voit myös.

Jos olet kuin minä, pidät todisteista. Joten tässä on Googlen PageSpeed ​​Insights -tulokset hasslefreebeats-sivustosta, jota ylläpitäin ja vietin hiljattain jonkin aikaa optimoimalla:

Kuvakaappaus PageSpeed ​​Insights -pisteistä.

Olen aika ylpeä näistä tuloksista, mutta haluan painottaa, että minulla ei ollut pari viikkoa sitten aavistustakaan verkkosivuston optimoinnista. Se mitä minun on jaettava teille tänään, on yksinkertaisesti seurausta paljon googlingista ja vianetsinnästä, kipuista, jotka haluan säästää.

Tämä artikkeli on jaoteltu alajaksoihin jokaiselle optimoinnille, jos haluat hypätä.

En ole mitenkään asiantuntija, mutta olen varma, että jos käytät alla olevia tekniikoita, näet tuloksia!

kuvat

Kuva: Pexels (ja Medium on varmasti optimoinut sen).

Aloittelijana web-kehittäjänä kuvat eivät olleet asioita, joihin olen aina kiinnittänyt paljon huomiota. Tiesin, että lisäämällä korkealaatuisia kuvia verkkosivustolleni se näyttää ammattimaisemmalta, mutta en ole koskaan luopunut pohtimasta niitä vaikutuksia, joita heillä olisi sivuni latausaikaan.

Tärkein tehtäväni kuvien optimoimiseksi oli pakata ne.

Tämän taaksepäin katsotun olisi pitänyt olla melko intuitiivista alusta lähtien, mutta se ei ollut minulle, joten ehkä se ei ole sinulle.

Kuvien pakkaamiseen käytetty palvelu oli Optimizilla, helppokäyttöinen verkkosivusto, jossa lataat kuviasi, valitset haluamasi pakkaustason ja lataat sitten pakatun kuvan. Näin, että joidenkin resurssien kohdalla koko pienenee 70% ylöspäin, mikä kulkee PITKÄNTEKIJÄTA kohti nopeampia latausaikoja.

Optimizilla on tuskin ainoa valinta kuvan pakkaustarpeisiisi. Jotkut erillinen avoimen lähdekoodin ohjelmisto, jota voit käyttää, on ImageOptim Macille tai Windows FileOptimizer. Jos haluat kompressoida rakennustyökaluilla, on Gulp- ja WebPack-laajennuksia, jotka pitäisi tehdä temppu. Sillä ei ole väliä kuinka paljon teet, niin kauan kuin teet. Suorituskyvyn voitot ovat hyvin pienen vaivan arvoisia.

Käyttökohteestasi riippuen, voi olla myös syytä tarkastella tiedostojesi muotoa. Yleisesti ottaen jpg tulee olemaan pienempi kuin png. Tärkein ero käytettäessäni yhtä vai toista on se, tarvitaanko kuvan läpinäkyvyyttä: Jos tarvitsen läpinäkyvyyttä, käytän png: tä, muuten käytän JPG: tä. Voit sukeltaa syvemmälle molempien etuihin ja haitoihin täällä.

Lisäksi Google on julkaissut melko suloisen webp-muodon, mutta koska sitä ei tueta vielä kaikissa selaimissa, olen epäröivä käyttää sitä. Pidä silmällä lisätukea tulevaisuudessa!

En tehnyt muuta kuin pakkaamaan kuviani saadaksesi yllä esitetyt tulokset, mutta jos haluat optimoida edelleen, tässä on hieno artikkeli.

Video

Kuva Terje Sollie Pexelsiltä.

En ole käyttänyt videota missään nykyisessä projektissani, joten kosketan tätä vain lyhyesti, koska en tunnu olevani paras resurssi tähän.

Tämä on yksi niistä tilanteista, jossa annan todennäköisesti ammattilaisten tehdä raskas nosto. Vimeo tarjoaa erinomaisen alustan videoiden ylläpitämiselle, jossa ne heikentävät videon laatua hitaammille yhteyksille ja pakkaavat videoitasi suorituskyvyn optimoimiseksi.

Voit myös isännöidä videoitasi Youtubessa ja ladata ne sitten YouTube-dl-työkalulla tämän Youtube-palvelun avulla määrittäessäsi videot verkkosivustosi tarpeisiin.

Muita mahdollisia ratkaisuja varten tarkista Brightcove, Sprout tai Wistia.

gzip

Hanki se? Postinumero? Kuva: Pexels.

Minulla ei ollut aavistustakaan, mitä gzipping oli, kun aloitin verkkosivustoni käytön.

Pitkä tarina, gzip on tiedostomuoto, jonka useimmat selaimet ymmärtävät ja joka voi kulkea kulissien takana edellyttämättä, että käyttäjä edes tietää sen tapahtuvan.

Riippuen sovelluspaikan isäntäkohdasta, gzippaus voi olla yhtä helppoa kuin asetuskytkimen kääntäminen sen määrittämiseksi, että haluat palvelimesi gzip-tiedostoja lähettäessäsi niitä. Minun tapauksessani verkkosivustoni isännöi Herokua, joka ei tarjoa tätä vaihtoehtoa.

Kuten osoittautuu, on olemassa paketteja, jotka lisäävät pakkauksen nimenomaisesti palvelinkoodiin, jonka avulla voit hyödyntää gipping-hyötyjä vain muutaman koodirivin vastineeksi. Tätä pakkauksen väliohjelmaa käyttämällä pystyin vähentämään Javascript- ja CSS-kimppujen kokoa 75%.

Kannattaa tarkistaa, tarjoaako isännöintipalvelutesi gzip-vaihtoehdon. Jos näin ei ole, katso miten lisätä gzipping palvelinpuolen koodiin.

Pienennetty

Minimoitu ananas ansaitsee Pexelsin.

Pienennys on prosessi, jolla poistetaan tarpeettomat merkit koodista vaikuttamatta sen toimintoihin (välilyönti, uuden rivin merkit ja niin edelleen). Tämän avulla voit pienentää Internetissä siirrettävän tiedoston kokoa. Se on hyödyllinen myös koodin hämärtämisessä, mikä hankalille hakkereille vaikeuttaa turvallisuuden heikkouksien havaitsemista.

Nykyään jauhaminen tehdään yleensä osana rakennusprosessia Webpackin tai Gulpin tai jonkin muun vaihtoehdon kanssa. Näillä rakennustyökaluilla voi kuitenkin olla hieman oppimiskäyrä, joten jos etsit helpompia vaihtoehtoja, Google suosittelee HTML-minifier HTML: lle, CSSNano CSS: lle ja UglifyJS Javascriptille.

Selaimen välimuistiin

Ei aivan kuinka selain tallentaa tietoja, mutta se on niin lähellä kuin voisin saada. Kohteliaisuus Pexelsistä.

Staattisten tiedostojen tallentaminen selaimen välimuistissa on erittäin tehokas tapa lisätä verkkosivustosi nopeutta, etenkin saman asiakkaan palautuskäyntien yhteydessä. En tiennyt, ennen kuin Google kertoi minulle, että joitain resurssejani ei ollut välimuistissa asianmukaisesti, koska palvelimelta lähettämästäni HTTP-vastauksesta puuttuivat otsikot.

Heti kun kotisivuni on ladattu, palvelimelleni pyydetään hakemaan tietoja joukosta kappaleita, jotka sitten esitetään musiikkisoittimessa. En päivitä tämän verkkosivuston kappaleita kovin usein, joten en välitä siitä, jos käyttäjä tulee verkkosivustolleni ja näkee samat kappaleet viimeisimmästä vierailustaan, jos se tekee sivustani hieman nopeamman lataus heille.

Suorituskyvyn parantamiseksi lisäsin seuraavan koodin palvelimeni vastausobjektiin (Express / Node server):

Res.append ("Cache-Control", "max-age = 604800000");
res.status (200) .json (vastaus);

Ainoa, mitä teen täällä, on välimuistin hallintaotsikon liittäminen vastaukseesi, jossa sanotaan, että viikon kuluttua (millisekunnissa) resurssit tulisi ladata uudelleen. Jos päivität näitä tiedostoja useammin, lyhyempi enimmäisikä voi olla hyvä idea.

Sisällön jakeluverkosto

Tosielämän kuva CDN: stä, Pexelsin luvalla.

Sisällönjakeluverkko tai CDN on verkko, jonka avulla käyttäjät ympäri maailmaa voivat olla maantieteellisesti lähempänä sisältöäsi. Jos käyttäjän on ladattava suuri kuva Japanista, mutta palvelimesi on Yhdysvalloissa, tämä vie kauemmin kuin jos sinulla olisi palvelin Tokiossa.

CDN: n avulla voit hyödyntää joukko välityspalvelimia, jotka sijaitsevat ympäri maailmaa, jolloin sisältösi voidaan ladata nopeammin riippumatta siitä, missä loppukäyttäjäsi sijaitsee.

Haluan huomata, että pystyin saavuttamaan yllä näkemäsi tulokset ennen CDN: n käyttöönottoa - halusin vain mainita ne, koska mikään verkkosivustojen optimointia käsittelevä artikkeli ei olisi täydellinen mainitsemmatta niitä. Yksi näistä pahoista pojista verkkosivustollasi on välttämätöntä, jos suunnittelet yleisöä maailmanlaajuisesti.

Joitakin suosittuja CDN-levyjä ovat CloudFront ja CloudFlare.

sekalainen

Tässä on vielä muutama vinkki puristaaksesi vielä enemmän mehua:

  • Optimoi verkkosivustosi ladataksesi sivun yläosan sisällön ensin lisätäksesi sivustosi havaittua suorituskykyä. Yksi yleinen tapa tehdä tämä on laiska ladata kuvia, jotka eivät näy aloitussivulla.
  • Ellei sovelluksesi edellytä Javascriptiä HTML: n, kuten Angular tai React, rakentaman verkkosivuston tuottamiseksi, on todennäköistä, että lataat skriptitunnisteesi HTML-tiedostosi runko-osan alaosaan. Tämä saattaa kuitenkin vaikuttaa vuorovaikutteisuuteen, joten se ei ole tekniikka, jota suosittelen jokaisessa tilanteessa.

Tiivistettynä

Tämä on vain jäävuoren huippu verkkosivustosi optimoinnissa. Vastaanottamasi liikenteen määrästä ja tarjoamastasi palvelusta riippuen suorituskyvyn pullonkaulat saattavat olla monilla alueilla. Ehkä tarvitset enemmän palvelimia, ehkä tarvitset palvelimen, jolla on enemmän RAM-muistia, ehkä kolmoissisähköinen silmukka voi käyttää refaktorointia - kuka tietää?

Sivustosi nopeuttamisessa ei ole yhdenmukaista, ja lopulta sinun on tehtävä mittasuhteiden perusteella parhaat tilannettasi koskevat päätökset. Älä tuhlaa aikaa optimoimalla jotain, jota ei tarvitse optimoida. Analysoi sivustosi suorituskykyä löytääksesi pullonkaulat ja hyökkää sitten niitä vastaan.

Toivon, että löysit jotain hyödyllistä tästä artikkelista! Kuten mainitsin, minulla on vielä paljon opittavaa tällä alalla. Jos sinulla on muita vinkkejä tai suosituksia, jätä ne alla oleviin kommentteihin!

Jos pidit tästä artikkelista, anna sille joitain claps ja tutustu:

  • Työkalut, joita haluaisin, että olisin tiennyt siitä, kun aloitin koodauksen
  • Työkalut, joita toivon, että olisin tiennyt koodauksen aloittamisen yhteydessä: Käynnistetään uudelleen

Antakaa minulle seurata myös Twitterissä.