Als uw site beweegt als een van die luiaards uit de DMV in Zootopia, zijn er manieren waarop u alles kunt herstellen wat het vertraagt. Uitzoeken wat het probleem veroorzaakt, is de helft van de strijd, dus als je eenmaal de oorzaken hebt geïsoleerd, heb je op zijn minst de antwoorden op het oplossen van het probleem.
Hosting van lage kwaliteit is de meest waarschijnlijke boosdoener
Als het gaat om webhosting, betekent het concept van lage kwaliteit niet altijd hetzelfde als in andere contexten. De prijs die u betaalt voor de hosting is bijvoorbeeld niet altijd een juiste weerspiegeling van de kwaliteit die u kunt verwachten. Evenmin is de populariteit van de service of hoe bekend de merknaam is.
Sommige van de meest populaire hosting-merken zijn zelfs de slechtste keuzes, simpelweg omdat te veel mensen ze gebruiken. Het hangt een beetje af van de kwaliteit van hun infrastructuur. Als ze goed in hun technologie investeren, ondervindt u mogelijk geen significante problemen met de prestaties. Aan de andere kant deelt u misschien een enkele server met honderden andere sites, en dat probleem zal toenemen naarmate de schijfopslagcapaciteit blijft groeien.
Dus in die situatie is het mogelijk dat een betere, minder goede keuze is voor een kleinere, minder bekende webhostingservice met goede technologie. Als u dit doet, betekent dit ook dat u meer persoonlijke klantenservice krijgt, op een hoger kwaliteitsniveau dan u van een kolos zou krijgen. Het is de moeite waard om na te denken en het is eenvoudig om te testen door gewoon een abonnement van één maand op de nieuwe host te kopen en de prestaties te vergelijken met uw bestaande site.
Gebruik je F12-sleutel
De meeste webbrowsers zijn zo ingesteld dat hun debug-console toegankelijk is via de F12-sleutel, en die van u is waarschijnlijk geen uitzondering. En over uitzonderingen gesproken, dat is zo ongeveer wat u zoekt, of om precies te zijn, fouten in uw JavaScript-code die uitzonderingen veroorzaken en de prestaties beïnvloeden.
U vindt deze fouten zowel in uw eigen code als in geïmporteerde codebibliotheken zoals jQuery. Alleen al omdat jQuery groot en populair is, betekent nog niet dat het perfect is. Hier is een voorbeeld van het soort ding dat u zoekt:
De in blauw gemarkeerde fouten zijn slechts CSS-fouten en u kunt over het algemeen verwachten deze te zien vanwege de hoeveelheid shimming-ontwikkelaars die u moet doen bij het maken van stylesheets, eenvoudigweg omdat er nog steeds geen enkele standaard is die in alle browsers is gebruikt. Ze mogen normaal gesproken niet van invloed zijn op de prestaties, tenzij u veel animaties of transistion-effecten gebruikt.
Maar die in oranje gemarkeerde fout is een JavaScript-fout, en niet alleen dat, in dit geval is het de jackpot, omdat het ons specifiek vertelt dat deze specifieke fout ervoor zorgt dat de code heel langzaam werkt.
Ontvang gratis advies van Google
Wist u dat Google uw webpagina gratis kan analyseren en u tips kan geven over het oplossen van problemen? Het enige dat u hoeft te doen, is de pagina Paginapeedinzichten van Google bezoeken en de URL invoeren van de pagina die u wilt analyseren.
Het kan echt niet eenvoudiger, hoewel je misschien niet per se religieus al hun advies wilt volgen. Het systeem van Google is goed in het uitzoeken wat je pagina misschien vertraagt, maar sommige oplossingen lossen niet zoveel problemen op als ze maken.
Idealiter wilt u scores boven 85 zien. Hoewel niemand zeker weet, wordt algemeen aangenomen dat de laadtijd van pagina's van grote invloed is op uw paginarang in Google. Wanhoop niet als uw site niet bovenaan in de groene zone staat, want veel grote websites behalen geen fantastische scores.
Enkele opmerkelijke voorbeelden zijn:
- http://bbc.com (70m/77d)
- http://cnn.com (47m/65d)
- http://whitehouse.gov (58m/56d)
- http://microsoft.com (49m/71d)
- http://apple.com (61m/72d)
- http://linux.com (33m/44d)
- http://ubuntu.com (69m/81d)
- http://linuxmint.com (59m/67d)
- http://youtube.com (53m/69d)
- http://facebook.com (49m/81d)
Geen van deze voorbeelden is echt een excuus om je eigen site slecht te laten presteren, maar ze bewijzen wel dat een trage site niet noodzakelijk synoniem is met falen.
Gebruik afbeeldingen correct
Als iemand de juiste afbeelding zou weten formats te gebruiken en wanneer, het moeten ontwerpers zijn, toch? Maar verbazingwekkend genoeg lijken nogal wat van jullie het niet te weten, of wanneer je het weet, denken jullie dat het er niet toe doet. Nou, hier is het nieuws: het doet er altijd toe.
Dit probleem is in een stroomversnelling gekomen sinds een bepaalde sjabloonstijl is goedgekeurd als de standaard voor bedrijfssites, en het is een trend die geen tekenen van vertraging vertoont. Als professionele ontwerper bent u het aan uzelf en uw klanten verplicht om niet in de val te lopen van luie ontwerpsnelkoppelingen.
Een van deze ongelukkige snelkoppelingen gebruikte grote PNG-afbeeldingen voor hero-eenheden bovenaan een pagina (of ergens anders, maar daar vind je ze normaal gesproken wel). Nu is het vanzelfsprekend dat u dit nooit zou moeten doen, zelfs niet als u transparante secties in de afbeelding nodig hebt.
Hier zijn de fundamenten die u in gedachten moet houden bij het maken van dat meesterwerk:
- Gebruik spaarzaam grote afbeeldingen of helemaal niet
Grote afbeeldingen zijn een vreselijk idee, want hoe groter het beeld, hoe langer het duurt om te laden. Nu zijn er een paar verschillende technieken die u kunt gebruiken om grote afbeeldingen veel efficiënter te laten werken, maar voordat we daarover beginnen, laten we zeggen dat u meestal kleinere afbeeldingen moet gebruiken en grote afbeeldingen moet opslaan voor wanneer ze echt nodig.
- Stel de PPI / DPI-waarde op de juiste manier in
Afhankelijk van de grafische editor die u gebruikt, kunnen er waarden voor DPI of PPI worden weergegeven. Dit laatste is beter, omdat dit aangeeft dat uw grafische editor is ontworpen voor gebruik op het web in plaats van afdrukken. Het probleem met het wijzigen van DPI in sommige versies van PhotoShop is dat ze niet alleen de dpi, maar ook de fysieke afmetingen van uw afbeelding aanpassen. Dit is geen probleem in de nieuwste versie van PhotoShop (die gebruik maakt van PPI), dus als u een oudere versie gebruikt, is het tijd om te upgraden. Of gebruik in plaats daarvan GIMP.
- Slice grote afbeeldingen
Dit is waar de magie begint. U zult merken dat veel mensen u vertellen dat het snijden van uw afbeeldingen de laadtijden niet verbetert, omdat u nog steeds hetzelfde aantal bytes downloadt en elke waargenomen verbetering slechts psychologisch is. Die mensen gebruiken de meest luie versie van beeldsnijden, zodat ze de ware mogelijkheden niet kennen.
Nadat je je afbeelding hebt gesneden, heb je de kans om deze te optimaliseren. Stel dat de originele afbeelding in PNG . was format, kunt u nu alle niet-transparante delen converteren naar JPG format, en bespaar veel bytes, waardoor de delen die transparantie vereisen als PNG-afbeeldingen overblijven.
Vervolgens kun je spelen met het compressieniveau van elk individual slice totdat die slice perfect is geoptimaliseerd. Het algehele effect van deze optimalisatie kan resulteren in besparingen van meer dan 50% in vergelijking met de oorspronkelijke niet-geoptimaliseerde afbeelding.
Video kan ook worden geoptimaliseerd
De kunst van videocompressie berust op twee dingen: het doel format en de codec die u gebruikt voor het coderen. Welke format u selecteert, hangt volledig af van uw behoeften. In het algemeen, als u hoge kwaliteit nodig heeft, geeft MP4 met H.264-codering de beste kwaliteit bij hoge compressie, maar als u die hoge kwaliteit niet nodig heeft, bieden WebM en FLV kleinere bestandsgroottes. Je videobewerkingssoftware biedt mogelijk nog steeds FLV als optie, maar het wordt niet aanbevolen om dit te gebruiken format.
Als je dvd-kwaliteit nodig hebt, levert MP4 met H.264-codering uitstekende resultaten, maar dit gaat ten koste van een behoorlijke download. Voor het streamen van video biedt WebM een veel betere compressie. Het probleem is dat niet alle mobiele besturingssystemen WebM nu ondersteunen (dat zouden ze wel moeten doen, maar ze lijken een gekke reden te hebben om dat niet te doen, mogelijk door de gouden regel van de mobiele ontwikkelaar na te volgen: je zult ongemak veroorzaken en je klant zo veel verwarren als je kunt).
Moet u de MPEG-4 codec gebruiken in plaats van H.264 met MP4-video's? Over het algemeen niet, omdat het resulteert in grotere bestandsgrootten op hetzelfde kwaliteitsniveau. Maar als uw video kleine fysieke afmetingen heeft en u wilt een perfecte transmissie van de video voor streaming, is MPEG-4 een goede codec omdat het een ingebouwde foutcorrectie heeft om de gegevensintegriteit te waarborgen.
Hoe zit het met WMV? Nou, dit is een speciaal geval. Het geeft vrijwel dezelfde videokwaliteit als MP4, maar met nog betere compressie. Het nadeel hier is dat Mac- en iOS-gebruikers uw video alleen kunnen bekijken als ze een payware-videoconvertor gebruiken, die een vertraging in de weergave introduceert, wat precies is wat we probeerden te vermijden bij het optimaliseren van onze pagina.
WMV-bestanden hebben geen problemen voor Android-, Windows- of Linux-gebruikers. Maar met 12.5% van de internetgemeenschap die Apple-apparaten gebruikt, moet je beslissen of het de moeite waard is om ze lastig te vallen. Persoonlijk zou ik niet aanbevelen dat je dat alleen doet om een snellere laadtijd te krijgen.
En ten slotte, omdat het internetvideo is, als u weergave op volledig scherm of in de bioscoopmodus niet toestaat, verkleint u de fysieke grootte van de video tot het formaat dat u op uw pagina ziet en ziet u hoeveel bytes u kunt opslaan .
Heb je vragen? Stel ze hier. 0 Reacties