7 tips for å få fart på nettstedet ditt i dag
Alle elsker en kul liten lasting-animasjon, ikke sant? Men hvis den divoten varer mer enn et sekund eller to, vekker den bare oppmerksomhet på at nettstedet lastes sakte. Og det er en nettmorder.
Brukere forventer at nettsteder lastes raskt og effektivt. Det er din jobb å sikre at designen ikke bare er visuelt behagelig, men også 100 prosent funksjonell. Hvis nettstedet ditt drar noe, kan du slutte å bekymre deg akkurat nå fordi vi har syv tips som hjelper deg med å få fart på nettstedet ditt med små justeringer til designen. (Sørg for å besøke hver av nettstedene som vises i innlegget; de ser bra ut og laster lynraskt.)
Utforsk Envato Elements
1. Ta vare med animasjoner
Animasjon i nettstedsdesign er en av "it" -trendene i 2015. Ikke bli liggende igjen med å lage massive filer som bare ikke vil laste. Begynn med mindre animerte innslag når du begynner å jobbe med denne typen effekt og gå videre til større animasjoner etter at du har fått en god følelse av hvordan de fungerer og jobber med det generelle nettstedets rammeverk.
Nøkkelen til animasjoner er ikke å laste inn en haug med videofiler til nettstedet ditt. Jo mindre animasjonen er, jo lettere er det å lage noe med et lite fotavtrykk. Så hvor begynner du?
Gjør noe enkelt og morsomt, for eksempel lage en animert svevetilstand. Å ha en knapp for å endre farge eller utvide er en fin effekt som vil hjelpe deg å mestre CSS og få en god følelse av grunnleggende animasjon før du går videre til større elementer. Du kan også vurdere å laste animasjoner fra AJAX eller parallax. Det som er fint med et av disse alternativene, er at det gir deg tid til å laste inn elementer uten at brukeren engang legger merke til det. Fordi elementer lastes når brukerne ruller, får du noen dyrebare sekunder på å gjøre alt klart.
2. Optimaliser bilder
Med antall HD- og retina-skjermer som er tilgjengelige for brukere, kan du bli fristet til å laste alle bildene som full størrelse i høy oppløsning når du bygger nettstedet ditt. Ikke fall i denne fellen. De fleste av disse bildene er sannsynligvis altfor store til at nettstedet ditt kan håndtere effektivt.
Kjenn filtypene dine. De vanligste filformatene for bilder på nettet er JPG, PNG, GIF og SVG.
- JPG: JPG-filer passer best for bilder, og kan variere i størrelse fra bittesmå til enorme. Når du lagrer JPG-filer for bruk på nettstedet, må du huske å lagre en optimalisert fil. (I Adobe Photoshop kan du optimalisere bilder for nettet ved å bruke eksportinnstillingene under Fil> Eksporter> Eksporter som.)
- PNG: Bruk dette filformatet for bilder som inneholder tekst, slik at bokstaver blir godt. Dette er vanligvis en ganske liten fil.
- GIF: Det foretrukne filformatet for mindre animerte elementer, for eksempel det stadig populære animerte meme-stilbildet. Men pass på, dette filformatet kan bli tungtveiende hvis du ikke er forsiktig.
- SVG: Hvis du trenger et vektorbilde for nettet, er dette det beste alternativet. Det kan brukes til alt fra ikoner til logoer.
3. Bruk koden der det er mulig
Du kan bli fristet til å lage en haug med pene ikoner og bilder for nettstedet ditt og laste inn hvert som et individuelt element. Dette kan forårsake noen problemer. Bruk i stedet kode for å ringe disse elementene når det er mulig.
Bruk CSS til å laste bakgrunnsbilder også. Dette vil "tvinge" nettstedet ditt til å laste inn alt annet foran bakgrunnen, slik at brukere kan begynne å se andre elementer og tekst på nettstedet med en gang. W3Schools har en flott og enkel tutorial for hvordan du gjør dette.
Det er mange verktøy som fra Font Awesome-ikoner til mange andre CSS- og JavaScript-biblioteker som du kan bruke til å lage flotte elementer med morsomme effekter som er lette. (CSS Design Awards har en spesielt fin samling av 30 knapper og formelementer å prøve.)
4. Hold korte videoer
Et annet trendy webdesignelement er bruk av fullskjermvideo på hjemmesiden din. Dette kan være en annen falltid. Du vil finne deg selv fanget mellom videokvalitet, videoinnhold og hastighet og vil måtte gi deg et sted.
De beste videoene er super korte - bare et par sekunder - og sløyfe slik at handlingen ikke stopper. Du trenger heller ikke ta med lyd eller andre effekter.
Du kan prøve noen få andre triks for å få ned filstørrelsen så mye som mulig.
- Tenk på et fargeoverlegg eller uskarphet over en video med lavere oppløsning. Det kan fremdeles se pent ut, men vil ikke kreve like mye båndbredde.
- Tenk på en video som er mindre enn fullskjermstørrelse.
- Grøft autospillet, som kan "lure" brukere til å tenke at nettstedet ditt lastes raskere enn det er.
- Ikke bli fast med lange videoer. Hvis du vil vise flere videoklipp, kan du vurdere et "glidebryter" -element eller endre manuelt ut videoer i en plan, slik at brukere ser noe nytt hver gang de besøker nettstedet. (Uansett hvor bra klippet ditt er, vil få brukere se mer enn noen få sekunder, så ikke ofre belastningstid for lengre klipp.)
5. Tenk på temaet
Hvis du bruker WordPress eller et annet innholdsstyringssystem med et tema, husk at ikke alle temaene er like. Selv om du sannsynligvis vil ha mer hell med et premiumalternativ - hvorav noen lar deg "slå av" ubrukte elementer - se nøye på koden og bygg for å sikre at det ikke er det som svir nettstedet ditt.
6. Se på pluginene dine
Har du massevis av plugins eller tredjepartsapplikasjoner knyttet til nettstedet ditt? Bruker du dem alle aktivt? Sørg for å slå av ubrukte plugins for å optimalisere effektiviteten.
WordPress-brukere kan dra nytte av Plugin Performance Profiler for å se hvilke plugins som er aktive og hvordan de fungerer. Dette kan hjelpe deg med å feilsøke og identifisere problemer og fjerne eller konfigurere disse programtilleggene. (Et vanlig problemområde er ofte sosiale plugins.)
7. Komprimere, komprimere, komprimere
Ikke bare skal de enkelte komponentene på nettstedet ditt være komprimert, men du kan også komprimere nettstedet som en helhet for å holde det oppe og gå raskt. Blant elementene som kan komprimeres er CSS- og JavaScript-filer, bilder og video (ved å endre størrelse) og nettstedet en stund ved hjelp av et verktøy som GZIP.
Minifiserte filer er den beste ruten når det gjelder plugins og oppretting av mindre filer. Du vil også sjekke hvordan koden er designet på nettstedet. For maksimal hastighet, bør all JavaScript være inneholdt i en fil, og all CSS skal være i en annen fil. (En annen merknad: Hvor du plasserer denne koden teller også. Koble CSS til toppen av siden og JavaScript til bunnen for å øke nettstedets hastighet også.)
Konklusjon
Lastes nettstedet raskt raskt? Hvis ikke, er det på tide å finpusse den for å møte optimale belastningstider. (Hvis du i det hele tatt må tenke på dette spørsmålet, så er det sannsynligvis ikke nettstedet ditt raskt nok.)
Nettsteder må være raske slik at brukere kan samhandle umiddelbart. Jo lengre tid det tar å laste siden, uavhengig av enhet, desto mer sannsynlig er det at brukere forlater nettstedet helt. Så ta noen minutter i dag eller denne uken, og gå gjennom denne listen for å sikre at nettstedet ditt presterer på et optimalt nivå.
Bildekilde: Mohammed Al-Sultan .
