Staattiset sivustogeneraattorit ovat järjestelmiä, jotka kokoavat malleja staattisiksi HTML-sivuiksi. Jos se kuulostaa tehokkaalta - kyllä, niin se onkin. Palvelinta ei käsitellä tai hahmonneta, joten staattiset verkkosivustot ovat yleensä erittäin nopeita ja kevyitä, mikä säästää sinulle ja käyttäjillesi arvokasta aikaa ja kaistanleveyttä. Tämä lisääntynyt tehokkuus näkyy alhaisemmissa kustannuksissa ja mahdollisesti suuremmissa tuloissa.

WordPressin optimoinnista staattiseen

Tehokkaista tulontuottajista puhuen mieleen tulee WordPress. Se käyttää 28 prosenttia Internetistä ja on tehokas alusta, jolla on paljon hienoja ominaisuuksia, kuten laaja käyttäjä- ja sisällönhallinta, jota tukevat joukko laajennuksia, teemoja, sovellusliittymiä jne.

Jopa suuret toimijat toimialallamme käyttävät WordPress . Sivustot, kuten Smashing-lehti ja CSS-temppuja käytä WordPressiä, vaikkakin huomattavasti räätälöityjä instansseja molemmissa tapauksissa. Työskentely WordPressin kanssa voi kuitenkin olla työläs, varsinkin kun mukautetaan ja optimoidaan suorituskyvyn mukaan.

Aloitin pienen blogin jo vuonna 2015. Ensimmäinen vaistoni oli käyttää WordPressiä. Se antoi minulle pikakäynnistyksen, koska työskentelin jo WordPressin kanssa. Loin uuden pisaran DigitalOcean palvelimena, vakiintunut Vesta kuten Hosting Control Panel ja asentanut WordPressin blogialustana. Viime kädessä suunnittelin ja kehitin upouuden WordPress-teeman. Ainoa puuttuva asia oli sisältö.

Tiesin, että halusin jakaa vinkkejä Atomista, koska käytin tuohon aikaan tätä upeaa editoria. Julkaisin muutaman artikkelin siitä ja jaoin ne yhteisölle.

Aluksi en kiinnittänyt niin paljon huomiota suorituskykyyn, koska olin liian keskittynyt sisältöön. Jonkin ajan kuluttua huomasin joitain suorituskykyongelmia. Google PageSpeed ​​Insights -pisteet olivat surkeat, joten olen työskennellyt kovasti parantaakseni ja optimoidessani verkkosivustoani saavuttaen melkein täydellisen pistemäärän 99/100:

• Vaihdoin Nginx + Apache: sta Nginx + PHP-FPM: ään.

• Käytin CloudFlarea nopeuden ja suojauksen takaamiseksi.

• Käytin Cloudinaryä kuvien isännöimiseen.

• Muutin teemaani ja käytin Critical CSS: ää.

Ainoa varoitus koski Google Analyticsin välimuistiongelmaa, jota en tiennyt korjata tuolloin.

Mutta entä jos 99/100 tai 100/100 ei silti saa toivottua suorituskykyä? Siellä staattiset sivugeneraattorit pääsevät taisteluun.

Syötä Staattiset sivugeneraattorit ja Hexo

Joten mikä on staattinen sivustogeneraattori?

Kuten nimestä käy ilmi, staattinen verkkosivustogeneraattori on järjestelmä, joka tuottaa staattisia HTML-tiedostoja. Staattisten HTML-tiedostojen tarjoaminen on paljon nopeampaa kuin sivujen luominen lennossa. Palvelinta ei renderoida tai käännetä, mikä usein viivästyttää sivun lataamista.

Suorituskyvystä puhuttaessa on ajateltava välimuistia. Vaikka WordPressin välimuistiin tallentamiseen on useita tekniikoita, tämä ei ole yleensä yksinkertainen tehtävä, toisin kuin staattisten tiedostojen välimuistiin tallentaminen. Välimuistitiedostojen tarjoaminen on tehokkaampaa kuin varsinaisten tiedostojen tarjoaminen palvelimelta, ja se voi säästää aikaa verkkosivustoja ladattaessa.

