Nettstedshastighet er en av de viktigste tingene med å skape webinnhold og webapplikasjoner.

Faktisk har det blitt notert av ulike analytikere hos Google at folk ikke ofte sitter gjennom de første 30 sekundene av en video, mye mindre de første 15, så det ville være klokt å få innholdet på nettstedet lastet som fort som du kan, slik at folk kan avgjøre en dom og bli enige om å bruke den eller ikke.

Det kan være litt overfladisk at folk dømmer nettsteder så fort, men det er ofte tilfelle, og vi bør ikke ta det for gitt.

Optimalisering av nettstedet ditt bør ha topp prioritet, og ofte når du bruker WordPress og andre motorer, har de gode plugins som hjelper. Jeg vil imidlertid anta at du kanskje ikke bruker WordPress, fordi det er mye som ikke gjør det, og jeg vil gi deg noen av de beste måtene å optimalisere et hvilket som helst nettsted uansett hvor det er vert.

Bilder

Bildeoptimalisering kan være et tøft emne, men en som faktisk har mange aspekter å velge mellom. Det er filformater, bildeoptimaliseringsverktøy og kode / CSS beste praksis å følge for å sikre at du sparer og handler med bilder på best mulig måte.

Jeg vil gi et eksempel på hvorfor dette er viktig, men la oss ta et nylig eksempel. Det har nylig blitt tydelig for ulike iOS-utviklere og apputviklere at apper som bruker Retina-klare bilder, tar opp 2-4 ganger så mye plass på personens telefon som tidligere versjoner, og det forårsaker at folkens telefoner bare går tom for plass fra enkle appnedlastinger.

Dette er ikke like relevant for våre webutviklere og designere, men det går for å vise deg hvor viktig det er å håndtere bildene dine på en hvilken som helst plattform. Følgende er noen av det jeg synes er de viktigste emnene som skal huskes når du optimaliserer bilder på nettet.

Bildeformater

Formateringen av bilder er et oppvarmet emne, og det synes å være fordi alle tror et annet format vil øke hastigheten, men det er en ganske vanlig tankegang på dette, og vi kan alltid bruke dette som en de facto-standard. JPEG er for fotografier, GIF er for lavfargebilder / flate fargebilder, og PNG er for alt annet. De fleste webdesignere og utviklere som jeg kjenner til, foretrekker å bruke PNG-er for omtrent alt, med mindre de har en knapp, kanskje den har en eller to farger, hvorved de finner GIFs å fungere bra.

Nå kan du selvfølgelig spille med disse spesifikasjonene, men husk alltid at disse er standarder for hva som vil spare mindre og lettere mot større og tyngre. Hvis du gjør et fotograferingssted, vil det bli lastet ganske sakte uansett i forhold til andre nettsteder - så prøv noen av disse neste metodene for å øke bildeoptimaliseringen generelt.

Bildekode

En av de verste tingene vi kan gjøre for servertid når du laster bilder er at koden gjør størrelsen for oss. Vel, det kan sies for noe om "la koden gjøre ____ for oss". Det vanlige ordtaket er, "Hvis du kan gjøre det, så gjør det", og det er en darn som er god. Bruke ting som width='50px' height='30px' kan virkelig kaste av serverens ladetid så langt som bildet er bekymret, fordi serveren analyserer siden og ser at det er en oppgave som den må oppnå - en som kunne ha blitt gjort av skaperen. Så sørg for at du går videre og gjør det med alle bildene dine.

Bildeoptimaliseringsverktøy

Verktøy er alltid nyttige. Vel, mesteparten av tiden. Noen ganger er de en byrde og en distraksjon, men i dette tilfellet ser det ut til at de ofte er svært nyttige. Hvis du finner et flott bildeoptimaliseringsverktøy, først og fremst - lenk det i kommentarene fordi vi alle er på jakt, men noen av mine favoritter følger. jeg elsker ImageOptim for Mac og Opptøyer for Windows. Disse to verktøyene er svært forskjellige, men utfører en lignende oppgave.

Du kan sette inn bilder, og det vil dechifisere en måte og metode for å optimalisere dem, gjør det, og spytt tilbake det endelige resultatet, samtidig som du lagrer formatet du sendte dem inn med. De er virkelig ganske hyggelige, og det er tonn mer der ute. Faktisk er det en haug som vil analysere et bildes bitmap og fortelle deg hvilket format som er best. Du kan enkelt fortelle at dette er noen av de mest nyttige tingene i en webdesigners verktøykasse annet enn et tekstredigeringsprogram og designprogram, og med rette.

Bildebasert serveroptimalisering

Jeg er ikke ekspert når det gjelder å sette opp servere, men jeg har sikkert nok bakgrunn i liten skala for å gi dette rådet. Ikke ha massive bildelaster lagret lokalt. Det vil si, ikke la en database med bilder lagret på serverne dine at du serverer de andre nettstedene fra. Ta vare på teknologiene som Amazon S3 eller Flickrs servere, og bruk dem til å betjene filene dine fra.

