Pagespeed Insights uitgelegd/optimalisatie
•Als PPTX, PDF herunterladen•
0 gefällt mir•328 views
Presentatie gegeven op de WordPress meetup in Enschede op 15 December. In deze presentatie vertelde ik over wat Pagespeed is, hoe je resultaten kunt interpreteren en wat oplossingen zijn voor veel voorkomende problemen. Ook geef ik nog wat suggesties voor andere tools die complementair zijn aan pagespeed en ook goede analyses doen.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Pagespeed Insights uitgelegd/optimalisatie
Ähnlich wie Pagespeed Insights uitgelegd/optimalisatie (20)
Pagespeed Insights uitgelegd/optimalisatie
- 1. Google Pagespeed – Site Optimalisatie WordPress Meetup Enschede 15 Dec. - #wpm053
- 2. Victor van den Bosch
- 4. Wat is PageSpeed Insights wel? - Prestatie - Technische best-practices - Snelheid voor bezoekers - Wat bezoekers zien - Enkele paginas
- 5. Wat is PageSpeed Insights niet? - Menselijk - Leidend - Server performance - Compleet
- 7. Waarom PageSpeed Insights gebruiken? - Makkelijk - Beeld van Google - Scores - Interpreteerbaar - Mobiele ervaring
- 8. De problemen die PageSpeed aangeeft - 85+ = Goed - Rood - Geel - Groen - Prioriteiten Voorbeeld
- 9. Wanneer begin je met optimaliseren?
- 10. De ‘simpelere’ suggesties– Speed - Avoid landing page redirects - Leverage browser caching - Prioritize visible content - Reduce server response time
- 11. De ‘simpelere’ suggesties- UX - Avoid interstitials - Avoid (browser) plugins - Configure the viewport - Size content to viewport - Size tap targets appropriately - Use legible font sizes
- 12. De moeilijkere suggesties - Optimize images - Enable Compression - Minify HTML/CSS/Javascript - Remove Render-Blocking JavaScript and CSS
- 13. Oplossingen - Plugin voor image optimalisatie - Server instellingen voor compressie - CSS/JS Minification plugins/tools - HTML veranderingen voor ’render blocking content’
- 14. Remove Render- Blocking JavaScript and CSS Demo / Uitleg
- 15. Andere opties - Responsive afbeeldingen - Lazy-loading afbeeldingen - Critical Path CSS
- 16. Wat is er mogelijk? Voor: Na:
- 17. Verder dan PageSpeed Insights - Webpagetest (website) - Yslow (plugin) - GTMetrix (website) - Dareboost (website)
- 18. Over deze tools… - Programmeerbaar - Overlappend / complementair - Interpretatie lastig - Complexe oplossingen
- 19. Referenties PageSpeed Docs: https://developers.google.com/speed/docs/insights/about https://developers.google.com/web/fundamentals/performance /critical-rendering-path/ WordPress plugins: https://wordpress.org/plugins/wp-smushit/ https://wordpress.org/plugins/ewww-image-optimizer/ https://wordpress.org/plugins/ewww-image-optimizer-cloud/ https://wordpress.org/plugins/google-webfont-optimizer/ Grunt tools: http://gruntjs.com/getting-started https://www.npmjs.com/package/grunt-contrib-imagemin https://www.npmjs.com/package/grunt-contrib-cssmin https://www.npmjs.com/package/uglify-js https://www.npmjs.com/package/grunt-penthouse Andere links: https://jonassebastianohlsson.com/criticalpathcssgenerator/
- 20. SAVVII B.V. Oranjesingel 76 6511 NZ Nijmegen 024 - 820 00 00 info@savvii.nl Vragen? Opmerkingen? Laat het weten!
Hinweis der Redaktion
- Introductie
- Wie gebruikt er wel eens pagespeed? Wie gebruikt het vaak ofdagelijks?
- Website snelheid prestatie analyse Of jou site technisch voldoet aan best-practices Focust op hoe bezoekers de snelheid zouden ervaren Focust op wat bezoekers als eerste ziet Test enkele webpagina’s, en alle benodigdheden Gratis
- Menselijk; De echte ervaring kan nog steeds anders zijn Leidend; Bijt je niet vast in de moeilijke problemen Een test van de performance op de server zelf Een overzicht van je hele website De ultieme tool
- Google’s eigen agenda Betere sites betekend beter te crawlen Beter te crawlen betekend minder kosten/resources voor google Betere resultaten betekend meer bezoekers Meer bezoekers betekend meer advertenties, nog steeds googles hoofdbron voor inkomsten Zie ook Google’s prestatie index in webmaster tools
- Makkelijk en gratis in gebruik Geeft een passend beeld van hoe Google je website ziet, en beoordeeld Duidelijke scores maar ook gedetailleerde uitleg Resultaten zijn makkelijk interpreteer baar Hele goede test voor mobile experience
- 85+ is al gewoon goed Rood - Als u dit corrigeert, heeft dit een meetbare impact op de prestaties van de pagina. Geel - Overweeg dit te corrigeren als dat niet al te veel werk is. Groen - Geen significante problemen gevonden. U bent goed bezig! Prioriteit voor issues kan verschillen tussen mobiel en desktop https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.savvii.nl%2F
- Wanneer je begint met het bouwen van een website. De performance en de optimalisaties moet een van je primaire zorgen zijn bij het bouwen van de website. Denk aan de tools die je gaat gebruiken
- Speed (Mobiel / Desktop) Avoid landing page redirects (geen redirects op landingspagina) Leverage browser caching (gebruik browser caching) Prioritize visible content (prioriteer zichtbare inhoud) Reduce server response time (verminder server reactietijd, ttfb)
- User Experience (Mobiel) Avoid interstitials (vermijd modal overlays) Avoid plugins (vermijd plugins flash, silverlight) Configure the viewport (configureer scherm) Size content to viewport (stem inhoud grootte af op scherm) Size tap targets appropriately (stel de tap doelen groot genoeg in) standaard volwassene vinger is ongeveer 10mm normaal gezien 7mm of 48 css pixels – hoogte en breedte bij kleiner targets moet het tenminste 5mm of 32 css pixels van andere tap targets zijn Use legible font sizes (gebruik leesbare lettertype groottes) font-size 16px verticale ruimte 1.2em
- In volgorde van gemak in oplossen Optimize images Enable Compression Minify HTML/CSS/Javascript
- Images Plugin: wp-smushit Plugin: ewww-image-optimizer (evt. cloud) Grunt Imagemin Compression -> zorg dat gzip aan staat en gebruikt word op server niveau CSS/JS/HTML Minification W3-total-cache of andere plugins (combine) Plugin: google-webfont-optimizer Grunt Gebruik pre-processor voor CSS (SASS/LESS) of bijv. CleanCSS (minifier) Gebruik minifier voor Javascript (UglifyJS) HTML Bijv. Plugin in WordPress, niet te veel moeite in stekencr Mogelijk sowieso nodig om alle CSS/JS in een bestand te compileren Grunt Penthouse voor above-the-fold content
- Browser wacht met laden totdat alle niet-async resources geladen zijn. Wanneer dat te lang duurt, word het als probleem aangemerkt. Makkelijkste oplossing is zorgen dat de kritieke CSS al ingeladen is, en javascript niks constructiefs aanpast na de eerste browser paint. Met tools zoals penthouse js is het mogelijk om de ‘Critical Path CSS’ op te halen van paginas.
- Critical Path CSS https://jonassebastianohlsson.com/criticalpathcssgenerator/
- Paginas: https://savvii-optiimaal.savviihq.com/prijzen-pakketten/ https://www.savvii.nl/prijzen-pakketten/
- Webpagetest (website) + veel locaties, opties & scripting + herhaalde pagina opvraag tests + gegeneraliseerde scores voor verschillende vlakken + gratis - complexiteit instellingen en interpretatie resultaten - scripting werkt soms niet goed - verouderde test locaties YSlow (plugin) + domeinen als cdn toevoegen + regels aan/uitzetten + gratis + via eigen internetverbinding - geen website - interpretatie resultaten is moeilijker GTMetrix (website) + combineert PageSpeed & YSlow + herhalende tests, rapporten, monitoring - kost vrij snel geld Dareboost (website) + mooie interface & rapporten + extreem goede samenvattingen & suggesties + technologie specifieke suggesties + score monitoring - kost veel geld
- Allen op de een of andere manier mee te programmeren Alle tools overlappen op verschillende vlakken Vooral complementair op elkaar Interpretatie blijft een moeilijk punt Problemen zijn vaak niet makkelijk op te lossen
- Allen op de een of andere manier mee te programmeren Alle tools overlappen op verschillende vlakken Vooral complementair op elkaar Interpretatie blijft een moeilijk punt Problemen zijn vaak niet makkelijk op te lossen