Nopeus on käytettävyys.
Sanomaan tarkemmin, sivuston nopeus on tärkeä osa käytettävyyttä. Yksinkertaisin käyttöliittymä, jonka ihmisen mieli on koskaan luonut, ei tee mitään hyötyä, jos käyttäjä kuolee siihen aikaan, kun se latautuu.
Se siitä. Artikkeli on tehty ... Ok, joten siinä on paljon enemmän, mutta ensimmäinen lause on noin puolet siitä, mitä sinun tarvitsee tietää. Meidän on tehtävä verkkosivustojemme nopeasti.
Voisin käyttää paljon superlatiivisia ilmauksia kuten "nopea paeta" tai "erittäin nopea" tai jopa "nopeampi kuin ylinopeus", mutta ne olisivat riittämättömiä. On yksinkertaisempaa sanoa, että ei ole sellaista "liian nopeaa".
Meidän on otettava hetki puhua siitä, millainen nopeus viittaan. Lyhyesti sanottuna kaikki nopeus. Tarkemmin sanottuna kolmenlaisia nopeuksia:
Tämä olisi aika, jolloin kaikki tiedot ladataan käyttäjän laitteisiin. Tämä vaikuttaa ensisijaisesti Internet-yhteyden nopeuteen ja tiedostojen todelliseen kokoon.
Et voi tehdä paljon yhteyttä, mutta voit tehdä paljon tiedoston kokoa.
Kun tiedostot on ladattu, selaimen on käsiteltävä ja tehtävä ne. Kaikki tämä käsittely ja renderointi vaikuttavat siihen, kuinka hyvin koodisi on kirjoitettu, ja kaikki muu tapahtuu käyttäjän puhelimessa, tabletissa tai kannettavassa tietokoneessa / työpöydällä.
Ainoa asia, jota voit hallita, on oma koodi, mutta se on suuri ero.
Ja sitten on psykologinen tekijä. Nopeat verkkosivustot voivat näyttää ja tuntuvat hitaalta. Hitaita verkkosivustoja voidaan tehdä tuntemaan hieman nopeammin joitakin temppuja oikeudellisesti soveltamalla.
Tämä osa kertoo käyttäjältäsi ja antaa heille tietoja siitä, mitä tapahtuu heidän ollessaan vuorovaikutuksessa sivustossasi tai sovelluksessasi.
Sinun on kiinnitettävä huomiota kaikkiin kolmeen osaan sivuston nopeudesta, jotta sivustosi tuntuu, että se menee nopeasti. Ja mitä suurempi sivusto on, sitä enemmän optimoidaan.
Aloitetaan sitten.
Monta kertaa, varsinkin niissä pienemmissä kokeellisissa projekteissa, joita rakastan niin paljon, pidä itseni vievän enemmän aikaa CSS: ään kuin mihin tahansa muuhun osaan koodista. Usein on myös enemmän CSS kirjoitettu kuin HTML tai JavaScript. Joten, juuri siellä, on osoitus siitä, kuinka paljon CSS voi vaikuttaa tiedoston kokoon.
Sitten tietenkin on kysymys siitä, kuinka nopeasti sivustosi todella toimii käyttäjän työpöydällä, kannettavassa tietokoneessa, tabletissa tai puhelimessa. Suuri osa varsinaisesta "työstä" tai verkkosivujen tekemisestä tekee ohjelmiston, jossa on vähän apua GPU: lta.
Se voi ladata nopeasti, mutta selaa hitaasti. CSS: n kirjoittamasi tapa vaikuttaa suoraan siihen, kuinka nopeasti tietyn laitteen voi itse näyttää verkkosivun, kun tiedostot on ladattu.
Kun optimoidaan verkkosivusto nopeammin, CSS on yleensä hyvä paikka aloittaa.
CSS, joka istuu tyylisivustossasi ja joka ei tee mitään, tekee tiedostoista tarpeettoman suuremman. Okei, niin tämä saattaa tuntua kuin ei-aivot; mutta silti se tapahtuu parhaimmillaan.
Otat jonkin sisällön ja unohdat poistaa vanhan CSS: n. Voit muuttaa säiliöelementin luokkaa tai tunnusta ja unohtaa poistaa vanhan CSS: n. Kirjoitat jonkin CSS: n, huomaat, että on parempi tapa, ja unohda ... saat sen.
Heitä useisiin etupään kehittäjiin sekoitus, ja sinulla on resepti vaikeaa, hallitsematonta tyylisivua tai niiden kokoamista, jos et ole varovainen. Käyttämätön koodi hidastaa sivun lataamista sen olemassaolon vuoksi tietojen ansiosta. Se hidastaa kehitystä, koska se voi hämmentää henkilöitä, jotka lukevat tyylitaulukkoa.
Se voi myös tarkoittaa hitaampia renderointiaikoja, koska selain on vain enemmän CSS: ää, kun se vastaa kaikkia CSS: ää sen sopivaan HTML-elementtiin.
Olitpa sitten tarkistat ja poistanut kaikki vanhat CSS manuaalisesti, käytä automaattisia työkaluja, joiden avulla voit löytää käyttämättömät CSS-valitsimet tai vain poistaa asioita satunnaisesti, kunnes jotain katkeaa (älä tee sitä), sinun on otettava vanha koodi ulos.
Puhuminen siitä, miten selain vastaa CSS: ää sopivalla HTML: llä, on aika tarkastella CSS-valitsimia. Paljon on kirjoitettu siitä, mitkä valitsimet tekevät nopeimmin, mitkä ovat hitaita, haluatko häiritä hitaasti, ja niin edelleen.
Ongelmana on, että suuri osa näistä tiedoista on vanhoja. Vuoden 2000 lopussa Dave Hyatt (Safari-konsernin kehittäjä ja W3C: n CSS-työryhmän aktiivinen jäsen) kirjoitti tämän:
Surullinen totuus CSS3-valitsimista on se, että niitä ei todellakaan pitäisi käyttää lainkaan, jos välität sivun suorituskykyä.
Jos katsot asiakirja että lainaus tuli, näet, että hän puhui valitsimia, kuten : ensimmäinen lapsi ja muut näennäisvalitsimet. Ja hän oli oikeassa.
Hän on edelleen; mutta viimeksi kuluneiden 15 vuoden aikana tietokoneet ovat edenneet hieman. Nykyään tietokoneen edellyttämä ylimääräinen ponnistus CSS: n tekemiseksi ei pidä havaita kenenkään lukuun ottamatta niitä, jotka käyttävät edullisia halpoja mobiililaitteita.
Tämä on itsestään huolta, joten se todella riippuu käsiteltävänä olevasta projektista, kohderyhmätiedoista ja niin edelleen. Yksinkertaisesti sanotteko, käyttäkää parhaita mielipiteitänne ja ehkä älä ylitse yli näennäisvalitsimiin.
Muuten, paitsi jos sivusi ulottuvat kirjauspituudelle, käyttämiesi valitsimien pitäisi vaikuttaa hyvin vähän sivustosi tehokkuuteen. Tutustu kuitenkin yllä olevaan asiakirjaan ja tutustu siihen, mikä tekee nopeimmasta ja mitä ei. Saatat kuitenkin löytää hyödyllisiä tietoja.
Voit myös nähdä Tämä artikkeli CSS-Tricksista hieman uudempaan ottamiseen aiheesta.
Tietenkin myös CSS-ominaisuuksia, jotka kestävät pidempään kuin toiset. Klassiset ominaisuudet, kuten leveys, korkeus ja väri, ovat edelleen nopeimpia. Ne, jotka yleensä kestää vähän kauemmin (ja voivat vaihdella selaimesta selaimeen), ovat yleensä CSS3-ominaisuuksia, kuten laatikko-varjo.
Prosessin lisääminen pudotus varjon elementti on monimutkainen, niin kuin tekee verkkosivuja on kyse. Mielenkiintoista huomata on, kuten huomautettiin HTML5 Rocks , vaadittava prosessointiteho voi vaihdella suuresti riippuen pudotusvarjon erityisistä mitoista.
Tämä artikkeli osoittaa, että sama pätee myös muihin ominaisuuksiin, kuten raja-säteeseen ja muunnokseen.
Jälleen, niillä olisi vain vähäinen vaikutus keskimääräisen työpöydän tai kannettavan tietokoneen sivun tekemiseen. Matkapuhelimet saattavat kuitenkin saada isomman hittiä, ja kokemus voi kärsiä. Jokainen vihaa kimmeltävää rullausta.
Tämä on kuitenkin punnittava kustannuksia, joita käytetään kuvien tuottamiseen, jotta ne tuottaisivat saman vaikutuksen. Jokainen muistaa ne asiat, joita teimme pyöristettyjen kulmien löytämiseksi kerran kerrallaan?
Älä vain mene yli laidan, ja tyylisi pitäisi tehdä tarpeeksi nopeasti.
Nyt pääsemme muualle alueelle. CSS-animaatiot voivat olla loistavasti nopeita tai he voivat hidastaa selaimen siihen pisteeseen, että pelilaitteilla on vaikeuksia pysyä.
Tämä johtuu osittain siitä, että kaikki animaatiot eivät ole yhtä tasavertaisia. Jotkut raskaasta nostosta tehdään laitteistolla, kun taas muut animaatiot on luotava kokonaan selaimen omiin toimintoihin. Tämä on erityisen kallista mobiililaitteille.
Sisään toinen artikkeli HTML5 Rocksissa CSS-ominaisuudet, jotka ovat nopeimmin animoituja, ovat sijainti , asteikko , kierto ja opasiteetti.
Tutustu artikkeliin saadaksesi täydellisemmän yleiskuvan siitä, mitä voidaan animoitua ja pitää kustannukset alhaisina.
Tässä minä tarjoan sinulle käytännön neuvoja, joita minä, kirjailija, voi antaa sinulle. Käytä CSS-esikäsittelyohjelmia kuten LESS, SASS ja Stylus. Toki, jos käytät niitä väärin, voit luoda suurempia tyylejä kuin aiot; mutta mahdolliset hyödyt ovat sen arvoisia.
Jos esimerkiksi haluat vähentää palvelimelle tehtyjä HTTP-pyyntöjä (aina hyvä idea), sisällytä kaikki nollaukset, kehykset yhteen LESS / SASS-tiedostoksi. Kun se kokoaa, se kaikki on yksi tyylisivu. Lisäksi useimmat preprocessorit tarjoavat mahdollisuuden lähettää kaikki CSS minified muodossa.
Tällä tavoin voit käyttää niin monta eri tiedostoa, kuin tarvitset koodin järjestämiseen, ilman kohtuuttomia tiedostokokoa.
JavaScript voi olla todella hidas. Tarkemmin sanottuna JavaScriptilla voi olla paljon suora vaikutus nopeusyhtälön "käsittely" osaan kuin CSS. Mikä pahempaa, JS voi saada eksponentiaalisesti raskaampia tiedostokokoonpanon suhteen saavuttaakseen näennäisesti triviaaleja asioita.
Se on kaksinkertainen tuskallinen hitaus, ja käyttäjät ovat usein uhreja, erityisesti mobiiliselaimissa. Tämä ei kuitenkaan ole kielen vika. JS: n ruuhkautuminen on usein suoraan suhteessa ohjelmointiin liittyvään tietämättömyyteen.
En ole kehittäjä. Olen käyttänyt usein kirjastoja, kuten jQueryä tai yksittäisiä erillisiä JS-laajennuksia. Mitä enemmän minun on tehtävä, sitä enemmän lisäosia tarvitsen tehdä kaikesta toiminnasta. Nämä laajennukset ja kehykset tulevat lisävarusteilla ja ominaisuuksilla, joita en voi koskaan käyttää.
Siellä on kaistanleveyden varastaminen, juuri siellä.
Lisäksi laajennukset eivät ehkä toimi hyvin yhdessä. He saattavat hidastaa toisiaan alaspäin tai joku voi estää toisen työskentelemästä kokonaan.
Siellä on menetetty jalostusteho, juuri siellä.
Jos haluat todella nopeuttaa verkkosivustasi, ajele se millisekuntia (tai muutamassa sekunnissa), tässä on sinun tehtäväsi:
Kuten CSS, on parasta pitää JS ulkoisissa tiedostoissa ja liittää HTML-muotoon. Et ehkä usko, että se on niin iso juttu, jos sinulla ei ole paljon JS-koodia ja se lisää HTTP-pyyntöä, mutta tässä on asia: ulkoiset CSS- ja JS-tiedostot tallennetaan välimuistiin.
Joten kun pyydetään samaa sivua tai muita sivustosi sivuja, jotka käyttävät samaa CSS: ää tai JS: ää, pyydetään, että välimuistissa olevat ulkoiset tiedostot ovat käytössä sen sijaan, että niitä ladattiin uudelleen. Tämä nopeuttaa sivuston latausaikoja ja hieman nopeampaa käsittelyä. Kannattaa ottaa ylimääräinen puhelu palvelimelle joka kerta.
Pohjimmiltaan teoria menee näin: selain tekee mitä tahansa sivun lähdekoodin yläosassa. Siksi tagin kaltaiset asiat menevät lähelle.
JavaScript-tiedostot voivat kuitenkin hidastaa kaikkea pysäyttämällä selaimen tekemästä HTML-koodia, kunnes ne ladataan. Koska useimmat yleisesti käytetyistä JS-tehosteista ja lisäosista toimivat vain, kun loput sivusta on näytöllä, tämä on vähemmän kuin ihanteellinen.
Paranna käyttäjän kokemusta ja pienennä tuntemaa latausaikaa linkittämällä sivun alareunassa oleviin ulkoisiin tiedostoihin juuri ennen tunnistetta.
Kun käyttäjä pääsee vuorovaikutukseen minkä tahansa kanssa, joka vaatii JS: n, sen pitäisi olla valmis menemään.
Jos suunnittelet täysimittaista sovellusta, voit ja ehkä jäädä huomioimatta tämä osio. Hyvä, joustava ja kevyt kehys voi antaa kehittäjille valtavan reunan. Pienille ja keskikokoisille verkkosivustoille JavaScript-puitteet voivat kuitenkin olla ylikuormitusta. Näillä verkkosivuilla JS: ää käytetään eniten sisällönhallintatekniikan taustaohjelmassa. Etupäässä voi olla kuvan liukusäädin tai muurattu asennus tai kaksi. Jos olet todella hieno, saatat olla automaattinen täydennys hakupalkissa.
Suurin osa sisällöstä ei tarvitse kuvitella ja animoitua näin. JavaScriptin tulee olla mahdollisimman varhaisia käyttäjän kokemuksen parantamiseksi. Tukeutumalla siihen yksinkertaisesti melko sivustolla voi johtaa hidas, hidas sivusto, varsinkin mobiililaitteissa.
Jokseenkin kaikki koodikehykset ovat kaikki samat, olipa JavaScript, PHP, Python, HTML tai CSS: jokainen ominaisuus on joukko koodia. Kun valitset kehyksen tai plugin työpaikalle, kysy itseltäsi, aiotte käyttää kaikkia ominaisuuksia, joita se tarjoaa tai jopa useimmat niistä.
Jos ei, onko kehysmoduuli? Voitko valita ja valita vain tarvitsemasi osat? Jos näin on, ja uskot, että tiedostokoko on myötätuntoinen, niin kannattaa kaikin keinoin! Muussa tapauksessa paras käytäntö on nähdä, mitä voit ottaa enemmän kuin mitä voit tehdä.
Ei pysyvästi! Ajattele sitä tällä tavalla, onko sivustossasi sisältöä tai toimintoja JS: n piilossa? Voivatko ihmiset käyttää sitä ilman, että JS on käytössä selaimissaan?
Jos näin on, niin suuri. Jos kuitenkin ihmiset eivät näe tärkeitä tietoja, ota sinuun yhteyttä tai selaa oikein ilman JavaScriptia, niin sinulla on ongelma. Toki, voit luottaa siihen, että useimmat ihmiset saavat sen yhä käyttöönsä, mutta olet aina saanut nämä reuna-asiat.
Kuinka tämä liittyy sivuston nopeuteen? Kuvittele, kuinka hidas selaus saa, jos osa sivustostasi yhtäkkiä vain ei toimi.
Ei vakavasti, jos et ole kehittäjä ja sinulla on talousarvio yksi, mene yksi, jopa pieniä, yksinkertaisia töitä. Se on halvempaa pitkällä aikavälillä palkata joku kokenut tehdä sen oikein kerran.
Jos asiat menevät kauheasti vääriksi (ja puhumme tietokoneista täällä, jotain menee pieleen), he selvittävät, mikä meni nopeammin. Heillä on kokemusta tällaisten ongelmien löytämisestä ja niiden ratkaisemisesta. Jos ei muuta, heillä on paremmat Googlingin tietyt aiheet.
Tärkeintä on, että he osaavat tehdä, mitä on tehtävä vähemmän koodilla. Pienempi koodi (yleensä) toimii nopeammin ja (aina) lataa nopeammin. Se on yksinkertaisin neuvo, jonka voin antaa.
(Jos olet kehittäjä tai olet oppimassa, olen laatinut luettelon opetusohjelmista, jotka ovat tämän artikkelin alaosassa. Mukana on muutamia aloittelijan oppaita, jotka kirjoittavat JavaScriptin, joka toimii nopeasti.)
Kun otat videon yhtälöstä, suurin osa sisällöntuottavasta sivustosta on kuvia. Kuvat ovat yleensä suuria, suuria ja hidasta kuin helvetti, kun niitä ei ole optimoitu.
Nyt, kun verkkokalvonäytöt leviävät pakottamaan meitä käyttämään suurempia kuvia, jos haluamme, että asiat näyttävät hyviltä kaikissa laitteissa, ongelman ratkaiseminen ei ole helppoa. Ja vielä pahempaa, se on ongelma, joka on helppo unohtaa, kunnes pääset käyttämään kauemmin kaistanleveyttä.
Kun jokainen tavu laskee, meillä ei ole varaa unohtaa.
Hyvä uutinen on, että tämä ei ole mikään uusi ongelma. Miksi se on hyvä? Se tarkoittaa, että tarjolla on runsaasti mahdollisia ratkaisuja, ja voit käyttää useampaa kuin yhtä niistä kerrallaan. Itse asiassa se on yleensä hyvä idea.
Joten kunnes ISP: t ja hosting-yritykset alkavat antaa meille kaikille rajoittamattoman vapaan kaistanleveyden (älä pidä hengitystäsi), tässä on muutamia asioita, joita voit tehdä:
Yksinkertaisesti sanottuna, tee niin paljon kuin pystyt, visuaalisesti, CSS: llä ja JavaScriptilla, ennen kuin siirryt kuviaan. Koodi on aina halvempaa siirtää kuin kuvista, joten pidä siitä niin paljon kuin pystyt. Huolimatta CSS-pohjaisista pudotusvarjoista, kaltevuuksista ja vastaavista kuluttamasta prosessointitehosta, harkitse kompromisseja.
Muista myös, että SVG-kuvat laskevat tässä tapauksessa "koodina", koska ne ovat kaikki: XML-koodi, joka on kuvattu. Siksi niitä olisi käytettävä aina, kun tarvitset mitä tahansa vektoriin liittyvää.
Nyt palaten edellä mainittuihin verkkokalvonäyttöihin, mitä me teemme niiden suhteen? Miten voimme säästää kaistanleveyttä siellä?
Tässä kääntymme elementtiin ja kuva-asetettuun ominaisuuteen. Ne ovat suhteellisen uusia eikä niitä tueta täysin, mutta sallii selainten valita sopivan kuvan koon käytettäväksi laitteelle.
Joten kun tämä ei säästä sinua kaistanleveyttä, kun joku katselee sivustoasi iMacisssa, se ei ole niin suuri, että heillä on todennäköisesti laajakaista. Jotkut heidän puhelimellaan puolestaan saavat pienemmän version samasta kuvasta pitäen heitä odottamaan liian kauan.
Monien kuvakokoisten woes saada kiinteä, kun opit, mitä kuvamuotoa käyttää missä tahansa tilanteessa. Voisin jatkaa tiettyjä kuvaformaatteja, kuinka pakkaus toimii ja niin edelleen, mutta sinun tarvitsee vain muistaa muutamia asioita:
Se on todella kaikkea. Jos teet tämän ja pelat optimointiasetuksilla tallennettaessa kuvia, saatat usein saada melkoisen kunnollisen laadun suhteellisen pienillä tiedostokooilla.
Kuitenkin uusi muoto on nimeltään WebP, jota Chrome ja Opera tukevat automaattisesti. Google vaatimukset että WebP-tiedostot ovat 26% pienempiä kuin PNG: t ja 25-34% pienempiä riippuen useista tekijöistä.
Tämä on hieno uutinen paitsi kahta asiaa: Firefox ja IE. Nyt, jos et ole varma, että käytät takaisinkutsua ja ylimääräisen komentosarjan, voit käyttää WebP-muotoa nyt, tänään. Lataa vain WebPJS , ja olet hyvä mennä.
WebPJS käyttää JavaScriptia ja vähän Flashia ( huokaus ... mutta se on vain IE: lle), jotta se toimisi, mutta se toimii. Voit harkita sitä, jos sinun täytyy palvella paljon ja paljon suurempia kuvia nopeasti, sillä haittapuolena on, että se ei toimi ilman JS: ää.
Käytettävissäsi on kaksi erilaista pakkausta, joita voit käyttää kuvissa. Ensinnäkin meillä on häviöllinen pakkaus . Tätä käytetään häviöllisissä formaateissa, kuten JPEG. Sen avulla voit pakata minkä tahansa kuvan niin paljon kuin haluat ymmärtää, että laatu pahenee ja huonompi ja huonompi. Asiat saavat pikselin ja menettävät määritelmänsä.
Lossless-pakkausta käytetään PNG-formaateissa, ja ne voivat pienentää tiedostokokoa jossain määrin. Siinä on kuitenkin rajat. Tulee aina kohta, jossa on mahdotonta tehdä kuvaa pienemmäksi menettämättä laatua.
Jos sinulla on Photoshop tai jokseenkin edistyksellinen kuvankäsittelyohjelma, on usein parasta käyttää niitä pakkaamaan kuvia niin, että näet, miltä tuotos näyttäisi, kun olet valmis.
(Automaattiset työkalut, erityisesti online-työkalut, kokemuksessani, pyrkivät pakottamaan asioita ehkä hieman liian pitkälle. Olen kuitenkin luetellut parhaat pakkaustyökalut, jotka olen löytänyt alla olevasta linkistä.)
Jos käytät CMS: ää kuten WordPressia, se muuttaa automaattisesti liian suuria kuvia. On myös helppo löytää lisäosia, jotka pakkaavat ne automaattisesti sinulle.
Huomaa, että suosittelen automaattista pakkausta tapauksissa, joissa tiedät, että lataat paljon ja paljon samantyyppisiä kuvia samaan tarkoitukseen. Valokuvaposti on yksi esimerkki.
Jos käytät sivustoa, jossa käyttäjät lataavat omia kuvia, niin ... automaattinen koon muuttaminen ja pakkaaminen on ehdoton edellytys, ja siksi jokainen sosiaalinen verkosto tekee sen.
Tässä on pari bittiä neuvoja, jotka eivät sovi mihinkään edellä mainituista kolmesta luokasta.
"Minifying" koodi tarkoittaa vain sitä, että kaikki ylimääräiset tilat ja rivinvaihdot otetaan ulos. Tämä voi pienentää tiedostojen määrää huomattavasti.
Se saattaa kuulostaa paljon työtä, mutta siellä on työkaluja minimaalinen CSS ja JS automaattisesti, ja pitää minified tiedostot erikseen lähdetiedostot, melko ilmeisistä syistä.
Kuten aiemmin mainittiin, erilaiset CSS-esiprosessorit voivat tuottaa kaikki koodisi minimi- muotoisessa muodossa ensiksi.
Jos palvelimesi on asetettu oikein, kaikki koodisi voidaan lähettää selaimelle pakatussa muodossa. Tekstitiedostot pakkaa hyvin, mikä vähentää huomattavasti lähetettyjen tiedostojen kokoa.
Nyt palvelimesi on pakko purkaa tiedostot, jotka lähetetään, ja käyttäjän selain on pakko purkaa ne, mutta tämä on yleensä kaistanleveyden kompromissin arvoista.
Täydellinen selvitys siitä, miten tämä toimii, katso Miten optimoida sivustosi GZIP-pakkauksen avulla .
Selaimen välimuisti tapahtuu automaattisesti jonkin verran nykyaikaisten selainten ansiosta. Selaus menee sivustoon ja tallentaa tilapäisesti kuvat ja muut tiedot siellä.
Tällä tavoin, jos sama käyttäjä palaa tietyn ajan kuluessa, selaimen ei tarvitse kysyä samoja kuvia uudelleen. Se vain lataa ne, joilla on jo, ja pyytää uusia kuvia, joita sillä ei ehkä ole.
On kuitenkin jotain, mitä voit tehdä kertoa selaimille, mitä välimuistiin ja kuinka kauan, kuten nähdään tämä opas .
Ja sitten on palvelimen välimuisti. Palvelimen välimuistiinpano pohjimmiltaan vain vie sivustosi ja asettaa jonkinlaisen "kopion" sen käyttäjien ja todellisen palvelimen välillä. Miksi vaivaisit?
No, se on erityisen hyödyllinen ihmisille, jotka käyttävät suuressa mittakaavassa sisältöhallintajärjestelmiä. Kun käyttäjät pääsevät väliaikaiseen kopioon sivustostasi varsinaisen sijaan, se vähentää tietokantojen puhelujen määrää. Tiedot näytetään ja ladataan nopeammin, koska niitä ei tarvitse käsitellä uudelleen joka kerta.
Palvelimen välimuistin voi myös vähentää kaistanleveyden kustannuksia yleensä riippuen siitä, miten se on asetettu. Pohjimmiltaan sitä isompi sivustosi on, sitä enemmän syytä sinun on tutkittava sen välimuistiinpanoa.
Ja nyt osa jota olette odottaneet: linkkien luettelo! Meillä on ohjelmiin ja oppaita, lähinnä, ja muutaman kuvan pakkaus työkalut suositella.
Yahoo! ei välttämättä ole yhtä paljon kuin aiemmin, mutta kehittäjäverkostossa on paljon hyviä juttuja. Tämä sisältää heidän Parhaat käytännöt verkkosivustosi nopeuttamiseksi , joka kattaa joitain perusasioita, joita voit tehdä. Jotkut niistä kattavat saman kentän kuin tämä artikkeli, mutta on enemmänkin.
Johdannossa mainitsin havaitun paikan nopeuden, jota kutsutaan myös havaituksi suoritukseksi. Jos haluat lukea lisää siitä, tutustu Aloittelijan opas havaitulle suorituskyvylle: 4 tapaa saada mobiilisivusto tuntuu Native App .
Effeckt.css on joukko CSS-pohjaisia animaatioita, jotka on suunniteltu tekemään nopeita, riippumatta siitä, minkä käyttöympäristön käyttäjä on.
Tämä on opas sen varmistamiseksi, että selain on ladannut ja käsiteltävä CSS: stä mahdollisimman nopeasti.
Kun olet vasta aloittamassa, oppimalla koodin oikein voi olla yhtä suuri nopeus kuin mitä tahansa satunnaisesti vinkkejä temppuja saatat oppia. Huono koodi maksaa enemmän käsittelyaikaa, joten oppii tekemään asioita oikealla tavalla.
Tässä on a perusoppaasta joka keskittyy tarkemmin JavaScriptin kirjoittamiseen, joka kulkee nopeasti.
Aivan kuten otsikko sanoo, Tämä on kaikki ne kohdat, jotka kohdistuvat nimenomaan JavaScript V8: een.
Ja joskus, luultavasti pääset käyttämään jQueryä. Jos aiot tehdä sen, ainakin sinun pitäisi tietää, miten kirjoittaa jQuery valitsimia, jotka eivät hidasta sinua. Ja tässä missä Sitepoint on suojannut .
Lue tämä Lisätietoja web-kuvamateriaaleista. Tiedot ovat vähän vanhoja, mutta silti kelvollisia ja hyviä tietää.
Tämä on tekninen opas Google-kehittäjäverkoston tarjoamaan kuvan optimointiin.
Compressor.io on yksi vaikuttavimmista työkaluista, joita olen henkilökohtaisesti kohdannut. Se on online-sovellus, joten sinun on ladattava kaikki tiedostot, jotka haluat pakata, mutta se voi tehdä ihmeitä JPG-tiedostoille. Se tarjoaa sekä häviöllisiä ja häviöttömiä pakkausvaihtoehtoja, joista jokaisella on melko hämmästyttäviä tuloksia, ja se voi tehdä myös eräkäsittelyn.
Trimage on erikoistunut häviöttömään pakkaamiseen, mutta se voidaan asentaa omaan tietokoneeseen, Windows, Mac tai Linux. Koska se asennetaan tietokoneeseesi (ja kyllä, se sisältää useita komentorivivalintoja sekä graafista käyttöliittymää), sitä voidaan helposti käyttää osana kehitystyönkulkua.
Kuten aina, on paljon enemmän oppia. Mutta varustettuna antamistasi tiedoilla ja resursseilla, joihin olemme liittyneet, sinä olet matkalla sivustojen ja sovellusten rakentamiseen, jotka eivät ärsytä helvettiä käyttäjiltasi.
Ja se on ensimmäinen askel kohti niiden vaikutusta.