Een beginnershandleiding voor website-optimalisatie

Afbeelding afkomstig van Pexels.

Ik ben een beginner en ik heb 99/100 behaald in de optimalisatierangschikking van Google. Als ik het kan, kan jij het ook.

Als je net als ik bent, hou je van bewijs. Dus hier zijn de resultaten van PageSpeed ​​Insights van Google voor probleemloos eten, een website die ik onderhoud en onlangs wat tijd heb besteed aan het optimaliseren van:

Een screenshot van mijn PageSpeed ​​Insights-score.

Ik ben behoorlijk trots op deze resultaten, maar ik wil benadrukken dat ik een paar weken geleden nog geen idee had hoe ik een website kon optimaliseren. Wat ik vandaag met je moet delen, is gewoon het resultaat van heel veel googlen en probleemoplossing, pijnen die ik je wil besparen.

Dit artikel is opgedeeld in subsecties voor elke optimalisatie, voor het geval u wilt rondspringen.

Ik ben zeker geen expert, maar ik heb er vertrouwen in dat als je de onderstaande technieken implementeert, je resultaten zult zien!

Afbeeldingen

Afbeelding afkomstig van Pexels (en zeker geoptimaliseerd door Medium).

Als een beginnende web-ontwikkelaar, waren afbeeldingen niet iets waar ik ooit veel aandacht aan heb besteed. Ik wist dat het toevoegen van afbeeldingen van hoge kwaliteit aan mijn website er professioneler zou uitzien, maar ik ben nooit gestopt om de effecten te overwegen die ze op de laadtijd van mijn pagina zouden hebben.

Het belangrijkste dat ik deed om mijn afbeeldingen te optimaliseren, was ze comprimeren.

Terugkijkend had dit vanaf het begin vrij intuïtief moeten zijn, maar het was niet voor mij, dus misschien ook niet voor jou.

De service die ik gebruikte om mijn afbeeldingen te comprimeren was Optimizilla, een eenvoudig te gebruiken website waar u uw afbeeldingen uploadt, het gewenste compressieniveau selecteert en vervolgens de gecomprimeerde afbeelding downloadt. Ik zag de grootte naar boven afnemen met 70% voor sommige van mijn middelen, wat een lange weg is naar snellere laadtijden.

Optimizilla is nauwelijks de enige keuze voor uw beeldcompressiebehoeften. Sommige zelfstandige open-source software die u kunt gebruiken is ImageOptim voor Mac of FileOptimizer voor Windows. Als u liever comprimeert met build-tools, zijn er Gulp- en WebPack-plug-ins die het lukken. Het maakt niet zoveel uit hoe je het doet, zolang je het doet. De prestatiewinst is de minimale inspanning zeker waard.

Afhankelijk van uw gebruik, is het misschien ook de moeite waard om naar de indeling van uw bestanden te kijken. Over het algemeen wordt jpg kleiner dan png. Het belangrijkste verschil in of ik het een of het ander gebruik, is of ik transparantie achter de afbeelding nodig heb: als ik transparantie nodig heb, gebruik ik png, anders gebruik ik jpg. Je kunt hier dieper ingaan op de voor- en nadelen van beide.

Google heeft ook een web-indeling uitgebracht die behoorlijk zoet is, maar omdat het nog niet door alle browsers wordt ondersteund, aarzel ik om het te gebruiken. Let op verdere ondersteuning in de toekomst!

Ik heb niet meer gedaan dan mijn afbeeldingen comprimeren om de resultaten te krijgen die ik je hierboven heb laten zien, maar als je verder wilt optimaliseren, is hier een geweldig artikel.

Video

Foto door Terje Sollie uit Pexels.

Ik heb geen video gebruikt in mijn huidige projecten, dus ik zal hier slechts kort op ingaan, omdat ik niet het gevoel heb dat ik hiervoor de beste bron ben.

Dit is een van die situaties waarin ik de professionals waarschijnlijk het zware werk zou laten doen. Vimeo biedt een uitstekend platform voor het hosten van video's waar ze de videokwaliteit verslechteren voor langzamere verbindingen en uw video's comprimeren om de prestaties te optimaliseren.

Je kunt je video's ook op YouTube hosten en deze youtube-dl-tool gebruiken om ze van YouTube te downloaden terwijl je de video's configureert volgens de behoeften van je website.

Bekijk Brightcove, Sprout of Wistia voor andere mogelijke oplossingen.

gzip

Snap je? Zip? Afbeelding afkomstig van Pexels.

Ik had geen idee wat gzippen was toen ik mijn website aanvankelijk implementeerde.

Om een ​​lang verhaal kort te maken, gzip is een bestandscompressie-indeling die de meeste browsers begrijpen en die achter de schermen kan draaien zonder dat de gebruiker zelfs maar hoeft te weten dat dit gebeurt.

Afhankelijk van waar u uw applicatie host, kan gzipping zo eenvoudig zijn als het omdraaien van een configuratieschakelaar om aan te geven dat uw server bestanden moet gzipen wanneer ze worden verzonden. In mijn geval wordt mijn website gehost op Heroku, die deze optie niet biedt.

Het blijkt dat er pakketten zijn om compressie expliciet in uw servercode toe te voegen, waarmee u de voordelen van gzipping kunt benutten in ruil voor slechts een paar coderegels. Met deze compressiemiddleware kon ik de grootte van mijn Javascript- en CSS-bundels met 75% verminderen.

Het is de moeite waard om te controleren of uw hosting-service een gzip-optie biedt. Als dit niet het geval is, kijk dan hoe u gzipping kunt toevoegen aan uw server-side code.

