Een interface ontwerpen die is gebouwd voor snelheid
Is uw website traag? Wees eerlijk. Zou het sneller kunnen? Gebruikers eisen websites die snel laden en zonder vertraging inhoud blijven leveren. Als uw website het minste achterloopt bij het voldoen aan deze vraag, kunnen gebruikers uw site verlaten (en misschien komen ze nooit meer terug).
Vandaag gaan we kijken naar manieren om ervoor te zorgen dat uw website-interface is gebouwd voor snelheid, zodat u zich nooit meer zorgen hoeft te maken over laadtijden van pagina's.
Verken Envato Elements
Test uw website
Voordat je stopt bij 'het is onmogelijk dat mijn website traag is', test je het uit. Google heeft een geweldige tool die iedereen kan gebruiken om een website te testen door de URL in te voeren.
U krijgt een handig rapport dat u vertelt hoe snel uw site beweegt en waar deze kan worden verbeterd. Het is een goed idee om de test periodiek uit te voeren om ervoor te zorgen dat alles soepel verloopt. (Bovendien breekt het de prestaties af op mobiele en desktop-apparaten en biedt het suggesties voor verbetering.)
Het rapport doet drie aanbevelingen - zou moeten repareren, overwegen te repareren en geslaagd - voor de volgende items:
- Browser caching
- Beeldoptimalisatie
- Serverreactie
- Scripts en CSS boven de vouw
- Compressie
- Omleidingen
- Minificatie van CSS, HTML en JavaScript
- Prioritering van zichtbare inhoud
Dump onnodige plug-ins
Houd je vast aan plug-ins of add-ons die je gewoon niet gebruikt? Het is tijd om ze te dumpen.
Zelfs elementen die niet in gebruik zijn, trekken de snelheid weg van uw site. (Dit geldt vooral als u werkt met een systeem zoals WordPress.)
Ga naar de opruimmodus en verwijder alle ongebruikte plug-ins. Overweeg ook na te denken over plug-ins die in gebruik zijn en zorg ervoor dat u ze daadwerkelijk gebruikt of dat ze bijdragen aan de algehele gebruikerservaring, zo niet een betere optie vinden.
Naast het aantal plug-ins is kwaliteit ook een zorg. Voeg niet zomaar een oude plug-in toe aan uw website. Probeer elementen te vinden die werkelijke waarde bieden en hoog gewaardeerd worden. Oude, verouderde elementen kunnen uw site ook naar beneden slepen.
Deel alleen als dat nodig is
Terwijl we nadenken over plug-ins, hoeveel knoppen voor het delen van sociale media heeft u op uw website? Geef nu eerlijk antwoord: hoeveel heb je er eigenlijk nodig?
Te veel van deze knoppen kunnen voor gebruikers verwarrend zijn - hoeveel gaan ze eigenlijk op meerdere platforms delen - en kunnen de snelheid en laadtijd verzwakken. (Dit geldt met name voor degenen die proberen te achterhalen hoeveel likes of een bericht al heeft met zoekopdrachten die in beide richtingen worden uitgevoerd.)
Kies een of twee netwerken waar u actief bent en waar gebruikers regelmatig verbinding maken met uw website en die knoppen bevatten. Sloot de rest. Ze staan alleen maar in de weg.
Wees op uw hoede voor beeldoverbelasting
Video, illustraties, foto's en animaties ... oh my! Al deze geweldige visuele elementen kunnen bijdragen aan laadtijden. Kies verstandig.
Voordat u een afbeelding aan uw website-ontwerp toevoegt, moet u de waarde ervan afwegen tegen andere elementen. Biedt het iets voor gebruikers? Zo ja, ga verder. Zo niet, waarom gebruikt u dat ontwerpelement?
U moet alle afbeeldingen op de juiste manier voor internet optimaliseren. Over het algemeen mogen afbeeldingen niet groter zijn dan nodig. Ga niet overboord en upload foto's op volledige grootte. Het kost wat werk aan de voorkant, maar je zult blij zijn dat je het later hebt gedaan (vooral als je website blijft groeien).
Profiteer ook van andere trucs. Probeer pictogramlettertypen in plaats van op afbeeldingen gebaseerde pictogrammen. Elementen converteren naar SVG (geschaald vectorformaat) als een pictogramlettertype niet werkt. Gebruik zoveel mogelijk 'magie' van HTML en CSS en laat de site niet vervelen met elementen die worden geladen als foto's, zoals knoppen, pijlen en andere gebruikersinterfacetools.
Ontspan met krimpgereedschap
Kleine bestanden zijn de sleutel tot topsnelheid. De balans is het idee dat u met beeldschermen met hoge resolutie inhoud in topkwaliteit kunt delen en presenteren. Dat is waar krimpende tools binnenkomen.
Als u geen vertrouwen heeft in uw vermogen om te verkleinen en verkleinen - of als u gewoon niet het gewenste resultaat krijgt - probeer dan een van deze opties om bestanden terug te brengen tot de kleinst bruikbare formaten.
- WP Smush verkleint afbeeldingen voor WordPress-gebruikers
- Kraken comprimeert afbeeldingen voor alle gebruikers
- TinyPNG verkleint de grootte van het gemeenschappelijke formaat nog meer
- Gzip verpakt bestanden voor optimale compressie
- Verklein uw CSS verkleint de totale codegrootte en bevat een API
- SpriteMe verandert achtergrondafbeeldingen in een CSS-sprite om HTTP-verzoeken op te slaan
- CSS Compressor verkleint de totale codegrootte
Cache het gewoon
Schakel caching in op uw website.
Als u dit niet doet, betalen uw gebruikers de prijs. Er zijn nog steeds een paar mensen die anders zouden kunnen argumenteren, maar de waarde voor gebruikers weegt zwaarder dan die argumenten. Uw website moet snel zijn.
Een cache maakt een tijdelijk bestand van pagina's zodat de browser de site "onthoudt" wanneer een gebruiker terugkeert. Het vermindert het bandbreedtegebruik, de serverbelasting en de vertragingstijd (werkelijk of waargenomen). Gebruikers zullen je dankbaar zijn, vooral als het gaat om toegang tot grotere websites.
Maak het regelmatig schoon
Net zoals u uw huis regelmatig moet opruimen, moet u uw websitedatabase, links en bestanden opschonen en onderhouden.
Dit zijn de items op de checklist voor het opschonen van uw website:
- Optimaliseer uw database. Na verloop van tijd kan uw database verstopt raken met revisies, buiten gebruik zijnde foto's en opgeslagen gegevens. Je hoeft niet alles te bewaren. Verwijder elementen die niet langer deel uitmaken van uw websiteplan.
- Gebruik geen hotlink-afbeeldingen. Afbeeldingen van de website (en server) van iemand anders naar de uwe trekken is gewoon een slecht idee. En het is traag. Hetzelfde geldt voor bijna elk ander extern bestandsverzoek. Gebruik ze alleen als dat nodig is.
- Koppelingen repareren. Gebroken links vertragen uw site misschien niet, maar het vertraagt de verbinding die gebruikers maken van uw site naar andere plaatsen, wat even slecht kan zijn. Maak er een gewoonte van om naar gebroken links te zoeken en ze te corrigeren.
- Houd alles up-to-date. Als je op een platform als WordPress draait, neem dan de updates. Als u een thema of boxed elementen van welk type dan ook gebruikt, is hetzelfde waar. Updates kunnen patches bevatten die bijdragen aan snelheid en die uw website beschermen tegen potentiële bedreigingen. (En niets is trager dan een site die is gehackt of is geïnfecteerd met malware.)
Gevolgtrekking
Doorloop nu de bovenstaande lijst en ga terug naar de Pagespeed Insights-tool van Google. Voer het opnieuw uit. Merk je een verschil op?
Niets zal een gebruiker gelukkiger maken en meer geneigd zijn om terug te keren naar uw website dan een geweldige en snelle ervaring. Denk er tijdens alle fasen van het visuele ontwerp aan om ook na te denken over het interfaceontwerp, zodat uw website snel is gebouwd.