Tämän vuoden kesäkuussa Vitaly Friedman Smashing-lehdestä esitteli JAMstack työpajassa minun kaupungissa. En ollut koskaan kuullut siitä, ja olin hyvin kiinnostunut. Seminaarin päätyttyä opiskelin tätä uutta konseptia vähän ja tajusin kuinka mahtava se on. Tajusin, että verkkosivustoni ei tarvitse WordPressiä.

Ensimmäinen askel oli päättää, mitä staattista sivugeneraattoria käyttää. En ollut tietoinen kuinka monta niitä on . Päätin antaa Hexo-blogi kehys yrittää. Se voidaan ottaa käyttöön Netlify , on laajennus WordPressistä siirtymiseen ja käyttää Node.js: ää, joka on tuttu, toisin kuin Jekyll ja Hugo, jotka perustuvat vastaavasti Rubyyn ja Go: iin. Ja kuten huomasin myöhemmin, se palaa nopeasti.

WordPressin siirtäminen Hexoon

Hexo-asennus on niin yksinkertaista kuin se voisi olla. Asentaa hekso-kli Suorita hekso-init komento, asenna npm-riippuvuudet ja voilà:

npm i -g hexo-cli hexo init cd npm install

Suorita siirto asentamalla hexo-migrator-wordpress-laajennus . Tämä laajennus odottaa XML-tiedostoja lähteenä. XML-tiedostot voidaan viedä WordPress-vientityökalun kautta, joka löytyy hallintapaneelin kohdasta Työkalut -> Vie -> Wordpress . Kirjoita lopuksi hekso siirtyä komento lopettaa tuonti.

hexo migrate wordpress

Ainoa tehtävä jäljellä on tarkistaa tulos. Suorita heksopalvelin Käynnistä palvelin ja avaa selain annetulla osoitteella.

hexo server

Markdown ja sen rajoitukset

Hexo tukee Markdownia laatikosta. Markdown on merkintäkieli joita monet käyttävät muotoilemaan README-tiedostoja, kommentteja ja viestejä. Mutta sitä voidaan käyttää myös artikkelin kirjoittamiseen. Sen syntakse on intuitiivinen ja helppo oppia.

Toinen etu Markdownille on, että se luo puhtaan ja kelvollisen HTML: n. Tämän avulla kehittäjät voivat luoda puhtaita ja ylläpidettäviä CSS-sääntöjä blogiartikkeleiden ja -sivujen muotoiluun.

Kehittäjän elämä ei ole koskaan helppoa. Meillä on usein ongelmia, jotka voivat saada meidät käyttämään aikaa odottamattomiin asioihin. Jos opimme jotain matkan varrella, emme tuhlanneet tätä aikaa, ja se on hyvä asia. Sama tapahtui minulle. Luulin, että kaikki meni hyvin, koska kääntövirheitä ei ollut, mutta huomasin sitten, että jotkut asiat eivät toimineet odotetulla tavalla.

Esimerkiksi Codepen-demot eivät lataudu. Etsin Hexo-laajennusta ja löysin sen. Valitettavasti tämä kytkeä ei ollut virallinen, ja se aiheutti HTML-virheitä, joita ei voitu hyväksyä. Halusin osallistua ja korjata ongelmat, mutta viimeisin vetopyyntö oli ratkaisematta yli puolitoista vuotta. Päätin, että on helpompaa haastaa arkisto, korjata ongelmat ja julkaista laajennus Hexo-sivulla, jotta kuka tahansa voisi käyttää sitä. Laajennus hyväksyttiin, päivitin sisältöä, ja Codepen-demot toimivat kuin viehätys.

Vastaavia ongelmia esiintyi CanIUse-upotuksissa. Nyt kun tiesin luomaan Hexo-laajennuksen, ei ollut mitään tekosyitä olla tekemättä sitä. Minun hexo-caniuse-laajennus julkaistiin myös, samoin kuin minun hekso-pilvinen laajennus Cloudinary CDN: stä ladattuihin reagoiviin kuviin.

Uudelleen suunnittelu ja optimointi

Sivuston suunnittelu on melko perustavaa laatua. Hexo tarjoaa kourallisen aiheita ilmaiseksi virallisilla verkkosivuilla, mutta halusin ainutlaatuisen teeman Hexo-sivustolleni. Kun olen lukenut dokumentointi ja oppinut Hexon räätälöinnin, aloin kehittää alkuperäisen teeman tyhjästä.

