Talk performance web
Upcoming SlideShare
Loading in...5
×
 

Talk performance web

on

  • 253 views

Petite introduction aux méthodes et outils à mettre en place pour que vos pages s'affichent avant même de les demander.

Petite introduction aux méthodes et outils à mettre en place pour que vos pages s'affichent avant même de les demander.

Statistics

Views

Total Views
253
Views on SlideShare
180
Embed Views
73

Actions

Likes
1
Downloads
1
Comments
0

1 Embed 73

http://humantalks.com 73

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Talk performance web Talk performance web Presentation Transcript

    • + Performance WEB Mettez vos sites sur orbite
    • + Emmanuel QUENTIN Architecte logiciel – Nurun Développeur certifié PHP & Magento @HereIComeSlowly
    • + Running faster
    • + Pourquoi ?  Taux de conversion  Un acheteur n’aime pas attendre  Amazon : Perte d’1% du C.A. toutes les 100ms  2/5 visiteurs abandonnent leur panier si chargement > 3s  Référencement  Pris en compte par Google (officiel)  30% de poids en moins : 30% de trafic en plus  Augmentation de la note affectée à AdWords
    • + Pourquoi ?  Taux de rebond  500ms de chargement : 20% de recherche en moins chez Google  Economie de bande passante  Montée en charge facilitée
    • + Waterfall Début du rendu, fin de la page blanche
    • + Waterfall  Le frontend et le réseau représentent 90% du boulot  Le téléchargement dépend de  Recherche DNS (~20/100ms)  Connexion TCP  Téléchargement du contenu  Le Javascript bloque les autres téléchargements (le relou)  Les navigateurs limitent les téléchargements en parallèle par domaine (les relous)
    • + Les solutions côté frontend !  DNS prefetching  <link rel="dns-prefetch" href="//assets.foo.com"> # Sauf IE < 10  Déporter l’inclusion des Javascripts à la fin du <body>  Rendre asynchrone le chargement des plugins sociaux  Mettre en place des domaines spécifiques (ou CDN) pour augmenter le chargement en parallèle
    • + Les solutions côté frontend !  Diminuer le temps de chargement et le nombre de requêtes HTTP  Concatener et minifier les JS/CSS  Utiliser les sprites pour les images  Outil d’optimisation d’image (Pngcrush)  CDN géolocalisé (réduit la latence)
    • + Réduire le reflow  Quand ?  Redimensionnement fenêtre  Changement taille police  Changement contenu  Pseudo classe ( :hover )  Changement de style en JS
    • + Réduire le reflow  Comment ?  Diminuer la profondeur du DOM  Supprimer les règles CSS inutiles  Simplifier les règles CSS  Spécifier les dimensions des images
    • + Autour du backend  Caching HTTP  Header Expires  Header ETag (entity tag)  Caching applicatif  Fichier, Memcache, Redis  Cache d’opcode (PHP) : APC, Zend Optimiser (surement dans PHP 5.5)  Reverse Proxy  Varnish, Nginx, Squid
    • + Autour du backend  Serveur WEB  Compression gzip (mod_deflate d’Apache)  Module d’expiration (mod_expire d’Apache)  Base de donnnées  Index  Optimisation des requêtes (EXPLAIN, Last_query_cost)  Table temporaire, dénormalisation
    • + Autour du backend  Prévoir ses applications de façon scalables  Master/slave MySQL – NoSQL  Queue de message (AMQP) : RabbitMQ, ZeroMQ, ZendQueue  CRON  Appels I/O asynchrones (NodeJS)
    • + Outils  Google page speed (module Chrome / Firefox)  Yslow (module Chrome / Firefox)  Web page test ( webpagetest.org )
    • +