Jeg har nylig implementert en Amazon S3-bøtte for å servere våre filer fra, og det var faktisk ganske enkelt - så vær så snill å prøve det. Det er en fin metode. Hovedårsaken er at du ikke vil ha en flaskehals i databasen i et tilfelle at du betjener flere belastninger, fordi det kan være et diagnostisk mareritt. Det er god praksis å lagre separat fil på forskjellige servere (hvis den er under massiv belastning), med mindre det er bare en enkel generell strengerlagringsdatabase eller noe lignende.

CSS og JavaScript optimalisering

CSS og JavaScript er veldig viktige språk når det gjelder webdesign, og spesielt når det gjelder å skape dynamisk innhold. Jeg tror at folk ofte glemmer at de kan optimalisere deres dynamiske innhold, og de glemmer at de kan optimalisere deres JavaScript og CSS. Disse er egentlig ikke de viktigste tingene for mindre steder, men med større nettsteder er det veldig viktig - spesielt når det gjelder nettsteder som er avhengige av mye design. La oss gå gjennom noen av "CSS- og JavaScript-reglene" som er ganske standardiserte når det gjelder å lage webapplikasjoner.

Første regel av CSS og JavaScript

Hvis du kan gjøre det i CSS, gjør du det

Ofte glemmer vi at vi har fantastiske verktøy rett foran oss, og jeg vil si at CSS klassifiserer som en av de mest fantastiske webdesignerne har. Jeg vil også si at designere hopper inn i Photoshop for fort av naturen (men det er deres jobb, så hvem kan klandre dem). Husk på at selv om det du designer, har du noe i nettleseren din som kan gjøre hurtige mock ups også: CSS3. Dra nytte av det! Å ha et sted å gjøre hurtige mockups hjelper virkelig, og det vil lede deg bort fra å ha hacket sammen ting i HTML senere. Istedenfor "" er du sikker på at du kan finne en måte å legge til plass i CSS, så gjør det!

Andre regel av CSS og JavaScript

Minifiser, reduser, reduser!

Minifisering av kode er kanskje en av de beste og enkleste tingene du kan gjøre for å øke hastigheten på nettstedet ditt. Husk, vi snakker milisekunder, men det har fortsatt en merkbar effekt - og spesielt hvis du bruker noe som et jQuery-bibliotek. Husk at hvis du noen gang legger til plugins for JavaScript / CSS, og du får muligheten til å laste ned den godkjente versjonen (og ikke trenger å redigere den), gjør du det . Noen av mine favorittverktøy for å gjøre dette er, Kode Minifier for Mac, Minify for Windows, og JSCompress / CSSCompressor for de av dere som ønsker noen nettleserbaserte kryssplattformløsninger. Gratulerer med gratulerer!

Tredje regel for CSS og JavaScript

In-line er en no-no

Det er dårlig praksis å bruke in-line CSS eller JavaScript, men spesielt når det gjelder CSS. Årsaken til dette skyldes ikke bare arvspørsmål, men også fordi hvis vi forlater CSS i HTML-koden (spesielt i linje), vil den lese som sådan: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS i stedet for bare en enkel HTML => CSS. Som du kan fortelle, dette er virkelig dårlig for serverbelastningstider, og kan ofte føre til skade for de fleste webprogrammer hvis det skulle være en designer som nektet å bruke den i en egen fil. Det ville absolutt ikke føre til at nettstedet ditt krasjer, men det vil føre til at en annen ansatt går gjennom og trekker den ut - det er så viktig. Så husk alltid å være den som ekstraherer den, ikke fyren som gir det til andre å trekke ut.

Fjerde regel av CSS og JavaScript

Flytt den ned

Hvis du må sette JavaScript på siden med HTML selv, og har ingen vei rundt det, så sett det nederst i HTML-dokumentet . Dette bidrar til å øke hastigheten på nettstedets belastningstid, fordi vi kan utføre alle disse funksjonene og andre JavaScript-godbiter etter at selve siden har lastet inn. En annen ting er at dette reduserer sannsynligheten for at en feil kaster opp ytelsen til hele nettstedet, fordi når det er en feil med JavaScript i et syn, vil det ofte spise minne som ikke i morgen. Så det er god praksis å sørge for at nettstedet ditt ikke gjør det, og for å advare mot fremtidige hendelser der det kan - ingen av oss vil at folk skal besøke nettstedet vårt, og deretter krasj sine nettlesere.

Femte regel av CSS og Javascript

DOM optimalisering

Reduser DOM hvis du kan. Ta for eksempel et eksempel på at du bruker mye jQuery som peker på ulike DOM-elementer eller leser gjennom hele DOM-en for å finne noe - det kan sakte ned nettstedet ditt ganske mye. Det er litt å si at jeg alltid elsket det og passer her: "Hvis du gjør ting fordi det er den eneste måten du vet hvordan, så er det sannsynligvis bedre måter å gjøre det på." Du kan også si: "Hvis du gjør det ting fordi det er den eneste måten du vet hvordan, så gjør du det feil, " men den versjonen er litt tøffere.

