#perfmatters: gereedschapstechnieken voor de performance-ninja
Als u een prestatie-expert wilt worden, is het belangrijk dat u de weg kent in uw ontwikkeltools. Colt doorliep de drie prestatiepijlers: netwerken, berekenen en renderen, en gaf een rondleiding langs de belangrijkste problemen op elk gebied en de beschikbare tools om deze te vinden en uit te roeien.
- U kunt nu Chrome op Android profileren met de DevTools die u kent en waar u van houdt vanaf uw desktop.
- De iteratielus voor prestatiewerk is: gegevens verzamelen, inzicht verwerven, actie ondernemen.
- Geef prioriteit aan items die zich op het kritieke weergavepad voor uw pagina's bevinden.
- Vermijd schilderen; het is super duur.
- Vermijd geheugenverloop en het uitvoeren van code tijdens kritieke momenten in uw app.
#perfmatters: netwerkprestaties optimaliseren
Netwerk en latentie zijn doorgaans verantwoordelijk voor 70% van de totale laadtijd van een site. Dat is een hoog percentage, maar het betekent ook dat alle verbeteringen die u daar aanbrengt grote voordelen zullen opleveren voor uw gebruikers. In dit gesprek besprak Ilya recente wijzigingen in Chrome die de laadtijd zullen verbeteren, evenals enkele wijzigingen die u in uw omgeving kunt aanbrengen om de netwerkbelasting tot een absoluut minimum te beperken.
- Chrome M27 heeft een nieuwe en verbeterde resourceplanner.
- Chrome M28 heeft SPDY-sites (nog) sneller gemaakt.
- De eenvoudige cache van Chrome heeft een revisie ondergaan.
- SPDY / HTTP/2.0 bieden enorme verbeteringen in de overdrachtsnelheid. Er zijn volwassen SPDY-modules beschikbaar voor nginx, Apache en Jetty (om er maar drie te noemen).
- QUIC is een nieuw en experimenteel protocol dat bovenop UDP is gebouwd; het is nog vroeg, maar hoe het ook uitpakt, gebruikers zullen winnen.
#perfmatters: lay-out en weergave met 60 fps
Het halen van 60 fps in uw projecten houdt rechtstreeks verband met de gebruikersbetrokkenheid en is cruciaal voor het succes ervan. In dit gesprek spraken Nat en Tom over de weergavepijplijn van Chrome, enkele veelvoorkomende oorzaken van wegvallende frames en hoe u deze kunt vermijden.
- Een frame is 16 ms lang. Het bevat JavaScript, stijlberekeningen, schilderen en composities.
- Schilderen is extreem duur. Bij een Paint Storm herhaal je onnodig duur schilderwerk.
- Lagen worden gebruikt om geschilderde elementen in de cache op te slaan.
- Invoerhandlers (aanraak- en muiswielluisteraars) kunnen de responsiviteit ondermijnen; vermijd ze als je kunt. Waar je ze niet tot een minimum kunt beperken.
#perfmatters: Instant mobiele webapps
Het kritieke weergavepad verwijst naar alles (JavaScript, HTML, CSS, afbeeldingen) dat de browser nodig heeft voordat deze kan beginnen met het schilderen van de pagina. Prioriteit geven aan de levering van assets op het kritieke weergavepad is een must, vooral voor gebruikers van apparaten met netwerkbeperkingen, zoals smartphones op mobiele netwerken. Bryan vertelde hoe het team van Google het proces van het identificeren en prioriteren van de assets voor de PageSpeed Insights-website doorliep, waarbij de laadtijd van 20 seconden naar iets meer dan 1 seconde ging!
- Elimineer render-blocking JavaScript en CSS.
- Geef prioriteit aan zichtbare inhoud.
- Laad scripts asynchroon.
- Geef de initiële weergave aan de serverzijde weer als HTML en breid deze uit met JavaScript.
- Minimaliseer render-blokkerende CSS; leveren alleen de stijlen die nodig zijn om de initiële viewport weer te geven, en leveren vervolgens de rest.
- URI's met grote gegevens die zijn opgenomen in CSS die weergave blokkeren, zijn schadelijk voor de weergaveprestaties; ze blokkeren bronnen waar afbeeldings-URL's niet-blokkerend zijn.