Sådan fremskynder din hjemmeside
Webstedets hastighed er en af de vigtigste ting ved at skabe webindhold og webapplikationer.
Faktisk er det blevet bemærket af forskellige analytikere hos Google, at folk ikke ofte sidder gennem de første 30 sekunder af en video, langt mindre de første 15, så det ville være klogt for dig at få indholdet af dit websted indlæst som hurtigt som du kan, så folk kan gøre en dom og acceptere at bruge det eller ej.
Det kan være lidt overfladisk, at folk dømmer websteder så hurtigt, men det er ofte tilfældet, og vi bør ikke tage det for givet.
Optimering af dit websted bør have høj prioritet, og ofte når du bruger WordPress og andre motorer, har de gode plugins, der hjælper. Jeg vil dog antage, at du måske ikke bruger WordPress, fordi der er meget, der ikke gør det, og jeg vil give dig nogle af de bedste måder at optimere ethvert websted uanset hvor det er vært.
Billeder
Billedoptimering kan være et svært emne, men en der faktisk har mange aspekter at vælge imellem. Der er filformater, billedoptimeringsværktøjer og kode / CSS bedste praksis, der skal følges for at sikre, at du gemmer og handler med billeder på den bedst mulige måde.
Jeg vil gerne give et eksempel på, hvorfor det er vigtigt, så lad os tage et nyligt eksempel. Det har for nylig været tydeligt for forskellige iOS-udviklere og app-skabere, at apps, der bruger Retina-klare billeder, optager 2-4 gange så meget plads på personens telefon end deres tidligere versioner, og det forårsager, at folks telefoner simpelthen løbe tør for plads fra enkle app downloads.
Dette er ikke lige så relevant for vores webudviklere og designere, men det viser dig bare, hvor vigtigt det er at håndtere dine billeder korrekt på enhver platform. Nedenstående er et par af, hvad jeg synes er de vigtigste emner at huske, når optimering af billeder til internettet.
Billedformater
Formateringen af billeder er et opvarmet emne, og det synes at være fordi alle tror et andet format vil øge hastigheden, men der er en temmelig udbredt tankegang om dette, og vi kan altid bruge dette som de facto-standard. JPEG'er er til fotografier, GIF'er er til lavfargebilleder / flade farvebilleder, og PNG'er er til alt andet. De fleste webdesignere og udviklere, som jeg ved, foretrækker at bruge PNG'er til næsten alt, medmindre de har en knap, der måske har en eller to farver, hvorved de finder GIF'er til at fungere godt.
Nu kan du selvfølgelig spille med disse specifikationer, men husk altid at det er standarder for, hvad der sparer mindre og lettere vs større og tungere. Hvis du laver et fotograferingssted, vil det dog indlæse temmelig langsomt uanset i forhold til andre websteder - så prøv nogle af disse følgende metoder til at øge billedoptimeringen generelt.
Billede kode
En af de værste ting, vi kan gøre for servertid, når du lægger billeder, er, at koden gør størrelsen for os. Nå, det kunne siges for noget om 'at lade koden gøre ____ for os'. Det fælles ordsprog er: "Hvis du kan gøre det, så gør det", og det er en darn god. Brug ting som width='50px' height='30px' kan virkelig smide serverens belastningstid for så vidt angår det pågældende billede, fordi serveren analyserer siden og ser, at der er en opgave, den skal udføre - en, der kunne have været udført af skaberen. Så sørg for at gå videre og gøre det med alle dine billeder.
Billedoptimeringsværktøjer
Værktøjer er altid hjælpsomme. Nå, det meste af tiden. Nogle gange er de en byrde og en distraktion, men i dette tilfælde ser det ud til, at de ofte er meget nyttige. Hvis du kan finde et godt billedoptimeringsværktøj, først og fremmest - link det i kommentarerne, fordi vi alle er på jagten, men et par af mine favoritter følger. jeg elsker ImageOptim til Mac og Optøjer Til Windows. Disse to værktøjer er meget forskellige, men udfører en lignende opgave.
Du kan sætte billeder ind, og det vil dechifrere en måde og metode til at optimere dem, gør det, og spyt derefter det endelige resultat hele tiden op, og gem det format, du sendte dem ind med. De er virkelig ganske rart, og der er tonsvis mere derude. Faktisk er der en flok, der vil analysere et billeds bitmap og fortælle dig, hvilket format der er bedst. Du kan nemt fortælle, at disse er nogle af de mest nyttige ting i en webdesigners værktøjsspand, bortset fra et tekstredigeringsprogram og designprogram, og med rette.
Billedbaseret serveroptimering
Jeg er ikke ekspert, når det gælder opsætning af servere, men jeg har bestemt nok baggrund i lille skala for at give dette råd. Har ikke massive billedbelastninger gemt lokalt. Det vil sige, lad ikke være en database med billeder gemt på dine servere, at du tjener de andre websider fra. Tag mærke til teknologier som Amazon S3 eller Flickrs servere, og brug dem til at betjene dine filer fra.
Jeg har for nylig implementeret en Amazon S3 spand til serveren vores filer fra, og det var faktisk ret nemt - så er du velkommen til at prøve det. Det er en god metode. Hovedårsagen er, at du ikke vil have en flaskehals i databasen i et tilfælde, hvor du betjener flere belastninger, fordi det kan være et diagnostisk mareridt. Det er en god praksis at gemme separate filer på forskellige servere (hvis det er under massiv belastning), medmindre det selvfølgelig er en simpel generel stringslager database eller noget lignende.
CSS og JavaScript optimering
CSS og JavaScript er virkelig vigtige sprog når det kommer til webdesign, og især når det kommer til at skabe dynamisk indhold. Jeg tror, at folk ofte glemmer at de kan optimere deres dynamiske indhold, og de glemmer at de kan optimere deres JavaScript og CSS. Disse er ikke rigtig de mest betydningsfulde ting for mindre steder, men med større sites er det virkelig vigtigt - især når det kommer til websteder, der er afhængige af en masse design. Lad os gennemgå nogle af de "CSS og JavaScript-regler", der er ret standardiserede, når det kommer til at skabe webapplikationer.
Første regel af CSS og JavaScript
Hvis du kan gøre det i CSS, så gør det
Ofte glemmer vi, at vi har fantastiske værktøjer lige foran os, og jeg vil sige, at CSS klassificerer som en af de mest fantastiske webdesignere. Jeg vil også sige, at designere hopper ind i Photoshop for hurtigt af naturen (men det er deres job, så hvem kan bebrejde dem). Husk dog, at når du designer, har du noget i din browser, der også kan gøre hurtige mock ups: CSS3. Udnyt det! At have et sted at lave hurtige mockups hjælper virkelig, og det vil føre dig væk fra at hackede sammen ting i HTML senere. I stedet for "" er du sikker på at du kan finde en måde at tilføje det plads i CSS, så gør det!
Anden regel for CSS og JavaScript
Minifere, reducere, reducere!
Minimering af kode er måske en af de bedste og nemmeste ting, du kan gøre for at fremskynde dit websted. Husk, vi taler milisekunder, men det har stadig en bemærkelsesværdig effekt - og især hvis du bruger noget som et jQuery-bibliotek. Husk at hvis du nogensinde tilføjer plugins til JavaScript / CSS, og du får mulighed for at downloade den godkendte version (og ikke behøver at redigere den), gør du det . Nogle af mine yndlingsværktøjer til at gøre dette er, Kode Minifier til Mac, Minify til Windows og JSCompress / CSSCompressor for dem af jer, der ønsker nogle browserbaserede krydsplatformløsninger. God fornøjelse!
Tredje regel for CSS og JavaScript
In-line er en no-no
Det er dårlig praksis at bruge in-line CSS eller JavaScript, men især når det kommer til CSS. Årsagen til det skyldes ikke kun arvsproblemer, men også fordi vi, hvis vi forlader CSS i HTML-koden (især in-line), vil den læse som sådan: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS i stedet for blot en simpel HTML => CSS. Som du kan fortælle, er dette virkelig dårligt for serverbelastningstider, og det kan ofte føre til skade for de fleste webapplikationer, hvis der skulle være en designer, der nægtede at bruge den i en separat fil. Det ville bestemt ikke få dit websted til at gå ned, men det vil få en anden medarbejder til at gå igennem og uddrage det - det er så vigtigt. Husk derfor altid at være den, der udvinder den, ikke den fyr, der efterlader det for andre at udtrække.
Fjerde regel for CSS og JavaScript
Flyt den ned
Hvis du skal sætte dit JavaScript på siden med HTML'en selv, og har ingen måde omkring det, så sæt det i bunden af HTML-dokumentet . Dette hjælper med at fremskynde belastningstiden for webstedet, fordi vi kan udføre alle disse funktioner og andre JavaScript-godbidder, efter at selve siden er indlæst. En anden ting er, at dette reducerer sandsynligheden for, at en fejl squashing udførelsen af hele webstedet, fordi når der er en fejl med JavaScript i et syn, vil det ofte spise hukommelse som ikke i morgen. Så det er god praksis at sikre, at dit websted ikke gør det, og at advare mod fremtidige begivenheder, hvor det kan - ingen af os vil have folk til at besøge vores websted og derefter få deres browsere nedbrud.
Femte regel for CSS og Javascript
DOM optimering
Reducer DOM, hvis du kan. Tag for eksempel et eksempel på, at du bruger en masse jQuery, der peger på forskellige DOM-elementer eller læser gennem hele DOM'en for at finde noget - det kan bremse dit websted ganske lidt. Der er lidt at sige, at jeg altid elskede, og det passer her: "Hvis du laver ting, fordi det er den eneste måde du ved, så er der sandsynligvis bedre måder at gøre det på." Du kan også sige: "Hvis du laver ting, fordi det er den eneste måde du ved hvordan, så gør du det forkert, " men den version er lidt hårdere.
Forskning, og find disse ting i en sådan sag. Hvis du arbejder med en div i HTML, bare fordi du har brug for det til en lille ting, og det er den eneste måde du ved, hvordan man gør det, så er det måske ikke den bedste måde. Nu forstår jeg selvfølgelig at bruge div-tags, fordi du har brug for dem til din CSS, er helt forståelig, men måske kan du fjerne nogle og finde en mere bred måde at håndtere det stilproblem på.
Jeg har netop for nylig gjort det selv, da jeg går igennem et Ruby on Rails-projekt i øjeblikket. Tidligere i ugen indlejrede jeg omtrent 5 div i hinanden i HAML af alle ting, bare for at gøre noget, jeg ønskede (en kasse i en kasse i en kasse inde i noget andet i dette tilfælde). Og jeg kiggede lige på det, vidste at det var skidt, men vidste ikke en bedre måde at gøre det på, så jeg skrabet alt for at gøre det igen. At skulle gøre det gjorde det meget sværere, men det tvang mig til at lære en ny måde at håndtere dette spørgsmål på. Og til sidst lærte jeg meget af det, og jeg vil anbefale løsningen til nogen i fremtiden. Gå videre og tag en af disse viden nuggets for dig selv! De er bestemt lavt hængende frugt.
Generelle optimeringer
Dette er flere af de brede emner, der egentlig ikke passer ind i andre steder, men som jeg stadig føler, fortjener lidt opmærksomhed. Faktisk kan nogle af disse være de vigtigste ting, du kan gøre for at fremskynde en webapplikation eller et websted.
Slashes på links
Dette er mærkbart vigtigt. Når en bruger åbner et link uden et skråstreg i slutningen af et websted, skal serveren bogstaveligt talt finde ud af, hvilken type fil eller side der er på adressen. Serveren vil så inkludere det nævnte skråstreg, men hvis du tilføjer det selv, reducerer du millisekunder af ladetid. Disse millisekunder alle tilføjer, lover jeg. Ofte finder jeg designere specielt, som ikke tænker på det, tror at deres uoptimerede kode ikke vil bære noget, men det gør det til sidst. Hvis du sparer kvartaler i 10 år, vil du helt sikkert have mange penge, og det samme koncept gælder her - bare i mindre eller større omfang afhængigt af dit websteds trafik.
favicons
Browsere gør altid en pull for en favicon.ico-fil på rodeniveauet på din server, så du kan lige så godt bare gå videre og inkludere det. Selvom det er noget midlertidigt, er det altid godt at have. Hvis du ikke gør det, vil browseren selv give en 'intern 404', og bare cache 404 op på browseren favicon.ico sektionen, og vi ved alle ved at reducere 404 hastighedsopladningstid.
Reducer cookie størrelse
Dette gælder måske ikke for os alle, men hvis du udvikler webapplikationer, er det derfor vigtigt at reducere cookiestørrelsen. For eksempel, i det jeg kender til - Ruby on Rails applikationer - kan du bruge cookies (eller andre metoder) til godkendelse fra session til session, og ofte foretrækker folk at bruge de andre metoder, fordi de kan reducere brugerbelastningstider med dem .
Nu betyder en cookie, at det cacher ting på din computer, så du tror måske, at det vil øge belastningstiden, men typisk er alt det, de har det godt for, at autentificere brugersessioner eller spore dig rundt på nettet (som Google og Facebook er blevet anklaget for ). Hvis du skal arbejde med cookies, skal du sørge for at holde størrelsen lav, og du bruger dem med din bedre vurdering. Hvis du skal, skal du indstille udløbsdatoen kortere for at reducere belastningstiden.
Cache
Dette er et massivt emne, og det er jeg ikke ekspert på. Caching er dog et ret simpelt koncept. Det lagrer filer (typisk HTML / CSS kode) fra websteder, som du ofte besøger på din computer, så du ikke behøver at indlæse dem hver gang du besøger.
Det er virkelig en utrolig nyttig teknologi, og en, at mange webapplikationer begynder at ansætte fra de seneste år. Der har været en række database løsninger til caching og sandsynligvis den mest bemærkelsesværdige er memcached . Hvad dette gør, er at gemme en kopi af databasefiler til din browser, da du bruger en webapplikation. Så hvis du for eksempel har forskellige profiler, besøger du ofte, kan det gemme profilbillederne på din computer, og Memcaches skønhed kommer i næste fase. I din kode kan du faktisk ringe (før du trækker fra DB) fra de Memcached servere og se, om du kan trække en cachelagret version af filen / filerne. Og hvis ikke, vil det naturligvis trække filen fra databasen, og hvis den ikke er i cachen, vil den tilføjes for at spare tid næste gang. Dette er et smukt eksempel på caching i stor skala, og det har hjulpet tonsvis og tonsvis af virksomheder hurtigere servere og databaser gennem de seneste 2 + år.
Og det vil bare summe det op. Det er selvfølgelig ikke alle måder at fremskynde dit websted på, men det skal begynde at højne din nysgerrighed og få dig til at lede efter alle de store ting derude, der vil.