7 tips om uw website vandaag te versnellen
Iedereen houdt van een coole kleine laadanimatie, toch? Maar als die divot langer dan een seconde of twee duurt, vestigt het er alleen de aandacht op dat de website langzaam laadt. En dat is een websitemoordenaar.
Gebruikers verwachten dat websites snel en efficiënt worden geladen. Het is jouw taak om ervoor te zorgen dat het ontwerp niet alleen visueel aantrekkelijk is, maar ook 100 procent functioneel. Als uw site enigszins sleept, hoeft u zich nu geen zorgen meer te maken omdat we zeven tips hebben om u te helpen uw website te versnellen met kleine aanpassingen aan het ontwerp. (Zorg ervoor dat u alle websites in de post bezoekt, ze zien er geweldig uit en laden razendsnel.)
Verken Envato Elements
1. Wees voorzichtig met animaties
Animatie in website-ontwerp is een van de "it" -trends van 2015. Blijf niet achter door enorme bestanden te maken die gewoon niet kunnen worden geladen. Begin met kleinere geanimeerde aanrakingen terwijl u met dit type effect begint te werken en ga verder met grotere animaties nadat u een goed idee hebt van hoe ze werken en werken met uw algehele websiteframework.
De sleutel tot animaties is niet het laden van een aantal videobestanden op uw website. Hoe kleiner de animatie, hoe gemakkelijker het is om iets te maken met een kleine voetafdruk. Dus waar begin je?
Doe iets eenvoudigs en leuks, zoals een geanimeerde zweeftoestand maken. Een knop van kleur veranderen of uitbreiden is een handig effect dat je zal helpen de CSS onder de knie te krijgen en een goed gevoel te krijgen voor basisanimatie voordat je verder gaat met grotere elementen. U kunt ook overwegen om animaties met AJAX of parallax te laden. Het leuke van een van deze opties is dat je tijd hebt om elementen te laden zonder dat de gebruiker het merkt. Omdat elementen worden geladen terwijl gebruikers scrollen, wint u een paar kostbare seconden om alles klaar te maken.
2. Optimaliseer afbeeldingen
Met het aantal HD- en retina-schermen dat beschikbaar is voor gebruikers, komt u misschien in de verleiding om al uw afbeeldingen op volledige grootte en met hoge resolutie te laden wanneer u uw website bouwt. Val niet in deze val. De meeste van deze afbeeldingen zijn waarschijnlijk veel te groot om uw site efficiënt te kunnen verwerken.
Ken uw bestandstypen. De meest gebruikelijke bestandsindelingen voor afbeeldingen op internet zijn JPG, PNG, GIF en SVG.
- JPG: het meest geschikt voor foto's, JPG-bestanden kunnen variëren van klein tot groot. Zorg ervoor dat u bij het opslaan van JPG-bestanden voor websitegebruik een geoptimaliseerd bestand opslaat. (In Adobe Photoshop kunt u afbeeldingen voor het web optimaliseren met de exportinstellingen onder Bestand> Exporteren> Exporteren als.)
- PNG: gebruik dit bestandsformaat voor afbeeldingen die tekst bevatten, zodat belettering goed wordt weergegeven. Dit is meestal een vrij klein bestand.
- GIF: het bestandsformaat dat de voorkeur heeft voor kleinere geanimeerde elementen, zoals de immer populaire geanimeerde meme-achtige afbeelding. Maar pas op, dit bestandsformaat kan zwaar worden als je niet oppast.
- SVG: als u een vectorafbeelding voor het web nodig heeft, is dit de beste optie. Het kan voor alles worden gebruikt, van pictogrammen tot logo's.
3. Gebruik code waar mogelijk
U komt misschien in de verleiding om een aantal handige pictogrammen en afbeeldingen voor uw website te maken en deze als afzonderlijk element te laden. Dit kan enkele problemen veroorzaken. Gebruik in plaats daarvan code om deze elementen waar mogelijk aan te roepen.
Gebruik CSS om ook achtergrondafbeeldingen te laden. Dit "dwingt" uw site om al het andere voor de achtergrond te laden, zodat gebruikers meteen andere elementen en tekst op de site kunnen zien. W3Schools heeft een geweldige en eenvoudige tutorial om dit te doen.
Er zijn tal van tools zoals Font Awesome-pictogrammen tot tal van andere CSS- en JavaScript-bibliotheken die u kunt gebruiken om geweldige elementen te maken met leuke effecten die licht van gewicht zijn. (CSS Design Awards heeft een bijzonder mooie verzameling van 30 knoppen en vormelementen om te proberen.)
4. Houd video's kort
Een ander trendy element voor webdesign is het gebruik van video op volledig scherm op uw homepage. Dit kan een andere laadtijdval zijn. Je zult merken dat je gevangen zit tussen videokwaliteit, videocontent en snelheid en je zult ergens een offer moeten brengen.
De beste video's zijn superkort - slechts een paar seconden - en lopen zodat de actie niet stopt. U hoeft ook geen geluid of andere effecten op te nemen.
Je kunt een paar andere trucs proberen om je bestandsgrootte zoveel mogelijk te verkleinen.
- Denk aan een kleuroverlay of onscherpte bij een video met een lagere resolutie. Het kan er nog steeds netjes uitzien, maar heeft niet zoveel bandbreedte nodig.
- Overweeg een video die kleiner is dan het volledige scherm.
- Sloot de autoplay, die gebruikers kan "misleiden" om te denken dat uw site sneller laadt dan het is.
- Loop niet vast met lange video's. Als u meerdere videoclips wilt laten zien, overweeg dan een video-slider-element of wijzig video's handmatig volgens een schema, zodat gebruikers elke keer dat ze de site bezoeken iets nieuws zien. (Hoe goed je clip ook is, weinig gebruikers zullen meer dan een paar seconden kijken, dus offer de laadtijd niet op voor langere clips.)
5. Denk na over het thema
Als je WordPress of een ander content management systeem met een thema gebruikt, onthoud dan dat niet alle thema's hetzelfde zijn opgebouwd. Hoewel u waarschijnlijk meer geluk zult hebben met een premium-optie - waarvan u sommige ongebruikte elementen kunt "uitschakelen" - moet u de code goed bekijken en bouwen om er zeker van te zijn dat dit niet het ding is dat uw site vastloopt.
6. Let op uw plug-ins
Heeft u een heleboel plug-ins of applicaties van derden die aan uw site zijn gekoppeld? Gebruikt u ze allemaal actief? Zorg ervoor dat u ongebruikte plug-ins uitschakelt om de efficiëntie te optimaliseren.
WordPress-gebruikers kunnen profiteren van de Plugin Performance Profiler om te zien welke plug-ins actief zijn en hoe ze werken. Dit kan u helpen bij het oplossen en identificeren van problemen en het verwijderen of opnieuw configureren van die plug-ins. (Een veelvoorkomend probleemgebied zijn vaak plug-ins voor sociaal delen.)
7. Comprimeren, comprimeren, comprimeren
Niet alleen moeten de afzonderlijke componenten van uw website worden gecomprimeerd, maar u kunt ook de site als geheel comprimeren om hem snel up and running te houden. Onder de elementen die kunnen worden gecomprimeerd zijn de CSS- en JavaScript-bestanden, afbeeldingen en video (door het formaat te wijzigen) en de site als een tijdje met behulp van een tool zoals GZIP.
Verkleinde bestanden zijn de beste route als het gaat om plug-ins en het maken van kleinere bestanden. U wilt ook controleren hoe de code binnen de site is ontworpen. Voor maximale snelheid moet alle JavaScript in één bestand staan en alle CSS in één ander bestand. (Nog een opmerking: waar u deze code plaatst, telt ook. Link CSS naar de bovenkant van de pagina en JavaScript naar de onderkant om ook uw sitesnelheid te verhogen.)
Gevolgtrekking
Wordt uw site snel genoeg geladen? Zo niet, dan is het tijd om het aan te passen om de optimale laadtijden te halen. (Als u überhaupt over deze vraag moet nadenken, dan is uw site waarschijnlijk niet snel genoeg.)
Websites moeten snel zijn, zodat gebruikers onmiddellijk kunnen communiceren. Hoe langer het duurt voordat de pagina is geladen, ongeacht het apparaat, hoe groter de kans dat gebruikers de site helemaal verlaten. Neem dus vandaag of deze week een paar minuten de tijd en doorloop deze lijst om ervoor te zorgen dat uw site optimaal presteert.
Afbeeldingsbron: Mohammed Al-Sultan .
