Speeding up WordPress
•
3 likes•912 views
Talk about techniques to optimize the loading speed and overall performance of your WordPress website. This talk was presented at WP Meetup Antwerp.
Report
Share
Speeding up WordPress
- 2. Brecht Ryckaert • WORKS @ COMBELL.COM • WP USER SINCE 1.5 • SPECIALIZED IN SECURITY & OPTIMIZATION • WROTE A BOOK
- 3. Coming SOON! Laat uw e-mailadres na op wpsecurity101.com en krijg een kortingscode (-50%) in de lanceringsweek!
- 4. FEIT! De gemiddelde bezoeker verlaat je website als deze binnen de 3 seconden niet geladen is !!!
- 5. Wanneer we een nieuwe site lanceren of publiceren, verwachten we dus dit...
- 7. Maar occasioneel krijgen we dit...
- 10. WAAROM ?!?
- 11. STAP 1 MET FIREBUG & PAGESPEED ANALYSE
- 12. Firebug voor Mozilla Firefox
- 13. Tabblad “Net”
- 14. Tabblad “Net”
- 15. Tabblad “Net”
- 16. Tabblad “Net”
- 17. Tabblad “Net”
- 18. Tabblad “Net”
- 19. Idealiter... 30 tot 50 elementen (concurrent browser connections)
- 20. Concurrent Browser Connections Beperkende factor in laadtijd bij mobiele en oudere browsers Bepaalt het maximum aantal elementen dat simultaan geladen kan worden
- 21. Concurrent Browser Connections Te veel requests!
- 22. Idealiter... 30 tot 50 elementen (concurrent browser connections) 0.5 tot 1.5 MB
- 23. Concurrent Browser Connections Te groot!
- 30. Concurrent Browser Connections Te groot javascript!
- 32. Concurrent Browser Connections Beperkende factor in laadtijd bij mobiele en oudere browsers Bepaalt het maximum aantal elementen dat simultaan geladen kan worden
- 33. 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
- 34. 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 - ...
- 35. 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)
- 37. Optimaliseer Database Kleinere database = snellere responstijden WordPress zorgt echter standaard voor een nogal “vervuilde database”. => bijhouden revisies, posts/pagina’s in trash, spam comments, ...
- 39. 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!
- 40. Caching plugins WP Super Cache W3 Total Cache WP Fastest Cache Gator Cache Blunt Cache Next Level Cache ....
- 41. Caching Plugins Ik gebruik geen van deze!
- 42. My preferred caching plugin! For small sites: Wordfence!
- 44. STAP 3 SERVER SIDE
- 45. Beperkende Server Settings MAX CLIENTS Apache server setting – Definieert harde limiet aantal simultane bezoekers. Overschrijven van deze limiet = ontstaan wachtrij!
- 46. Beperkende Server Settings MAX CONNECTIONS MYSQL server setting – Definieert harde limiet aantal simultane database- verbindingen. Overschrijven van deze limiet = “Unable to connect to database”!
- 48. GZIP Compression
- 49. GZIP Compression
- 50. GZIP Compression
- 51. 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
- 52. 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
- 53. 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>
- 54. 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]
- 55. Caching APC REDIS Beschikbaarheid verschilt per server/hostingbedrijf. Informeer bij uw hoster!
- 56. 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)
- 57. 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/
- 59. Localisatie bezoekers Hou rekening met je bezoekers Neem hosting af met datacenter in het beoogde doelgebied
- 61. 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)!
- 62. ” “ Zijn er nog vragen?
- 63. Bedankt! Twitter: @brechtryckaert Mail: brecht@mediagraaf.be Blog: brechtryckaert.be