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

1

2 . 1

ENCORE UNE CONF SUR LA WEBPERF ?

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

2 . 4

 

2 . 4

2 . 5

N'hésitez pas à venir nous voir ! On recrute !

2 . 5

3 . 1

COMPRENDRE LA WEBPERF

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

3 . 6

WATERFALL

4 . 1

OPTIMISEREn général ? Avec WordPress ?

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 . 5

SOYEZ ASYNCHRONE !C'est quoi ?Ligne de flotaisonLazy-loadajax-load-moreTheming spécifique

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 . 1

FUTUR DE LA WEBPERFHTTP/2 | PHP 7 | MySQL 5.7

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 . 4

PROTOCOLE HTTP/1.1

5 . 5

PROTOCOLE HTTP/2

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 . 10

PHP 7Nouvelles featuresAmélioration de la gestion mémoireAmélioration des performances

5 . 11

MYSQL 5.7Nouvelles features3 fois plus rapide que MySQL 5.6

WordPress = Consommation SQL +++

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

6

POUR CONCLURE...

7

QUESTION ?!

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