pensez web-performances avec wordpress - une conférence de julien oger et pierre dargham
Post on 19-Jan-2017
1.361 Views
Preview:
TRANSCRIPT
P e n s e z W e b P e r f o rm a n c e a v e c W o r d P r e s s @ p i e r r e d a r g h a m / @ J u l i e n O G
PENSEZ WEB PERFORMANCEAVEC WORDPRESS
BONNES PRATIQUES ET FUTUR DE LA WEB-PERF ADAPTÉAU CMS
Propulsé par Pierre DARGHAM - / Julien OGER @pierredargham @JulienOG
2 . 2
LA WEBPERF : UN FONDAMENTAL !Qualité de serviceCoutsSEOBusiness
Délais Impact
AMAZON + 100ms -1% CA
BING + 1s -2,8% CA
Yahoo + 400ms -10% Traffic
2 . 3
VOYONS ÇA DE PLUS PRÈS...1. Comprendre la Webperf2. Axes d'optimisations génériques VS 3. Futur de la Webperf avec
HTTP/2PHP7MYSQL 5.7
3 . 2
PERFORMANCE WEBOptimisation de l'affichage des pages de mon site
1. COMPRENDRE : spécificités protocole et navigateur2. OPTIMISER : contraintes actuelles3. APREHENDER : contraintes futures4. EQUILIBRER : coût de l'effort VS Besoin
3 . 3
VISION GLOBALE
Maitrise
Serveur Totale (ou presque)
Navigateur Limitée /
Réseau Quasi-nulle
BrowserScope
3 . 4
AMÉLIORER LA PERFORMANCETempsPoidsCommunication : nombre de requettesQualité : complexité / optimisation du DOM
OBJECTIF CLE : L'EXPERIENCEUTILISATEUR
3 . 5
OUTILSDesktop En ligne
Chrome / Firefox inspectors
YSlow WebPageTest
Opquast Desktop GTmetrix
Google PageSpeed
Pensez à utiliser votre navigateur
Outils développeursInformations utilesSimulation réseau/terminaux
4 . 2
UTILISEZ LE CACHE !Cache serveur / PHP / SQLCache clients / BrowserReverse proxyobject-cache.php, advanded-cache.phpTransients APIWP Super Cache, Batcache, W3 Total Cache, WP-Rocket ...
4 . 3
DIMINUEZ LE NOMBRE DE REQUÊTES !Concaténation, SpritesIcon-fontsMedia-queriesQue chargent les plugins ?minQueue, wp-better-minifyPre-processing du thème (css, js)
4 . 4
ALLEGEZ VOS CONTENUS !Compression gzipMinification, optimisation des imagesminQueue, wp-better-minify, ImagifyWP 4.4 : <img srcset=".." sizes=".."
4 . 6
LES BONNES PRATIQUESWordPress !Script-loader différentielChoisissez les bons hooks !Respectez le template-hierarchyÉtudiez les plugins tiersMéthode et theme-starters
5 . 2
DE HTTP/1.1...Pas d'évolution depuis 19996 à 13 connexions simultanées par domaineRequêtes séquentiellesEnvoie des entêtes plain text
5 . 3
...À HTTP/2Standard IETF sortie début 2015Reprend les bases de HTTP/1.1
(GET, POST, etc.) / status code / links / headerLes nouveautés
Connexion TCP unique persistante par domaineMultiplexingHPACK compression standardServer push / Server Hints
5 . 6
SUPPORT DE HTTP/2
Côté client :
La plupart des navigateursImposent SSL (https)
Côté serveur :
ApacheNginx
5 . 7
IMPACTS SUR LESDÉVELOPPEMENTS
Devient inutile
Domain Sharding
Inutile ?
ConcaténationSpritePAS SI EVIDENT
Article PerfPlanet sur le sujet
5 . 8
IMPACT SUR LE WATERFALLHTTP/1.1HTTP/2
5 . 9
HTTP2 - SOLUTION MIRACLE ?La question se pose autrementAmélioration du protocole != optimisation de vos pagesVers un web plus fluide, mais encore du travail
5 . 12
QUELQUES RÉSULTATS (CÔTÉ CLIENT)WordPress + WooCommerce + StoreFront + PHP 5.6HTTP/1.1Page de liste de 22 produitsTests côté client
Load time First Byte
-> HTTP/2 -5% à -10% 0% à -3%
-> PHP 7 -5% à -14% -22% à -28%
5 . 13
QUELQUES RÉSULTATS (CÔTÉSERVEUR)
Page de liste de 223 produits (504 requêtes SQL)Tests côté serveur PHP 5.6 VS PHP 7
Memory Usage Page generation time
-28% -58%
5 . 14
Tests WordPress + WooCommerce + StoreFront / 22 produits
Limite = Bande passante : 4Mb / dualcore 2,7go
http1 - php5http1 - php7http2 - php5http2 - php7
Limite = Server : 150mb / monocore 1,6go
http1 - php5http1 - php7http2 - php5http2 - php7
5 . 14
5 . 15
AUTRES TESTSWordPress + WooCommerce + StoreFront / Liste 223
produits
tests classiques
http1http2
8
PLUGINS WORDPRESSWP Super CacheW3 Total CacheWP RocketMinQueueAjax Load MoreSoilQuery Monitor
9
LIENS ET RÉFÉRENCESGTmetrixWebPageTestGoogle PageSpeedQuery MonitorYSlow
10
DOCUMENTS DE RÉFÉRENCEChecklist OpquastFAQ GTmetrixRecommandations GTmetrix (Yslow + PageSpeed)Yahoo!'s Exceptional Performance best practicesYSlow Ruleset MatrixGoogle PageSpeed rulesGoogle Developers > fundamentals > performance
top related