Internetin luomisen jälkeen keskimääräiset tiedostokoot ovat kasvaneet tasaisesti. Mitä kilobyteistä lähtien on edennyt megatavuina (kyllä, monikossa), ja tiedostomme ovat vain kasvaneet.
Vaikka tämä ilmiö ei ole ensi silmäyksellä häpeällistä, sen vaikutus suorituskykyyn ja ylläpidettävyyteen on kauheaa. Lisää vanhoja laitteita, kaistanleveyden rajoituksia tai hitaita nopeuksia yleensä ... ja meillä on paljon suurempi ongelma.
Onneksi meillä ei ole vain tiedostokokoelmia, vaan myös selaimen sivujen selaamista. Tällainen ohjaus antaa web-kehittäjille itselleen mahdollisuuden helpottaa tätä ongelmaa ja optimoida koodimme paremman suorituskyvyn prosessissa.
Olen täysin ymmärtänyt kiinnostuksen puute, kun useimmat Internet-yhteydet Yhdysvalloissa ovat melko nopeasti näinä päivinä. Tarkoitan, jos kaikki toimii hyvin jo, miksi vaivautua?
Suorituskyky ja optimointi ovat enemmän kuin kuinka nopeasti voimme ladata sisältöä. On myös melko vähän SEO ja UX etuja on ollut ottamalla aikaa tarkastella koodimme. Puhumattakaan tiedostojen koosta optimoimalla koodimme paremmalle suorituskyvylle on lisätty lisäys kaistanleveyskustannusten laskemisesta isäntienä ja pienentää kaistanleveyden käyttöä (ajatella ISP / solukkotietokannet) myös käyttäjän tasolla.
Modulaarinen koodi lisää tyypillisesti yliluonnollista lisävaihtoehtoja. Tässä halutaan ajatella modulaarista yhdistelmää niin monta yhteistä koodia kuin mahdollista. Jos voimme yhdistää kaksi CSS-luokkaa yhteen ja käyttää vähemmän koodia, jotta saisimme saman tuloksen, meidän pitäisi.
Modulaarisuus ei ole yhtä tärkeä HTML: n ja CSS: n kannalta, mutta kun pääset JavaScriptin monimutkaisempaan maailmaan, liiallinen paisutuntuma voi vahingoittaa sinua - etenkin mobiililaitteilla.
Riippuvuuspyynnöt ovat ylivoimaisesti suurin tekijä hidastamaan useimpia sivujen latausnopeuksia. Jokainen ylimääräinen pyyntö lisää jäsentynyttä ja toista kerrosta monimutkaisuuteen jäsentämiseen ja lataamiseen. On usein helppoa unohtaa, että myös tyylitietokuvasi kutsuttavat kuvia, joten muista rajoittaa niitä ja käyttää vaihtoehtoisia optimointimenetelmiä, kuten sprites tai SVG, kun mahdollista.
Vaikka olemme ulkoisten riippuvuuksien aiheen suhteen, jos sivustosi on riittävän suuri pyytämään muutamia kymmeniä pyyntöjä minimiin ... On ehkä aika harkita CDN: n käyttämistä. CDN: n käyttö sisällön jakelemiseen ei vähennä tiedostojen kokoa ja / tai latausaikoja yhtä paljon kuin poistaa ylimääräiset HTTP-pyynnöt yhteen, mutta se voi todennäköisesti poistaa kaikki hitaat palvelinyhteydet vähintään yhtälöstä.
Sinun kehityksen ja tuotannon tason koodipohjien vertaaminen on hyvin erilainen. Pelkästään tämän vaiheen suorittaminen voi toisinaan nähdä suurimman tiedostojen koon pienenemisen koko aluksella.
Nykyään on tyypillistä nähdä, että kehittäjät viittaavat niiden "tuotantoon" tai "kehittämiseen" ympäristöön etenkin suurissa hankkeissa. Mutta se on myös hyödyllistä myös pienemmissä asioissa. Suurin ero kahden ympäristön välillä voidaan nähdä kuvapuristuksella ja koodin pienentämisellä / pakkaamisella. Loppujen lopuksi haluamme, että tuotantoympäristömme on niin vähäistä ja nopeaa kuin mahdollista kehitysympäristömme ollessa sama, miinus kuvan / koodin pakkauksen optimoinnissa.
Sisäänrakennetuilla työkaluilla, kuten Photoshopin "Save for web" -pakkauksella, voi olla hyvä lähtökohta kuville. On olemassa lukuisia tietoja tutkitaan muualla samoin keskusteluja kuvaformaateista, pakkausalgoritmeista, laadunvalvonnasta ja parhaista käytännöistä.
Koodissa parhaan pakkauksen käyttö riippuu yleensä siitä, millä kielellä työskentelet. On myös hyvin kiistanalaista, onko koodin pakkaus auttaa tai vahingoittaa muita ihmisiä, jotka yrittävät ymmärtää koodisi, mutta se on keskustelu toista kertaa. Kun kyseessä on tavallinen HTML ja CSS, käytän sellaisia palveluita kuin Googlen htmlcompressor ja YUI-kompressori CSS: lle.
Joskus juuri koodi, jota kirjoitamme, on ketjun hitain linkki. Tehottoman CSS: n tai paisutetun JavaScriptin käyttö voi loukkaantua lastausaikoja enemmän kuin luulisi. Tämä mozilla postti kertoo yksityiskohtaisesti siitä, kuinka tärkeää on kirjoittaa laiha CSS-valitsimet ja selvittää, miten selaimet tekevät niistä. Lyhyesti sanottuna tarkan polun kirjoittaminen alas valikoimien ketjuun on paljon vähemmän tehokasta kuin pelkästään pienimmän yksilöllisesti tunnistettavan valitsimen käyttäminen. He molemmat suuntaavat tyylin samalle elementille, jälkimmäinen yksinkertaisesti saa työn paljon paljon nopeammin.
JavaScript voi olla vielä huonompi kuin huonosti kirjoitettu CSS, ja monissa tapauksissa se on helppo unohtaa. Kuinka monta kertaa olet kopioinut ja liittänyt ulkoisen JS-kirjaston projektiin ilman, että etsit syvälle itse lähteestä? Typekit on hieno esimerkki tästä, koska kun heidän palvelimensa pysähtyvät, se voi tuoda verkkosivun fonttinsa polvilleen ja aiheuttaa vielä 30 sekuntia tai jopa minuutteja ylimääräistä latausaikaa.
Onneksi tällaiset tapahtumat sattuvat harvoin, mutta on silti hyvää käytäntöä kutsua JavaScript viimeiseksi mahdollisuuksien mukaan, kuten Google Analyticsin tapauksessa. Näin selaimen jäsentää päätiedostoja (CSS, HTTP-pyynnöt jne.) Ja näyttää merkinnät ennen kuin JavaScript alkaa hidastaa asioita.
Tavoitteenamme on, että kirjoitetaan kevyempiä CSS-valitsimia ja pidämme yllättelevää, että tehokkaan HTML-koodin kirjoittaminen on myös etusijalla.
CSS-nollautukset kohdistavat usein kaikki yhteiset elementit ja valvovat niiden nollaamista. Joten vaikka et kohdista kyseistä ylimääräistä divia, se todennäköisesti hidastaa asioita, koska sen pehmuste ja marginaalin nollaaminen on vähimmäistää. Tyypillisesti ylimääräinen div tai kaksi ei todellakaan vahingoitu mitään. Vain kun aloitat kymmeniä heistä, asiat menevät hulluksi. Kun lisäät elementtejä HTML5-malliin, meillä on myös paljon enemmän joustavuutta myös tällä alalla.
Google on pitänyt ensisijaisen tärkeänä asentaa Internetiä kollektiivisesti muotoon. Sivut on nyt kiinnitettävä kriittistä huomiota moniin eri attribuutteihin siitä, miten ne on luotu. Jos soitat liian monet ulkoiset resurssit, joilla on järjetöntä suurta kuvaa tai jopa huonosti kirjoitettu JavaScript, voit vetää sivuston alaspäin rankingissa.
Onneksi tämä on kaikki hyvällä aikomuksella, koska hyvän hakuprosentin vaatimukset perustuvat hyviin kehityskäytäntöihin. Google tarjoaa myös a hyvin syvällinen opas optimoimaan sivustosi eri osa-alueiden paremman SEO-palvelun - mikä myös edistää fantastisia kehityskäytäntöjä samanaikaisesti.
Kun optimoimme koodimme, meidän ei tarvitse vain ajatella tiedostokokoja, vaan myös harkita sen lukemista. joko selaimilla tai jopa muilla ihmisillä. Myös mobiilikäyttöä tulisi ottaa huomioon, sillä monet palveluntarjoajat ovat tällä hetkellä erittäin rajoittavia tietomäärityksiä.
Joten vaikka se voi viedä lisää aikaa tämän optimoinnin suorittamiseen, se on varmasti hyödyllinen pyrkimys, koska se tarjoaa paitsi parempaa suorituskykyä selaimessa ja mobiililaitteissa, mutta sillä on myös mahdollisuus edistää parempia kehityskäytäntöjä ja jopa saada sisältösi korkeammalle tasolle Google-hakukoneissa.
Seuraavan kerran, kun valmistaudut käynnistämään, heittäkää kuvat pakkausmoottoriin ... Saatat yllättyä kuinka monta megatavua se voi raastaa!