Hur du påskyndar din webbplats
Webbplatshastighet är en av de viktigaste sakerna när det gäller att skapa webbinnehåll och webbapplikationer.
Faktum är att det har noterats av olika analytiker hos Google att folk inte sitter ofta genom de första 30 sekunderna av en video, mycket mindre de första 15, så det vore klokt att du hämtar innehållet på din webbplats som snabbt som du kan så att människor kan fatta en dom och överens om att antingen använda den eller inte.
Det kan vara lite ytligt att dom domar webbplatser så fort, men det är ofta fallet, och vi borde inte ta det för givet.
Optimera din webbplats bör vara en topprioritet, och ofta när du använder WordPress och andra motorer har de fina plugins som hjälper. Jag kommer dock anta att du kanske inte använder WordPress, eftersom det finns mycket som inte gör det, och jag kommer att ge dig några av de bästa sätten att optimera vilken sida som helst, oavsett var den är värd.
Bilder
Bildoptimering kan vara ett tufft ämne, men en som faktiskt har många aspekter att välja ut. Det finns filformat, bildoptimeringsverktyg och kod / CSS bästa praxis att följa för att du ska spara och fungera med bilder på bästa möjliga sätt.
Jag vill ge ett exempel på varför detta är viktigt, så låt oss ta ett nytt exempel. Det har nyligen blivit uppenbart för olika iOS-utvecklare och appproducenter att appar som använder Retina-färdiga bilder tar upp 2-4 gånger så mycket utrymme på personens telefon än tidigare versioner, och det orsakar att folkens telefoner helt enkelt slutar fungera utrymme från enkla appladdningar.
Det här är inte lika relevant för våra webbutvecklare och designers, men det visar dig hur viktigt det är att hantera dina bilder på alla plattformar. Följande är några av vad jag tycker är de viktigaste ämnena att komma ihåg när man optimerar bilder på webben.
Bildformat
Formateringen av bilder är ett uppvärmt ämne, och det verkar som att alla tror att ett annat format ökar hastigheten, men det finns en ganska framträdande tankeskola på detta, och vi kan alltid använda det som en de facto-standard. JPEGs är för fotografier, GIFs är för lågfärgsbilder / platta färgbilder, och PNGs är för allt annat. De flesta webbdesigners och utvecklare som jag vet att föredrar att använda PNG är för nästan allt, om de inte har en knapp kanske det har en eller två färger, varigenom de tycker att GIFs fungerar bra.
Nu kan du naturligtvis leka med dessa specifikationer men alltid komma ihåg att det här är standarder för vad som sparar mindre och lättare vs större och tyngre. Om du gör en fotograferingsplats kommer den dock att laddas ganska långsamt oavsett jämfört med andra webbplatser - så prova några av följande metoder för att öka bildoptimeringen övergripande.
Bildkod
En av de värsta sakerna vi kan göra för servertid när du laddar bilder är att låta koden göra storlek för oss. Tja, det kan sägas om någonting om att låta koden göra ____ för oss. Det gemensamma ordstävet är, "Om du kan göra det, gör det", och det är en darn bra. Använda saker som width='50px' height='30px' kan verkligen kasta bort belastningstiden för servern så långt den bilden berörs, eftersom servern parsar sidan och ser att det finns en uppgift som den måste åstadkomma - en som kunde ha gjorts av skaparen. Så se till att du går och gör det med alla dina bilder.
Bildoptimeringsverktyg
Verktyg är alltid till hjälp. Tja, mestadels. Ibland är de en börda och en distraktion, men i detta fall verkar det som om de ofta är mycket användbara. Om du kan hitta ett bra bildoptimeringsverktyg, först av allt - länka det i kommentarerna eftersom vi alla är på jakt, men några av mina favoriter följer. jag älskar ImageOptim för Mac och Upplopp för Windows. Dessa två verktyg är väldigt olika, men utför en liknande uppgift.
Du kan lägga in bilder och det kommer att dechiffrera ett sätt och en metod för att optimera dem, gör så och spotta tillbaka det slutliga resultatet hela tiden och spara det format du skickade in dem med. De är verkligen ganska trevliga, och det finns ton mer där ute. Faktum är att det finns ett gäng som analyserar en bilds bitmapp och berättar vilket format som är bäst. Du kan enkelt säga att det här är några av de mest användbara sakerna i en webdesigners verktygshink än en textredigerare och designprogram, och med rätta det.
Bildbaserad serveroptimering
Jag är ingen expert när det gäller att installera servrar, men jag har verkligen tillräckligt med bakgrund i små skala för att ge detta råd. Har inte massiva bildbelastningar lagrade lokalt. Det vill säga, lämna inte en databas med bilder som är lagrade på dina servrar att du serverar andra sidfiler från. Notera teknik som Amazon S3 eller Flickrs servrar, och använd dem som ska betjäna dina filer från.
Jag har nyligen implementerat en Amazon S3-hink för att servera våra filer från, och det var faktiskt ganska enkelt - så gärna prova det. Det är en bra metod. Huvudskälet är att du inte vill att en databasflaskhals ska hända i en instans som du betjänar flera laster, eftersom det kan vara en diagnostiserande mardröm. Det är bra att lagra separata filer på olika servrar (om de är under massiv belastning), såvida det inte är enbart en enkel generell stränglagringsdatabas eller något liknande.
CSS och JavaScript optimering
CSS och JavaScript är verkligen viktiga språk när det gäller webbdesign, och särskilt när det gäller att skapa dynamiskt innehåll. Jag tror att folk ofta glömmer att de kan optimera sitt dynamiska innehåll, och de glömmer att de kan optimera sina JavaScript och CSS. Dessa är inte riktigt de viktigaste sakerna för mindre webbplatser, men med större webbplatser är det verkligen viktigt - särskilt när det gäller webbplatser som är beroende av mycket design. Låt oss gå igenom några av "CSS och JavaScript-reglerna" som är ganska standardiserade när det gäller att skapa webbapplikationer.
Första regeln för CSS och JavaScript
Om du kan göra det i CSS, gör du det
Ofta glömmer vi att vi har fantastiska verktyg precis framför oss, och jag skulle säga att CSS klassificeras som en av de mest fantastiska webbdesignersna. Jag skulle också säga att designers hoppa in i photoshop för snabbt av naturen (men det är deras jobb så vem kan skylla dem). Men kom ihåg att när du designar har du något i din webbläsare som kan göra snabba mock ups också: CSS3. Dra nytta av det! Att ha en plats att göra snabba mockups hjälper verkligen, och det kommer att leda dig ifrån att hackat ihop saker i HTML senare. I stället för att du kan "" hitta ett sätt att lägga till det här rummet i CSS, gör det också!
Andra regeln i CSS och JavaScript
Minifiera, begränsa, minska!
Minifiering av kod är kanske en av de bästa och enklaste sakerna du kan göra för att påskynda din webbplats. Tänk på att vi pratar milisekunder, men det har fortfarande en märkbar effekt - och speciellt om du använder något som ett jQuery-bibliotek. Kom ihåg att om du någonsin lägger till plugins för JavaScript / CSS och du får möjlighet att ladda ner den minifierade versionen (och behöver inte redigera den), gör så . Några av mina favoritverktyg att göra detta är, Kod Minifier för Mac, minify för Windows, och JSCompress / CSSCompressor för er som vill ha några webbläsarbaserade plattformslösningar. Lycklig minifiering!
Tredje regeln för CSS och JavaScript
In-line är ett nej-nr
Det är dåligt att använda in-line CSS eller JavaScript, men speciellt när det gäller CSS. Anledningen till detta beror inte bara på äldre problem, men också för att om vi lämnar CSS i HTML-koden (särskilt in-line), kommer den att läsa som sådan: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS istället för bara en enkel HTML => CSS. Som du kan berätta är detta verkligen dåligt för serverbelastningstider och kan ofta leda till nackdel för de flesta webbapplikationer om det skulle finnas en designer som vägrade att använda den i en separat fil. Det skulle verkligen inte orsaka att din webbplats kraschar, men det kommer att orsaka en annan anställd att gå igenom och extrahera det - det är så viktigt. Så kom alltid ihåg att vara den som extraherar den, inte killen som lämnar den för andra att extrahera.
Fjärde regeln för CSS och JavaScript
Flytta ner den
Om du måste sätta JavaScript in på sidan med HTML själv, och har ingen väg runt det, lägg sedan det längst ner i HTML-dokumentet . Detta hjälper till att påskynda platsens laddningstid, eftersom vi kan utföra alla dessa funktioner och andra JavaScript-godsaker efter att själva sidan har laddats. En annan sak är att detta minskar sannolikheten för att en bugg squashing hela webbplatsens prestanda, eftersom när det finns en bugg med JavaScript i en syn kommer det ofta att äta minne som inte imorgon. Så det är bra att se till att din webbplats inte gör det och att varna för framtida händelser där det kan - ingen av oss vill att folk ska besöka vår webbplats och sedan ha sina webbläsare kraschar.
Femte regeln för CSS och Javascript
DOM optimering
Minska DOM om du kan. Ta till exempel ett exempel på att du använder mycket jQuery som pekar på olika DOM-element eller läser igenom hela DOM-filen för att hitta något - det kan sakta ner din webbplats ganska långsamt. Det är lite att säga att jag alltid älskade och passar här, "Om du gör saker för att det är det enda sättet du vet hur är det säkert bättre sätt att göra det." Du kan också säga "Om du gör saker eftersom det är det enda sättet du vet hur, då gör du det fel, " men den versionen är lite hårdare.
Forskning, och hitta sådana saker i ett sådant fall. Om du arbetar med en div i HTML bara för att du behöver det för en liten sak och det är det enda sättet du vet hur man gör det då kanske det inte är det bästa sättet. Nu förstår jag förstås att använda div-taggar eftersom du behöver dem för din CSS är helt förståeligt, men kanske du kan ta bort några och hitta ett mer brett sätt att hantera det stilproblemet.
Jag gjorde just det här just nu, eftersom jag går igenom ett Ruby on Rails-projekt för närvarande. Tidigare i veckan nestade jag ungefär 5 div inom varandra i HAML av alla saker, bara för att göra något jag ville ha (en låda i en låda i en låda inuti något annat i det här fallet). Och jag tittade bara på det, visste att det var skit, men visste inte ett bättre sätt att göra det, så jag skrapade allt för att göra det igen. Att behöva göra om det gjorde det mycket svårare men det tvingade mig att lära mig ett nytt sätt att hantera den frågan. Och till slut lärde jag mig mycket av det, och jag skulle rekommendera lösningen till någon i framtiden. Gå och ta en av de kunskapsnuggarna själv! De är säkert låga hängande frukter.
Allmänna optimeringar
Det här är flera av de breda ämnena som verkligen inte passar in någon annanstans, men som jag fortfarande känner förtjänar lite uppmärksamhet. Faktum är att några av dessa kan vara de viktigaste sakerna du kan göra för att påskynda en webbapplikation eller webbplats.
Snedstreck på länkar
Detta är märkbart viktigt. När en användare öppnar en länk utan ett snedstreck i slutet av en webbplats måste servern bokstavligen ta reda på vilken typ av fil eller sida som finns på den adressen. Servern kommer då att inkludera nämnda snedstreck, men om du lägger till det själv reducerar du millisekunder av laddningstiden. Dessa millisekunder lägger till, jag lovar. Ofta hittar jag designers speciellt som inte tycker om det, tror att deras ooptimerade kod inte kommer att belasta någonting, men det gör i slutändan. Om du sparar kvartaler i 10 år kommer du säkert att ha mycket pengar, och samma koncept gäller här - bara i mindre eller större skala beroende på webbplatsens trafik.
favicons
Webbläsare gör alltid ett drag för en favicon.ico-fil på root-nivån på din server, så du kan också bara fortsätta och inkludera den. Även om det är något tillfälligt, är det alltid bra att ha. Om du inte gör det kommer webbläsaren själv att ge en "intern 404", och bara cache 404 upp på webbläsarens favicon.ico-avsnitt, och vi vet alla att 404 s snabbare laddningstid minskar.
Minska kakstorleken
Det här kanske inte gäller för oss alla, men om du utvecklar webbapplikationer är det därför viktigt att minska kakstorleken. Till exempel, i det jag är bekant med - Ruby on Rails-applikationer - kan du använda cookies (eller andra metoder) för autentisering från session till session och ofta föredrar människor att använda de andra metoderna eftersom de kan minska användarbelastningstiderna med dem .
Nu innebär en cookie att det cachar saker på din dator så att du kanske tror att det skulle öka laddningstiden, men vanligtvis är allt de bra för att autentisera användarsessioner eller spåra dig på webben (som Google och Facebook har anklagats för ). Om du måste arbeta med Cookies, se till att du håller storleken låg och du använder dem med bättre omdöme. Om du måste, ska du ange utgångsdatumet för att minska belastningstiden.
cache
Detta är ett massivt ämne, och en som jag inte är expert på. Caching är dock ett ganska enkelt koncept. Det lagrar filer (vanligtvis HTML / CSS-kod) från webbplatser som du ofta besöker på din dator så att du inte behöver ladda dem varje gång du besöker.
Det är verkligen en otroligt användbar teknik, och en som många webapplikationer börjar använda under de senaste åren. Det har varit ett antal databaslösningar för caching och förmodligen det mest anmärkningsvärda memcached . Vad det här gör är att lagra en kopia av databasfiler till din webbläsare när du använder en webbapplikation. Så, till exempel, om du har olika profiler du besöker ofta kan det lagra profilbilderna till din dator, och skönheten i Memcached kommer i nästa fas. I din kod kan du faktiskt ringa (innan du drar från DB) från Memcached-servrarna och se om du kan dra en cachad version av filen / filerna. Och om inte kommer det naturligtvis att dra filen från databasen, och om den inte finns i cachen kommer den att lägga till den för att spara tid nästa gång. Detta är ett vackert exempel på caching i stor skala och det har hjälpt ton och ton företag att påskynda servrar och databaser under de senaste 2 + åren.
Och det kommer bara att summera det. Det är självklart inte alla sätt att påskynda din webbplats, men det bör börja toppa din nyfikenhet och få dig att leta efter alla de fantastiska sakerna där ute som kommer.