Alla älskar en cool liten laddningsanimation, eller hur? Men om den avdelningen varar mer än en sekund eller två uppmärksammas det bara att webbplatsen laddas långsamt. Och det är en hemsida mördare.
Användare förväntar sig att webbplatser laddas snabbt och effektivt. Det är ditt jobb att se till att designen inte bara är visuellt tilltalande men också 100 procent funktionell. Om din webbplats drar något, kan du sluta oroa dig just nu eftersom vi har sju tips som hjälper dig att snabba på din webbplats med små tweaks till designen. (Se till att du besöker var och en av de webbplatser som visas i inlägget, de ser bra ut och laddas blixten snabbt.)
1. Var försiktig med animationer
Animering i webbdesign är en av "it"? trenderna för 2015. Bli inte efterlämnad genom att skapa massiva filer som bara inte laddas. Börja med mindre animerade detaljer när du börjar arbeta med denna typ av effekt och fortsätt till större animeringar efter att du har en bra känsla för hur de fungerar och arbetar med din övergripande webbplatsram.
Nyckeln till animeringar laddar inte en massa videofiler till din webbplats. Ju mindre animeringen är desto lättare är det att skapa något med ett litet fotavtryck. Så var börjar du?
Gör något enkelt och roligt, till exempel, skapa ett animerat hover-tillstånd. Att ha en knappändring färg eller expandera är en smidig effekt som hjälper dig att behärska CSS och få en bra känsla för grundläggande animering innan du går vidare till större element. Du kan också överväga AJAX eller parallell laddning animationer. Vad som är bra med någon av dessa alternativ är det som ger dig tid att ladda element utan att användaren ens märker det. Eftersom elementen laddas när användarna bläddrar får du några värdefulla sekunder för att få allt klart.
2. Optimera bilder
Med antalet HD- och näthinnesskärmar tillgängliga för användare kan du frestas att ladda alla dina bilder som full storlek med hög upplösning när du bygger din webbplats. Falla inte i denna fälla. De flesta av dessa bilder är förmodligen alltför stora för att din webbplats ska hantera effektivt.
Känn dina filtyper. De vanligaste filformaten för bilder på webben är JPG, PNG, GIF och SVG.
- JPG: Bäst lämpad för foton kan JPG-filer sträcka sig i storlek från små till stora. När du sparar JPG-filer för webbplatsanvändning, se till att spara en optimerad fil. (I Adobe Photoshop kan du optimera bilder på webben med exportinställningarna under Arkiv> Exportera> Exportera som.)
- PNG: Använd det här filformatet för bilder som innehåller text, så att bokstäverna fungerar bra. Detta är typiskt en ganska liten fil.
- GIF: Det föredragna filformatet för mindre animerade element, till exempel den mest populära animerade meme-stilen. Men akta dig, det här filformatet kan bli tungt om du inte är försiktig.
- SVG: Om du behöver en vektorbild för webben är det här det bästa alternativet. Den kan användas för allt från ikoner till logotyper.
3. Använd kod där det är möjligt
Du kan bli frestad att skapa en massa nifty ikoner och bilder för din webbplats och ladda varje som ett enskilt element. Detta kan orsaka vissa problem. Använd i stället kod för att ringa dessa element när det är möjligt.
Använd CSS för att ladda bakgrundsbilder också. Detta kommer att tvinga? din webbplats för att ladda allt annat framför bakgrunden, så att användare kan börja se andra element och text på webbplatsen genast. W3Schools har en bra och enkel handledning för hur man gör det här.
Det finns massor av verktyg från Font Awesome ikoner till massor av andra CSS och JavaScript-bibliotek som du kan använda för att skapa bra element med roliga effekter som är lätta. (CSS Design Awards har en speciellt trevlig samling av 30 knappar och formelement att prova.)
4. Håll videoklipp kort
Ett annat trendigt webbdesignelement är användningen av helskärmsfilm på din hemsida. Detta kan vara en annan belastningstidfälla. Du kommer att hitta dig själv mellan videokvalitet, videoinnehåll och hastighet och måste göra ett offer någonstans.
De bästa videoklippen är superkorta - bara några sekunder - och loop så att åtgärden inte stannar. Du behöver inte heller inkludera ljud eller andra effekter.
Du kan prova några andra knep för att få din filstorlek så mycket som möjligt.
- Tänk på ett färgöverlägg eller oskärpa över en lägre upplösningsvideo. Det kan fortfarande se snyggt, men behöver inte så mycket bandbredd.
- Tänk på en video som är mindre än helskärm i storlek.
- Ditch autoplay, vilket kan? Trick? Användare att tänka på din webbplats laddar det snabbare än det är.
- Fasta inte fast med långa videor. Om du vill visa flera videoklipp kan du överväga en bild? element eller manuellt byta ut videor på ett schema så att användarna ser något nytt varje gång de besöker webbplatsen. (Oavsett hur bra ditt klipp är, få användare kommer att titta på mer än några sekunder, så ge inte uppladdningstid för längre klipp.)
5. Tänk på temat
Om du använder WordPress eller ett annat innehållshanteringssystem med ett tema, kom ihåg att inte alla teman är byggda desamma. Medan du sannolikt kommer att ha större lycka med ett premiumalternativ - varav några låter dig stänga av? oanvända element - kolla koden och bygga så att det inte är den sak som lägger ner din webbplats.
6. Titta på dina plugins
Har du massor av plugins eller program från tredje part som är knutna till din webbplats? Användar du dem aktivt? Se till att du stänger av oanvända plugin för att optimera effektiviteten.
WordPress-användare kan dra nytta av Plugin Performance Profiler för att se vilka plugins som är aktiva och hur de fungerar. Det här kan hjälpa dig att felsöka och identifiera problem och ta bort eller omkonfigurera dessa plugins. (Ett vanligt problemområde är ofta sociala delningspluggar.)
7. Komprimera, komprimera, komprimera
Inte bara bör de enskilda komponenterna på din webbplats komprimeras men du kan också komprimera webbplatsen som helhet för att hålla den igång snabbt. Bland de element som kan komprimeras är CSS och JavaScript-filer, bilder och video (genom att ändra storlek) och webbplatsen på ett tag med hjälp av ett verktyg som GZIP.
Minifiera filer är den bästa rutten när det gäller plugins och skapa mindre filer. Du vill också kolla hur koden är utformad på webbplatsen. För maximal hastighet ska alla JavaScript vara innehållna i en fil och alla CSS ska finnas i en annan fil. (En annan anteckning: När du placerar den här koden räknas också. Länk CSS till början av sidan och JavaScript till botten för att öka din sidhastighet också.)
Slutsats
Laddas din webbplats snabbt nog? Om inte, är det dags att tweak det för att möta optimala belastningstider. (Om du måste tänka på den här frågan, så är din webbplats inte tillräckligt snabb nog.)
Webbplatser måste vara snabba så att användarna kan interagera omedelbart. Ju längre tid det tar för sidan att ladda, oavsett enhet, desto mer sannolikt är det att användarna helt och hållet kommer att lämna webbplatsen. Så ta några minuter idag eller i veckan och gå igenom den här listan för att säkerställa att din webbplats fungerar optimalt.
Bildkälla: Mohammed Al-Sultan.