Miten nopeuttaa sivustosi
Sivuston nopeus on yksi tärkeimmistä aiheista web-sisällön ja web-sovellusten luomiseen.
Itse asiassa Google-analyytikot ovat havainneet, että ihmiset eivät useinkaan käy läpi videon ensimmäisiä 30 sekuntia, paljon vähemmän kuin ensimmäiset 15, joten olisi järkevää saada sivustosi sisältö ladatuksi niin nopeasti, että ihmiset voivat tehdä tuomion ja suostua joko käyttämään sitä tai ei.
Voi olla hieman pinnallista, että ihmiset arvioivat sivustoja nopeasti, mutta usein on kyse, eikä meidän pidä sitä pitää itsestäänselvyytenä.
Sivuston optimointi on ensisijaisen tärkeä, ja useimmissa tapauksissa, kun käytät WordPressia ja muita moottoreita, niillä on mukavia lisäosia, jotka auttavat. Oletan kuitenkin, että et voi käyttää WordPressiä, koska siellä ei ole paljon, ja annan sinulle muutamia parhaita tapoja optimoida sivustosi riippumatta siitä, missä sen isännöi.
kuvat
Kuvan optimointi voi olla kova aihe, mutta sillä on todella monia näkökohtia, joista valita. Seuraavaksi on olemassa tiedostomuotoja, kuvan optimointityökaluja ja koodin / CSS: n parhaita käytäntöjä, jotta voit säästää ja toimia parhaalla mahdollisella tavalla.
Haluan esittää esimerkin siitä, miksi tämä on tärkeää, joten ottakaamme äskettäin esimerkin. IOS-kehittäjille ja app-tekijöille on hiljattain käynyt ilmi, että Retina-valmiiden kuvien käyttämät sovellukset käyttävät 2-4 kertaa enemmän tilaa puhelimessa kuin aikaisemmissa versioissaan ja se aiheuttaa ihmisten puhelimia yksinkertaisesti loppuaan tilaa yksinkertaisista sovellusten latauksista.
Tämä ei ole yhtä tärkeä meille web-kehittäjille ja suunnittelijoille, mutta näyttää siltä, kuinka tärkeää on käsitellä kuvasi millä tahansa alustalla. Seuraavassa on muutamia niistä, jotka mielestäni ovat tärkeimpiä aiheita muistaa, kun optimoidaan kuvia verkossa.
Kuvan muodot
Kuvien muotoilu on lämmitetty aihe, ja näyttää siltä, että jokainen uskoo, että eri formaatti nostaa nopeutta, mutta tässä on melko yleinen ajattelutapa, jota voimme aina käyttää tosiasiallisena standardina. JPEG-valokuvat ovat valokuvia, GIF: t ovat pienikokoisia / tasaisia kuvia varten ja PNG: t ovat kaiken muun. Useimmat web-suunnittelijat ja kehittäjät, jotka tiedän, mieluummin käyttävät PNG: ää lähes kaikesta, ellei heillä ole painikkeita, joilla on yksi tai kaksi väriä, jolloin he löytävät GIF: n toimivan hyvin.
Nyt tietysti voit pelata näiden määritysten kanssa, mutta muista aina, että nämä ovat standardeja, jotka säästävät pienempää ja kevyempää, vs suurempia ja raskaampia. Jos teet kuitenkin valokuvauspaikan, se latautuu melko hidasta riippumatta muista sivustoista - joten kokeile joitain seuraavista tavoista lisätä kuvan optimointia yleisesti.
Kuvakoodi
Yksi pahimmista asioista, joita voimme tehdä palvelinajalle kuvien lataamisessa, antaa koodillemme koon. No, se voisi sanoa mitä tahansa "antamalla koodi tehdä ____ meille". Yhteinen sanonta on, "jos voit tehdä sen, tee se", ja se on huono hyvä. Käyttämällä sellaisia asioita kuin width='50px' height='30px' voi todella heittää palvelimen latausaikaa kyseisestä kuvasta huolimatta, koska palvelin jäsentelee sivua ja näkee, että tehtävän on oltava sellainen, jonka luoja olisi voinut tehdä. Varmista siis, että siirryt eteenpäin ja teet sen kaikkien kuvien kanssa.
Kuvan optimointityökalut
Työkalut ovat aina hyödyllisiä. No, suurimman osan ajasta. Joskus ne ovat taakka ja hämmennys, mutta tässä tapauksessa näyttää siltä, että ne ovat usein erittäin hyödyllisiä. Jos löydät hyvän kuvanoptimointityökalun, liitä se ensin kommentteihin, koska olemme kaikki metsästyksessä, mutta muutamia suosikkini seuraa. rakastan ImageOptim Macille ja Mellakka Windowsille. Nämä kaksi työkalua ovat hyvin erilaiset, mutta suorittavat samanlaisen tehtävän.
Voit laittaa kuvia sisään ja tulkita tapa ja tapa optimoida ne, tehdä niin ja sitten syödä lopputulos loppuun samalla, kun tallennat muotoa, jonka lähetit. Ne ovat todella mukavia, ja siellä on paljon enemmän. Itse asiassa on joukko, joka analysoi kuvan bittikartan ja kertoo, mikä muoto on paras. Voit helposti sanoa, että nämä ovat joitain hyödyllisimpiä asioita web-suunnittelijoiden työkalusivustossa, joka on muu kuin tekstieditori- ja suunnittelutyöohjelma, oikein.
Kuvapohjainen palvelimen optimointi
En ole asiantuntija palvelinten perustamisessa, mutta minulla on varmasti riittävästi taustaa pienen mittakaavan ansiosta. Älä säilytä massiivisia kuvien kuormituksia paikallisesti. Eli älä jätä palvelimesi tallennettuja kuvia tietokantaan, jota palvelet muilla sivuston tiedostoilla. Ota huomioon sellaiset tekniikat kuin Amazon S3 tai Flickr-palvelimet, ja käytä niitä palvelemaan tiedostoja.
Olen äskettäin toteuttanut Amazon S3 -kauhan palvelimelle tiedostoistamme, ja se oli oikeastaan varsin helppoa - joten voit kokeilla sitä. Se on hyvä menetelmä. Tärkein syy on se, että et halua tietokannan pullonkaulan esiintymistä tilanteessa, jossa palvelet useita kuormia, koska se voi olla diagnosoiva painajainen. On hyvää käytäntöä tallentaa erilliset tiedostot eri palvelimille (jos kyseessä on massiivinen kuorma), ellei tietysti ole vain yksinkertainen yleiskäyttöinen merkkijoukon tallennustietokanta tai vastaava.
CSS- ja JavaScript-optimointi
CSS ja JavaScript ovat todella tärkeitä kieliä, kun kyse on web-suunnittelusta ja varsinkin dynaamisen sisällön luomisesta. Mielestäni ihmiset usein unohtavat, että he voivat optimoida dynaamisen sisällön, ja he unohtavat, että he voivat optimoida JavaScriptin ja CSS: n. Nämä eivät todellakaan ole merkittäviä asioita pienemmille sivustoille, mutta suurilla sivustoilla se on todella tärkeä - varsinkin kun on kyse sivustoista, jotka ovat riippuvaisia paljon suunnittelusta. Käy läpi muutamia CSS- ja JavaScript-sääntöjä, jotka ovat melko standardoituja web-sovellusten luomisessa.
CSS: n ja JavaScriptin ensimmäinen sääntö
Jos voit tehdä sen CSS: ssä, tee se
Usein kerran unohdamme, että meillä on uskomattomia työkaluja aivan edessäni, ja sanon, että CSS luokittelee yhden upeimmista web-suunnittelijoista. Sanoisin myös, että suunnittelijat hyppäävät valokuvissa liian nopeasti luonteeltaan (mutta heidän tehtävänsä on niin, kuka voi syyttää heitä). Muista kuitenkin, että kun suunnittelet, sinulla on jotain selaimellasi, joka voi myös tehdä nopeita mallineita: CSS3. Hyödynnä sitä! Jos sinulla on paikka pikakuvakkeille, se todella auttaa, ja se vie sinut pois hakkeroimasta asioita HTML: ssä myöhemmin. Sen sijaan "" Olen varma, että voit löytää tavan lisätä tähän tilaan CSS: ssä, joten tee se!
Toinen CSS: n ja JavaScriptin sääntö
Minify, minify, minify!
Koodin minifiointi on ehkä yksi parhaista ja helpoimmista asioista, joita voit tehdä sivustosi nopeuttamiseksi. Muista, puhumme milisekuntia, mutta silti sillä on havaittavissa oleva vaikutus - ja varsinkin jos käytät jotain jQuery-kirjastosta. Muista, että jos lisäät JavaScript- ja CSS-laajennuksia, ja sinulla on mahdollisuus ladata minified versio (ja sinun ei tarvitse muokata sitä), tee niin . Osa suosikkivälineistani tähän on, Koodi Minifier Macille, Pienennä Windowsille ja JSCompress / CSSCompressor niille, jotka haluavat joitain selainpohjaisia cross platform -ratkaisuja. Hyvää minifying!
CSS: n ja JavaScriptin kolmas sääntö
In-line on ei-ei
On huono käytäntö käyttää in-line CSS tai JavaScript, mutta varsinkin kun se tulee CSS. Syy tähän ei johdu vain vanhojen ongelmien takia vaan myös siksi, että jos jätämme CSS: n HTML-koodiin (etenkin in-line), se luetaan sellaisenaan: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS sijaan vain yksinkertainen HTML => CSS. Kuten voitte sanoa, tämä on todella huono palvelimen latausaikoille ja voi usein johtaa useimpien verkkosovellusten haittaamiseen, jos suunnittelija haluaa käyttää sitä erillisessä tiedostossa. Se varmasti ei aiheuttaisi sivustosi kaatumista, mutta se saa toisen työntekijän käymään läpi ja purkamaan sen - se on niin tärkeää. Joten muista aina olla se, joka purkaa sen, ei kaveri, joka jättää sen muille.
Neljäs CSS: n ja JavaScript-sääntö
Siirrä se alas
Jos sinun on laitettava JavaScript -asiakirja itse HTML-sivulle, ja älä käytä sitä, laita se HTML-asiakirjan alaosaan . Tämä nopeuttaa myös sivuston latausaikaa, koska voimme suorittaa kaikki nämä toiminnot ja muut JavaScript-herkut sen jälkeen, kun sivu on ladattu. Toinen asia on se, että tämä vähentää todennäköisyyttä, että jokin vika häiritsee koko sivuston suorituskykyä, koska kun JavaScriptin vika on näkyvissä, se usein syö muistia kuin ei huomenna. Joten on hyvä käytäntö varmistaa, että sivustosi ei tee sitä ja varoittaa tulevia tapahtumia, joissa se voi - kukaan meistä ei halua ihmisiä käymään sivustossamme ja sitten selaimemme kaatua.
Viides sääntö CSS: stä ja Javascriptista
DOM-optimointi
Vähennä DOM, jos mahdollista. Ottakaa esimerkiksi esimerkki siitä, että käytät paljon jQuerya, joka viittaa eri DOM-elementteihin tai lukee läpi kaikki DOM -tuotteen löytääkseen jotain - se voi hidastaa sivustosi alaspäin melko vähän. Minulla on aina vähän sanonta, jota olen aina rakastanut ja se sopii tänne: "Jos teet asioita, koska se on ainoa tapa, jolla tiedät miten, niin luultavasti on parempia tapoja tehdä se." Voit myös sanoa: "Jos teet asioita, koska se on ainoa tapa, jolla tiedät miten, niin teet sen väärin ", mutta tämä versio on hieman ankara.
Tutkimus, ja löytää nämä asiat tällaisessa tapauksessa. Jos työskentelet divilla HTML: ssä vain siksi, että tarvitset sitä pieneen asiaan, ja se on ainoa tapa, jolla tiedät miten tehdä niin, se ei välttämättä ole paras tapa. Nyt tietenkin ymmärrän, että div-tunnisteiden käyttäminen, koska tarvitset niitä CSS: lle, on täysin ymmärrettävää, mutta ehkä voit poistaa muutamia ja löytää entistä laaja tapa käsitellä tätä tyyliä.
Olen vasta äskettäin tehnyt tämän itse, sillä käyn läpi Ruby on Rails -projektin tällä hetkellä. Aiemmin viikolla asensin noin 5 divin sisällä toisistaan HAML: ssa kaikesta, vain tekemästä jotain halustaan (laatikko laatikossa laatikossa jotain muuta tässä tapauksessa). Ja minä vain katselin sitä, tiesin, että se oli paska, mutta ei tiennyt parempaa tapaa tehdä niin, joten minä romutan kaiken, jotta voisin tehdä sen uudelleen. Jälkeenpäin tekeminen teki sen paljon vaikeammaksi, mutta se pakotti minut oppimaan uuden tavan käsitellä tätä kysymystä. Ja lopulta opin paljon siitä, ja suosittelen ratkaisua kenellekään tulevaisuudessa. Mene eteenpäin ja tartu yhteen näistä tietämyksistä itsellesi! Ne ovat varmasti heikompia hedelmiä.
Yleiset optimoinnit
Nämä ovat enemmän laaja-alaisia aiheita, jotka eivät todellakaan sovi mihinkään muuhun, mutta silti tuntuu ansaitsevan jonkin verran huomiota. Itse asiassa jotkin näistä voivat olla tärkeimpiä asioita, joita voit tehdä nopeuttaaksesi verkkosovellusta tai -sivustoa.
Lyhennetään linkkejä
Tämä on huomattavan tärkeää. Kun käyttäjä avaa verkkosivustolta linkin ilman viilua, palvelimella kirjaimellisesti on selvitettävä, millaista tiedostoa tai sivua kyseisellä osoitteella on. Palvelin sisältää tämän jälkeen viivan, mutta jos lisäät sen itse, pienennät millisekuntia latausaikaa. Nämä millisekunnat kaikki lisätään, lupaan. Usein kertaa suunnittelijat, jotka eivät ajattele sitä, ajattelevat, että niiden optimoimaton koodi ei rasita mitään, mutta loppujen lopuksi. Jos tallennat neljäsosaa 10 vuoden ajan, sinulla on varmasti paljon rahaa, ja sama käsite on täällä - vain pienemmässä tai suuremmassa mittakaavassa sivustosi liikenteestä riippuen.
favicons
Selaimet tekevät aina pullon favicon.ico-tiedostolle palvelimen juuriston tasolla, joten voit myös mennä eteenpäin ja sisällyttää sen. Vaikka se on jotain tilapäistä, on aina hyvä olla. Jos et, selain itse antaa 'sisäisen 404', ja vain välimuisti, joka 404 ylös selaimen favicon.ico-osio, ja me kaikki tiedämme vähentämällä 404 nopeuttaa latausaikaa.
Pienennä evästeen kokoa
Tämä ei ehkä koske meitä kaikkia, mutta jos kehität web-sovelluksia, pienennetään evästeiden kokoa todella tärkeänä. Esimerkiksi, mitä olen perehtynyt - Ruby on Rails -ohjelmissa - voit käyttää evästeitä (tai muita menetelmiä) autentikointiin istunnosta istuntoon ja usein ihmisiä mieluummin käyttävät muita menetelmiä, koska he voivat vähentää käyttäjän latausaikoja niiden kanssa .
Nyt eväste tarkoittaa sitä, että se kätkee tietokoneen asioita, jotta voit ajatella, että se nostaisi latausaikaa, mutta tyypillisesti kaikki, mitä ne ovat hyödyllisiä, on käyttäjien tunnistaminen tai seuranta verkossa (kuten Google ja Facebook on syytetty ). Jos sinun täytyy kuitenkin työskennellä evästeiden kanssa, varmista, että pidät koko pienenä ja käytät niitä paremmalla arvostelulla. Jos tarvitset, aseta vanhentumispäivämäärä lyhyemmäksi, jolloin latausaikaa pienennetään.
Kätkö
Tämä on massiivinen aihe, jota en ole asiantuntija. Caching on kuitenkin melko yksinkertainen käsite. Se tallentaa tiedostoja (tavallisesti HTML / CSS-koodia) sivustoilta, joita käytät usein tietokoneellasi, joten sinun ei tarvitse ladata niitä aina, kun vierailet.
Se on todella uskomattoman hyödyllinen teknologia, ja se, että monet verkkosovellukset alkavat käyttää viime vuosina. On olemassa joukko tietokantaratkaisuja välimuistiin ja luultavasti merkittävin on memcached . Tämä on tallentaa kopion tietokantatiedostoista selaimeesi, kun käytät verkkosovellusta. Joten esimerkiksi jos sinulla on erilaisia profiileja, joita käyt usein, se voi tallentaa profiilikuvat tietokoneellesi ja Memcachedin kauneus tulee seuraavaan vaiheeseen. Koodissasi voit itse soittaa (ennen kuin vedät DB: ltä) Memcached-palvelimista ja katso, voitko tallentaa tiedostojen välimuistin. Ja jos ei, tietenkin, vedä tiedosto tietokannasta, ja jos se ei ole välimuistissa, se lisää sen säästää aikaa seuraavalla kerralla. Tämä on kaunis esimerkki välimuistista laajassa mittakaavassa ja se on auttanut tonnia ja tonnia yrityksiä nopeuttamaan palvelimia ja tietokantoja viimeisten 2 vuoden aikana.
Ja se on vain summa. Nämä eivät ole kaikki tavat nopeuttaa sivustosi, tietenkin, mutta sen pitäisi alkaa huippu uteliaisuutesi ja etsiä sinut etsimään kaikki suuret asiat siellä, joka tulee.