Uuden mallin luomiseksi päätin käyttää EJS mallinnusta varten . En ole koskaan työskennellyt EJS: n kanssa, ja näin sen mahdollisuutena oppia uuden mallin syntaksin. Jos et pidä EJS: stä, Hexo tarjoaa sinulle Huikka , Haml tai mopsi tuki laajennusten kautta.

Uudelleen suunnitteluprosessin aikana kiinnitin erityistä huomiota suorituskykyyn. Noudattamalla parhaita käytäntöjä voimme nopeuttaa staattista verkkosivustoamme entisestään. Sijoittamalla JavaScript-tiedostot asiakirjan alaosaan ja käyttämällä Kriittinen CSS-tekniikka luo parhaan kokemuksen yleisöllesi.

Hakukoneoptimoinnin optimointi on ratkaisevan tärkeää blogin näkyvyyden kannalta hakukoneissa, kuten Google. Hexolla on sisäänrakennettu auttaja Open Graph -tietojen lisäämiseksi. Hexo käyttää YAML-tiedostoja sivuston ja teeman kokoonpanon tallentamiseen. Käytin teeman kokoonpanotiedostoa sivuston nimen, kuvauksen ja erilaisten sosiaalisten tunnusten määrittämiseen.

Gulpin tai Webpackin lisääminen rakennusprosessiin on aina hyödyllistä ja suositeltavaa. Käytin Gulpkia CSS- ja JavaScript-tiedostojen minimointiin ja pakkaamiseen, ja kaikki oli valmis. Voisin ottaa sen käyttöön.

Netlify

Netlify on alusta, joka tarjoaa verkkosivustojen ja sovellusten isännöinnin huippuluokan suorituskyvyllä. Se markkinoi itseään yhtenäisenä alustana, joka automatisoi koodin tehokkaiden ja helposti ylläpidettävien verkkosivustojen luomiseksi.

Syötä vain koodisi ja anna meidän hoitaa loput.

Kuten voit odottaa, verkkosivuston määrittäminen on helppoa:

1. Määritä verkkotunnus.

2. Muuta DNS-tietueita.

3. Määritä koontiversio ja käyttöönotto.

4. Ota SSL käyttöön.

Kun kaikki oli asetettu, suoritin kourallisen perustestejä nähdäksesi tulokset, mukaan lukien Pingdom-verkkosivuston nopeustesti , Verkkosivutesti ja Testomasivusto.io . Tulokset olivat erinomaisia, koska sivusto sai korkeimmat pisteet jokaisesta työkalusta.

CloudFlare

Erinomaisista pisteistä huolimatta halusin kokeilla CloudFlarea vain nähdäksesi kuinka paljon se nopeuttaisi verkkosivustoa lisäksi. CloudFlare voi olla aluksi ylivoimainen, mutta sen käytön oppiminen on olennaista. Kun olen määrittänyt CloudFlare-sovelluksen, toistan testit uudelleen ja tulokset olivat vielä parempia.

Viimeinen testi oli Google PageSpeed ​​Insights . Pisteet olivat lähes 100% sekä mobiiliversioissa että tietokoneissa. Ongelma oli Google Analytics -selaimen välimuisti. Onnistuin korjaamaan ongelman käyttämällä CloudFlare -sovellusta Google Analyticsille.

Paljonko se maksaa?

Hexon käyttäminen Netlifyssä CloudFlaren kanssa ei maksa mitään.

Hexo on avoimen lähdekoodin alusta, joten se on ilmainen riippumatta siitä, miten päätät käyttää sitä. Sillä on suuri yhteisö, ja se on kolmanneksi suosituin avoimen lähdekoodin staattisten sivujen generaattori StaticGenin mukaan.

Netlifyllä on avoin suunnitelma, joka tarjoaa meille upeat vaihtoehdot isännöinnillemme. Kuvia isännöidään myös Cloudinaryn avoimessa suunnitelmassa. CloudFlaren ilmaisen suunnitelman avulla voimme määrittää suuren määrän sääntöjä, jotka voivat nopeuttaa jo nopeaa verkkosivustoasi. Sen avulla voimme myös korjata Google Analytics -selaimen välimuistiongelman. En myöskään maksanut verkkotunnuksesta, koska käytin hallituksen tarjoamaa ilmaista henkilökohtaista verkkotunnusta.