Forskning, og finn ut det i et slikt tilfelle. Hvis du jobber med en div i HTML bare fordi du trenger det for en liten ting, og det er den eneste måten du vet hvordan du gjør det, så kan det ikke være den beste måten. Nå forstår jeg selvfølgelig at bruk av div-koder fordi du trenger dem for CSS, er helt forståelig, men kanskje du kan fjerne noen og finne en bredere måte å håndtere det stilproblemet på.

Jeg har nylig gjort dette selv, da jeg går gjennom et Ruby on Rails prosjekt for tiden. Tidligere i uken nestet jeg omtrent 5 div i hverandre i HAML av alle ting, bare for å gjøre noe jeg ville ha (en boks i en boks i en boks inne i noe annet i dette tilfellet). Og jeg så på det, visste at det var skit, men visste ikke en bedre måte å gjøre det på, så jeg slettet alt for å gjøre det igjen. Å måtte gjøre det som gjorde det mye vanskeligere, men det tvang meg til å lære en ny måte å håndtere dette problemet på. Og til slutt lærte jeg mye av det, og jeg vil anbefale løsningen til noen i fremtiden. Gå videre og ta en av de kunnskapsnuggene til deg selv! De er sikkert lavt hengende frukt.

Generelle optimaliseringer

Dette er flere av de brede emnene som egentlig ikke passer inn i noe annet sted, men som jeg fremdeles føler, fortjener litt oppmerksomhet. Faktisk kan noen av disse være de viktigste tingene du kan gjøre for å øke hastigheten på et webprogram eller et nettsted.

Slashes på lenker

Dette er merkbart viktig. Når en bruker åpner en kobling uten et skråstrekk helt fra en nettside, må serveren bokstavelig talt finne ut hvilken type fil eller side som er på den adressen. Serveren vil da inkludere slash, men hvis du legger til det selv, reduserer du millisekunder av ladetid. Disse millisekunder alle legger til, lover jeg. Ofte finner jeg designere spesielt som ikke tenker på det, tror at deres unoptimized kode ikke vil byrde noe, men det gjør det til slutt. Hvis du lagrer kvartaler i 10 år, vil du sikkert ha mye penger, og det samme konseptet gjelder her - bare i mindre eller større skala, avhengig av trafikken på nettstedet ditt.

favicons

Nettlesere gjør alltid en trekk for en favicon.ico-fil på rotenivået på serveren din, så du kan også bare gå videre og inkludere det. Selv om det er noe midlertidig, er det alltid godt å ha. Hvis du ikke gjør det, vil nettleseren selv gi en 'intern 404', og bare cache 404 opp på nettleserens favicon.ico-seksjon, og vi vet alle at 404 er raskere.

Reduser kakestørrelsen

Dette kan ikke gjelde for oss alle, men hvis du utvikler webapplikasjoner, er det derfor viktig å redusere cookiestørrelsen. For eksempel, i det jeg kjenner til - Ruby on Rails-applikasjoner - kan du bruke informasjonskapsler (eller andre metoder) for autentisering fra økt til økt, og ofte vil folk foretrekke å bruke de andre metodene fordi de kan redusere brukerbelastningstider med dem .

Nå innebærer en informasjonskapsel at den cacher ting på datamaskinen din, slik at du kanskje tror det vil øke belastningstiden, men vanligvis er alt de er glade for, autentiserer brukerøkter eller sporer deg rundt på nettet (som Google og Facebook er anklaget for ). Hvis du må jobbe med Cookies, må du sørge for at du holder størrelsen lav, og du bruker dem med bedre vurdering. Hvis du må, må du angi utløpsdatoen kortere for å redusere belastetiden.

cache

Dette er et massivt emne, og en som jeg ikke er ekspert på. Caching er imidlertid et ganske enkelt konsept. Det lagrer filer (vanligvis HTML / CSS-kode) fra nettsteder som du ofte besøker på datamaskinen din, slik at du ikke trenger å laste dem hver gang du besøker.

Det er virkelig en utrolig nyttig teknologi, og en som mange webapplikasjoner begynner å ansette som de siste årene. Det har vært en rekke database løsninger for caching og sannsynligvis den mest bemerkelsesverdige er memcached . Hva dette gjør er å lagre en kopi av databasefiler i nettleseren din mens du bruker et webprogram. Så hvis du for eksempel har forskjellige profiler du besøker, kan det lagre profilbildene på datamaskinen din, og skjønnheten til Memcached kommer i neste fase. I koden din kan du faktisk ringe (før du trekker fra DB) fra Memcached-serverne og se om du kan trekke en bufret versjon av filen / filene. Og hvis ikke, vil det selvsagt trekke filen fra databasen, og hvis den ikke er i hurtigbufferen, vil den legge til den for å spare tid neste gang. Dette er et vakkert eksempel på caching i stor skala, og det har hjulpet tonn og tonnevis av selskaper raskere servere og databaser over de siste 2 + årene.

Og det vil bare summe opp det. Det er selvfølgelig ikke alle måtene å øke hastigheten på nettstedet ditt, men det bør begynne å spike din nysgjerrighet og få deg til å se etter alle de flotte tingene der ute som vil.