Share
När du vill optimera en webbplatss prestanda manuellt, utan att använda ett färdigt tillvägagångssätt som AMP, vilka är de viktigaste stegen du behöver ta?
I den här videon från min kurs Optimera din webbplats utan AMP hittar du en enkel checklista som du kan använda för att säkerställa att din webbplats laddar lika snabbt som möjligt med AMP, om inte snabbare.
Här är den grundläggande optimeringschecklistan vi arbetar med:
Som du kan se är denna checklista deluppgifter som vi behöver slutföra, det är delprinciper som vi måste följa, och det är också delmål som vi vill uppnå. Låt oss titta närmare på var och en av dem.
Det första på vår lista är ett mål, och det vill säga, vi vill att vår sajt ska laddas så fort eller snabbare än AMP-versionen av samma sajt. Det är en bra idé att hålla koll på din lasttid när du följer med din utvecklingsprocess, så det är vad vi ska göra när vi arbetar igenom allt.
Låt oss nu komma in på de tekniska saker som vi behöver göra. Det första övervägandet är att vi vill få alla webbfonter som vi ska ladda ner så snabbt som möjligt.
Webfonter är ofta relativt stora filer, och du kan inte visa ditt innehåll ordentligt tills de webbfonter laddas. Så vi ska se till att vi får de webbfonterna laddade mycket tidigt på bilden, förmodligen som det första som börjar ladda.
Nästa sak som vi ska göra är att se till att vår CSS är mycket effektiv och väldigt liten i storlek.
Ibland kan du frestas att ta en genväg och inkludera ett massivt bibliotek av CSS i dina webbplatser för att hjälpa till att påskynda utvecklingsprocessen, även om det mesta av den CSS inte är nödvändigt.
Att kasta i en massiv CSS-fil kan hjälpa till att påskynda din utveckling, men det kommer förmodligen att sakta ner din webbplats och minska prestandan för dina webbplatser i sökmotorer. Jag säger det därför att lasthastigheten är en rankningsfaktor. Så det är viktigt för din CSS att vara så liten och effektiv som möjligt.
Du ska också ta den CSS och ladda den inline i huvuddelen av webbplatsen. Det här är en teknik som AMP använder, och det är en utmärkt optimeringsteknik. Så det är en som vi definitivt ska hålla på med vår egen optimeringsprocess.
Även om vår CSS kommer att vara inline i huvudavsnittet vill vi fortfarande jobba på vår CSS i separata filer. Att försöka skriva CSS direkt i huvuddelen av en HTML-fil är verkligen inte så praktisk. Så vi ska få allt upprättat så att vi kan arbeta på våra CSS-filer externt och sedan få dem inline i HTML-filerna senare, så vi får det bästa av båda världarna.
Nästa sak som vi ska göra är att i största möjliga utsträckning varje JavaScript som vi använder kombineras och minifieras.
En av nackdelarna med att arbeta med AMP är att du har flera JavaScript-filer som du måste ta med, och var och en av dem måste komma in separat. Men i största möjliga utsträckning ska vi ta vår JavaScript och kombinera den i en enda fil, så att vi har det absoluta minimala antalet webbläsarförfrågningar.
För att göra båda dessa saker hända-arbetar på CSS externt och kombinerar och minifierar JavaScript-vi kommer att inrätta en byggprocess som gör att båda dessa saker händer automatiskt.
Vi använder Gulp för att göra det. Det betyder att du måste ha Node installerat på ditt system, och du måste också dabble lite i att använda terminalen. Men under kursen ska jag styra dig igenom vad du ska göra, så även om du inte har arbetat med terminalen, borde du vara bra.
Nästa upp är att vi bara ska använda asynk (asynkron) JavaScript. Vad det här betyder är att sättet som vi ska ladda våra JavaScript inte kommer att förhindra att något annat på sidan laddas samtidigt.
En annan sak som vi kommer att göra med vår JavaScript är att vi ska skjuta upp det. Det betyder att vi ska driva vår JavaScript-rätt till slutet av renderingsprocessen. Vi ska se till att allt annat på vår sida är fullt laddat innan vi gör någonting med JavaScript alls.
Vi ska också se till att varje bit av JavaScript vi använder är vanilla JavaScript, och vi gör det för att se till att vi inte har beroenden. Om vi använder, säger en ljuskälla som beror på jQuery, måste vi ladda jQuery till vår webbplats, och det är mer filstorlek och mer behandling för att webbläsaren ska hantera.
Det är ofta inte nödvändigt att använda flera JavaScript-bibliotek. Du kan ofta uppnå den funktionalitet som du vill ha lika bra med vanilj JavaScript.
Vi kommer också att föredra enkel JavaScript. Så vi ska försöka hålla filstorleken på vår JavaScript ner till ett absolut minimum. Vi vill inte ha massor av klockor och visselpipor; Vi vill hålla allt så tätt och effektivt som möjligt.
Och den sista punkten på JavaScript är att vi vill se till att vi i bästa möjliga grad tillgodoser personer som har JavaScript avstängt.
Med AMP-versionen av webbplatsen som vi ska skapa, om vi stänger av JavaScript kan du se att vi inte har mycket innehåll att titta på.
Det finns lite mer som vi kan göra med den här webbplatsen för att göra det lite mer fallback-friendly. Men för det mesta beror AMP helt på JavaScript för att ge dig någon typ av innehåll alls.
Med vår icke-AMP-version har vi fortfarande vår bakgrundsbild som visas bra, och vi lägger faktiskt också en del fallback för typsnittsymboler här också, för ofta människor som blockerar JavaScript-block typsnitt också.
Vi har ett meddelande som låter folk veta varför YouTube-videon inte kan visas, och samma sak nedan där vår CodePen skulle vara.
Vårt galleri visar fortfarande upp detsamma, och sedan ner längst ner, vi har bara textversionen av våra tweets som en fallback om det inte finns något JavaScript.
Vi ska också se till att vi använder lat laddning på både bilder och iframes. Om du har en webbplats som är ganska lång, kommer personen normalt att titta på vad som står högst upp på den webbplatsen först och sedan rullar de ner och tittar på resten av innehållet.
Men du vill inte få dem att vänta på att resten av innehållet ska laddas innan de kan börja titta på vad som står högst upp i innehållet. Så, med lat laddning laddar du bara vad som är högst först och sedan laddar du gradvis resten av innehållet när personen rullar ner.
Slutligen ska vi också se till att vi förhindrar återflöde. Något som du ofta ser, speciellt på mobilen, är att så långsammare element laddar in, till exempel bilder, till exempel, måste resten av sidlayouten justera sig runt den nybildade bilden.
Det här är dåligt av ett antal skäl:
Optimera din webbplats utan AMP under hela kursen, du lägger denna checklista i praktiken. Du lär dig exakt hur du tar en befintlig AMP-baserad webbplats och konverterar den till att använda icke-AMP-ekvivalenter. Med andra ord lär du dig hur du får dina webbplatser att fungera snabbt, med optimeringstekniker som du själv bestämmer.
Du kan ta kursen direkt med en abonnemang på Envato Elements. För en enda månatlig avgift får du inte bara tillgång till kursen utan också till vårt växande bibliotek med över 1000 videokurser och branschledande e-böcker på Envato Tuts+.
Dessutom får du obegränsade nedladdningar från det enorma Envato Elements-biblioteket med 400 000 kreativa tillgångar. Skapa med unika teckensnitt, foton, grafik och mallar, och leverera bättre projekt snabbare.
Accentsconagua