Tämä projektiasetus vähensi budjettini minimiin. Jos tarvitset kehittyneempiä ominaisuuksia projektiin, staattinen sivugeneraattori voi silti säästää muutaman dollarin.

Välimuistitiedostojen tarjoaminen tarkoittaa, että suorittimen ja kaistanleveyden käyttö vähenee, mikä puolestaan ​​tarkoittaa, että voit käyttää halvempia hosting-suunnitelmia vähemmän tehokkailla laitteilla. Paitsi että verkkosivustosi on paljon nopeampi, mikä tarkoittaa, että käyttäjät nauttivat selaamisesta sekä mobiililaitteilla että työpöydillä. Ja koska sivun latausnopeus voi vaikuttaa Google-hakusijoituksiin, verkkosivustosi sijoittuu korkeammalle ja saa lisää kävijöitä.

Kaikki tämä tarkoittaa, että voit käyttää osan budjetistasi muualle - esimerkiksi verkkosivustosi mainostamiseen tai lisäsisällön luomiseen, mikä auttaa saamaan hieman enemmän tuloja.

Staattisten sivustojen generaattoreiden tapaus

Siirtyminen WordPressistä staattiseen sivugeneraattoriin ei ole yksinkertainen tehtävä, eikä se varmasti ole jokaisen WordPress-käyttäjän tehtävä. Hexo teki kuitenkin tämän siirtymän suhteellisen kivuttomaksi laajennusten, erinomaisen dokumentoinnin ja yksinkertaisen sovellusliittymän ansiosta.

Ennen kuin päätät, haluatko siirtää tuotteesi staattiseen ratkaisuun, sinun on tiedettävä staattisten sivugeneraattoreiden rajoitukset, kuten sisällön rajoitukset, Markdown-oppimiskäyrä ja versionhallinta.

Sinun tulisi myös olla tietoinen siitä, että Hexo on blogikehys. Se on täydellinen kehittäjille ja tekniikan ihmisille, jotka osaavat käyttää tekstieditoria ja päätelaitetta. Jos haluat käyttää web-käyttöliittymää sisällön hallintaan, on olemassa laajennus, joka tarjoaa myös tämän toiminnon. Sitä kutsutaan hexo-admin ja se on melko suosittu.

Jos käytät jo WordPressiä, sinun tulee lopettaa ja miettiä, mitä WordPressin ominaisuuksia käytät tällä hetkellä ja mitkä ovat välttämättömiä. Onko sinulla monimutkainen sisältörakenne? Käytätkö käyttäjän hallintaa? Käytätkö paljon laajennuksia WordPress-instanssissasi ja tarvitsevatko ne kaikki? Oletko tyytyväinen sivustosi suorituskykyyn?

Jos vastaus useimpiin tai kaikkiin näihin kysymyksiin on ei, olet valmis lataamaan verkkosivustosi staattisella sivugeneraattorilla. Käyttötapauksesta ja vaatimuksistasi riippuen staattiset sivut voivat auttaa maksimoimaan tehokkuuden ja minimoimaan kustannukset. Jos toisaalta tarvitset joustavuutta WordPressille, et todennäköisesti edes harkitse tällaista siirtoa.

Perustietojen ymmärtäminen

Mikä on dynaaminen sivusto?

Kuten nimestä voi päätellä, dynaaminen sivusto luodaan dynaamisesti, lennossa taustapuolella, palvelimilla. Tämä tarkoittaa, että jokaiselle pyynnölle luodaan sivu, joka ei ole optimaalinen suorituskyvyn kannalta.

Mitä staattinen verkkosivusto tarkoittaa?

Toisin kuin dynaaminen sivusto, staattinen verkkosivusto palvelee vain staattisia tiedostoja. Kun käyttäjä esittää pyynnön, staattinen tiedosto toimitetaan palvelimelta ilman taustalogiikkaa.

Mikä on staattinen sivustogeneraattori?

Staattinen sivustogeneraattori on järjestelmä, joka luo staattisia tiedostoja malleista. Lopullinen tulos on kokoelma HTML-sivuja, joissa on resursseja, usein CSS- ja JavaScript-tiedostoja.