Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Speeding up WordPress

778 Aufrufe

Veröffentlicht am

Talk about techniques to optimize the loading speed and overall performance of your WordPress website. This talk was presented at WP Meetup Antwerp.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Speeding up WordPress

  1. 1. Speeding up WordPress @BRECHTRYCKAERT
  2. 2. Brecht Ryckaert • WORKS @ COMBELL.COM • WP USER SINCE 1.5 • SPECIALIZED IN SECURITY & OPTIMIZATION • WROTE A BOOK
  3. 3. Coming SOON!  Laat uw e-mailadres na op wpsecurity101.com en krijg een kortingscode (-50%) in de lanceringsweek!
  4. 4. FEIT! De gemiddelde bezoeker verlaat je website als deze binnen de 3 seconden niet geladen is !!!
  5. 5. Wanneer we een nieuwe site lanceren of publiceren, verwachten we dus dit...
  6. 6. Maar occasioneel krijgen we dit...
  7. 7. WAAROM ?!?
  8. 8. STAP 1 MET FIREBUG & PAGESPEED ANALYSE
  9. 9. Firebug voor Mozilla Firefox
  10. 10. Tabblad “Net”
  11. 11. Tabblad “Net”
  12. 12. Tabblad “Net”
  13. 13. Tabblad “Net”
  14. 14. Tabblad “Net”
  15. 15. Tabblad “Net”
  16. 16. Idealiter...  30 tot 50 elementen (concurrent browser connections)
  17. 17. Concurrent Browser Connections  Beperkende factor in laadtijd bij mobiele en oudere browsers  Bepaalt het maximum aantal elementen dat simultaan geladen kan worden
  18. 18. Concurrent Browser Connections Te veel requests!
  19. 19. Idealiter...  30 tot 50 elementen (concurrent browser connections)  0.5 tot 1.5 MB
  20. 20. Concurrent Browser Connections Te groot!
  21. 21. Grootte afbeeldingen
  22. 22. Grootte afbeeldingen
  23. 23. Grootte afbeeldingen
  24. 24. Pagespeed Insights
  25. 25. Pagespeed Insights
  26. 26. Grootte afbeeldingen
  27. 27. Concurrent Browser Connections Te groot javascript!
  28. 28. STAP 2 OPTIMALISATIE
  29. 29. Concurrent Browser Connections  Beperkende factor in laadtijd bij mobiele en oudere browsers  Bepaalt het maximum aantal elementen dat simultaan geladen kan worden
  30. 30. Concurrent Browser Connections  Domain Sharding images => img.domain.extension js => js.domain.extension css => css.domain.extension  Elk domein/subdomein krijgt x-aantal concurrent connections => sneller inladen alle elementen
  31. 31. Performance over functionality!  Evalueer functionaliteiten of ze echt wel noodzakelijk zijn voor de werking van je website.  Is de extra gimmick ook de extra laadtijd waard?  Verzwarende factoren: - Video background - Multimedia sliders - ...
  32. 32. Optimaliseer foto’s vooraf  Verklein de resolutie zo sterk mogelijk (upload nooit foto’s die rechtstreeks van de camera komen!!!)  Pas een sterke compressie toe (30% bij jpg)
  33. 33. Optimaliseer foto’s vooraf
  34. 34. Optimaliseer Database  Kleinere database = snellere responstijden  WordPress zorgt echter standaard voor een nogal “vervuilde database”. => bijhouden revisies, posts/pagina’s in trash, spam comments, ...
  35. 35. Optimaliseer Database  https://wordpress.org/plugins/rvg-optimize-database/
  36. 36. Caching plugins  Houden bepaalde zaken in RAM of op DISK  Geen nieuwe database query nodig.  Serveren meestal vooraf gegenereerde HTML output = SNEL!  Heel wat keuze binnen de WordPress plugin repository!
  37. 37. Caching plugins  WP Super Cache  W3 Total Cache  WP Fastest Cache  Gator Cache  Blunt Cache  Next Level Cache  ....
  38. 38. Caching Plugins Ik gebruik geen van deze!
  39. 39. My preferred caching plugin!  For small sites: Wordfence!
  40. 40. Wordfence’s Falcon Engine https://ma.ttias.be/benchmarking-the-performance-of-wordfence-a-wordpress-plugin/
  41. 41. STAP 3 SERVER SIDE
  42. 42. Beperkende Server Settings  MAX CLIENTS Apache server setting – Definieert harde limiet aantal simultane bezoekers. Overschrijven van deze limiet = ontstaan wachtrij!
  43. 43. Beperkende Server Settings  MAX CONNECTIONS MYSQL server setting – Definieert harde limiet aantal simultane database- verbindingen. Overschrijven van deze limiet = “Unable to connect to database”!
  44. 44. STAP 4 SERVER SIDE OPTIMALISATIE
  45. 45. GZIP Compression
  46. 46. GZIP Compression
  47. 47. GZIP Compression
  48. 48. Enable GZIP compression  Toevoegen aan .htaccess: #ENABLE GZIP COMPRESSION AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript
  49. 49. Entity Tags  Entity Tags zijn een mechanisme waarmee gecontroleerd kan worden als de zaken in de browsercache overeen komen met deze op de server. Het uitschakelen van deze entity tags kan zorgen voor een lagere laadtijd, betere performantie én een lagere serverload.  Toevoegen aan .htacces: #Disable Entity Tags Header unset Etag FileETag None
  50. 50. Mod_Expires  Hiermee kunnen we controle nemen over de browsercache en stipuleren hoelang iets in cache moet blijven. Voeg hiervoor volgende toe aan de .htaccess: # BEGIN Expire headers <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds“ ExpiresByType image/x-icon "access plus 2500000 seconds“ ExpiresByType image/jpeg "access plus 2500000 seconds“ ExpiresByType image/png "access plus 2500000 seconds“ ExpiresByType image/gif "access plus 2500000 seconds“ ExpiresByType application/x-shockwave-flash "access plus 2500000 seconds“ ExpiresByType text/css "access plus 600000 seconds“ ExpiresByType text/javascript "access plus 200000 seconds“ ExpiresByType application/javascript "access plus 200000 seconds“ ExpiresByType application/x-javascript "access plus 200000 seconds“ ExpiresByType text/html "access plus 600 seconds“ ExpiresByType application/xhtml+xml "access plus 600 seconds“ </IfModule>
  51. 51. Hotlinking tegengaan  Hotlinking zorgt niet voor traffiek op uw site, maar wel voor verhoogde load op de webserver.  Dit heeft dus wel een impact op de laadtijd van uw website!  Toevoegen aan .htaccess: #Disable Hotlinking RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?sparringmind.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?feeds2.feedburner.com/sparringmind [NC] RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]
  52. 52. Caching  APC  REDIS  Beschikbaarheid verschilt per server/hostingbedrijf. Informeer bij uw hoster!
  53. 53. APC  Alternative PHP Cache (=APC)  Draait op de server zelf (local) & “just works”!  Cache opgeslagen in RAM  In te schakelen via PHP configuratie  Vervolgens “APC” selecteren in je caching plugin (indien vereist)
  54. 54. REDIS  Vereist afzonderlijke REDIS instance  REmote DIctionary Server (=REDIS)  In-memory, key-value based cache  Vereist aanpassing aan de WordPress core files om werkend te krijgen (bij handmatige setup).  Makkelijker te implementeren via plugin: https://wordpress.org/plugins/redis-cache/
  55. 55. STAP 5 OFF SERVER OPTIMALISATIE
  56. 56. Localisatie bezoekers  Hou rekening met je bezoekers  Neem hosting af met datacenter in het beoogde doelgebied
  57. 57. Implementeer een CDN
  58. 58. Implementeer een CDN  CDN / Content Delivery Network  Lokale kopie van je site in verschillende datacentra wereldwijd. Altijd wel één in de buurt van je bezoeker => lagere laadtijd!  Cloudflare heeft een gratis plan (met inbegrepen security measures)!
  59. 59. ” “ Zijn er nog vragen?
  60. 60. Bedankt! Twitter: @brechtryckaert Mail: brecht@mediagraaf.be Blog: brechtryckaert.be

×