Minificatie

Geminimaliseerde ananas met dank aan Pexels.

Minificatie is het proces van het verwijderen van onnodige tekens uit code zonder de functionaliteit ervan aan te tasten (witruimte, tekens met een nieuwe regel, enzovoort). Hiermee kunt u de grootte verkleinen van het bestand dat u via internet vervoert. Het is ook handig voor het verhullen van uw code, waardoor het voor stiekeme hackers moeilijker wordt om zwakke punten in de beveiliging te detecteren.

Tegenwoordig wordt het minificeren meestal gedaan als onderdeel van het bouwproces met Webpack of Gulp of een alternatief. Deze build-tools kunnen echter een beetje een leercurve hebben, dus als u op zoek bent naar eenvoudigere alternatieven, beveelt Google HTML-Minifier voor HTML, CSSNano voor CSS en UglifyJS voor Javascript aan.

Browser-Caching

Niet helemaal hoe de browser gegevens opslaat, maar het is zo dichtbij als ik kon krijgen. Hoffelijkheid van Pexels.

Het opslaan van statische bestanden in het cachegeheugen van de browser is een zeer efficiënte manier om de snelheid van uw website te verhogen, vooral bij terugkerende bezoeken van dezelfde klant. Ik was me er niet van bewust, totdat Google me vertelde, dat sommige van mijn bronnen niet correct in de cache werden geplaatst vanwege ontbrekende headers in de HTTP-reactie die ik vanaf mijn server stuurde.

Zodra mijn startpagina is geladen, wordt er een verzoek bij mijn server ingediend om gegevens op te halen over een aantal nummers die vervolgens in een muziekspeler worden weergegeven. Ik werk de nummers op deze website niet zo vaak bij, dus ik vind het niet erg als een gebruiker naar mijn website komt en dezelfde nummers ziet van de laatste keer dat ze hem hebben bezocht, als mijn pagina hierdoor wat sneller wordt geladen.

Om een ​​prestatieboost te krijgen, heb ik de volgende code toegevoegd aan het reactieobject van mijn server (Express / Node-server):

res.append ("Cache-Control", "max-age = 604800000");
res.status (200) .json (respons);

Het enige dat ik hier doe, is een cache-controlekop toevoegen aan mijn reactie, die zegt dat na een week (in milliseconden) de bronnen opnieuw moeten worden gedownload. Als u deze bestanden vaker bijwerkt, kan een kortere maximale leeftijd een goed idee zijn.

Inhoudsdistributienetwerk

Realistisch beeld van een CDN, met dank aan Pexels.

Een contentdistributienetwerk, of CDN, is een netwerk waarmee gebruikers van over de hele wereld geografisch dichter bij uw content kunnen komen. Als een gebruiker een grote afbeelding uit Japan moet laden, maar uw server zich in de Verenigde Staten bevindt, duurt dit langer dan als u een server in Tokio had.

Met een CDN kunt u profiteren van een aantal proxyservers over de hele wereld, waardoor uw inhoud sneller kan worden geladen, ongeacht waar uw eindgebruiker zich bevindt.

Ik wil opmerken dat ik in staat was om de resultaten te bereiken die je hierboven zag voordat ik een CDN implementeerde - ik wilde ze gewoon vermelden omdat geen enkel artikel over website-optimalisatie compleet zou zijn zonder ze te vermelden. Het hebben van een van deze bad boys op uw website is absoluut noodzakelijk als u van plan bent om een ​​wereldwijd publiek te hebben.

Sommige populaire CDN's zijn CloudFront en CloudFlare.

Diversen

Hier zijn nog een paar tips om nog meer sap eruit te persen:

  • Optimaliseer uw website om eerst inhoud boven de vouw te laden om de waargenomen prestaties van uw site te verbeteren. Een veel voorkomende manier om dit te doen, is door afbeeldingen op een luie manier te laden die niet op de bestemmingspagina verschijnen.
  • Tenzij uw applicatie afhankelijk is van Javascript om HTML te renderen, zoals een website gebouwd met Angular of React, dan is het waarschijnlijk veilig om uw scripttags onderaan het hoofdgedeelte van uw HTML-bestand te laden. Dit kan echter uw time-to-interactive beïnvloeden, dus het is NIET een techniek die ik voor elke situatie zou aanbevelen.

Tot slot

Dit is slechts het topje van de ijsberg als het gaat om het optimaliseren van uw website. Afhankelijk van de hoeveelheid verkeer die u ontvangt en de service die u levert, kunt u prestatieproblemen hebben op veel verschillende gebieden. Misschien heb je meer servers nodig, misschien heb je een server met meer RAM nodig, misschien kan je triple-genestelde for-loop wat refactoring gebruiken - wie weet?

Er is geen one-size-fits-all als het gaat om het versnellen van uw site, en u zult uiteindelijk de beste beslissingen voor uw situatie moeten nemen op basis van metingen. Verspil uw tijd niet aan het optimaliseren van iets dat niet hoeft te worden geoptimaliseerd. Analyseer de prestaties van uw site om knelpunten te vinden en val deze dan specifiek aan.

Ik hoop dat je iets nuttigs hebt gevonden in dit artikel! Zoals ik al zei, moet ik nog veel leren op dit gebied. Als je nog meer tips of aanbevelingen hebt, laat ze dan achter in de reacties hieronder!

Als je dit artikel leuk vond, geef het dan een paar klappen en bekijk:

  • Tools waarvan ik wou dat ik het wist toen ik begon met coderen
  • Tools waarvan ik wou dat ik het wist toen ik begon met coderen: Revisited

Geef me ook een follow-up op Twitter.