Outweb

Cocktailand – Monitorer les performances d’un site web

On mai 6, 2018

Temps de lecture : 2 minutes

Les outils

Monitorer les performances WEB d’un site web est vraiment indispensable, mais ce n’est pas simple de le faire gratuitement. Il existe des outils en ligne comme SpeedCurve mais c’est relativement cher.

L’idée ici est d’avoir un suivi, certes plus simple, mais de façon gratuite. Il se trouve que j’ai déjà une stack graphite/grafana qui tourne en production. Si ce n’est pas votre cas et que vous avez un serveur avec docker qui tourne dessus vous pouvez toujours démarrer un container avec l’image docker-grafana-graphite pour tester la suite de cet article. Une fois que votre graphite est en ligne on va pouvoir commencer à pousser des metrics dedans. Un outil est très connu pour obtenir des metrics de performance sur un site web. Webpagetest, dont j’ai déjà parlé dans un billet précédent sur la mise en place de varnish et des ESIs. Il se trouve que webpagetest fournie une api.

Pour obtenir une clef d’api il faut en faire la demande sur le site de WebPageTest.

Vous recevrez votre clef par email automatiquement sous quelques minutes.

La mise en place

Il ne reste plus qu’a faire le lien entre les retours de l’API de webpagetest et notre graphite. J’ai choisi de faire un petit script en node js, mais vous pouvez le faire avec ce que vous voulez.

Installer les dépendances

Le script

Très claireiment c’est pas un script optimisé ni prévu pour monitorer plusieurs pages d’un site. Maintenant si vous avez besoin d’étendre son scope ce ne sera pas trop difficile.

Il y a quelques placeholder dans le script à remplacer par vos valeurs:

NOM_DU_SITE_OU_DE_LA_PAGE: Le nom de votre site en snake case (ex: cocktailand_fr)
VOTRE_URL: L’url de la page à monitorer (ex https://cocktailand.fr)
VOTRE_HOST_GRAPHITE: L’ip ou le hostname de votre graphite
VOTRE_API_KEY: La clef d’api que WebPageTest vous a donnée

Cronner le script

Je fait tourner le script toutes les heures.

De cette manière je peux analyser le comportement du site sur une journée complète et éliminer les fausses alertes.

Il est en effet possible d’avoir des résultats qui varient en fonctions de plusieurs facteurs extérieur:

La saturation du réseau de webPageTest
Un agent de webpagetest qui est plus lent qu’un autre
Des publicités mal optimisées de la part d’un partenaire

Il ne faut pas s’inquiéter si un résultat est moins bon qu’un autre.

Le but ici est d’analyser une tendance.

Faire un beau dashboard

Maintenant que vous avez toutes vos informations dans votre graphite on peut commencer à grapher ce qui nous intéresse.

Voici par exemple mon dashboard:

Pour ma part je surveille principalement les temps de réponse et le cache avec mon dashboard, mais en fonction des objectifs que l’on se donne on peut axer les graphiques sur d’autres KPIs.

Conclusion

J’ai un suivi des performances. Si grafana est à jour (ce qui n’est pas mon cas) il est même possible d’envoyer des mails d’alertes quand on dépasse une limite fixée.

Après plusieurs semaines d’exploitation je me rends compte que le site en lui-même est stable et avec des performances prévisibles, mais que les grandes inconnues sont les publicités. Une mauvaise pub sur le site peut anéantir tout le travail fait en amont sur les performances.

Booster votre wordpress

de arnaud

On novembre 5, 2013

dans Performance

Temps de lecture : 4 minutes

Augmenter les performance pour diminuer le temps de réponse de son site devrait être la préoccupation de tout webmaster, afin d’améliorer au maximum l’expérience utilisateur mais aussi pour être mieux référencé sur Google. Nous allons voir dans cet article comment optimiser WordPress pour obtenir un temps de réponse minimal.

Logo wordpress

Il existe une kyrielle de plugins WordPress qui permettent de réduire le temps de réponse de WordPress. Un des plus connus est w3 Total Cache car il possède énormément de fonctionnalités.

Mais après l’avoir installé, je me suis rendu compte que WordPress consommait quasi 100% de tous les coeurs de mon serveur pour afficher une page. C’est un problème qui est assez fréquent avec ce plugin. C’est pourquoi j’ai cherché des solutions alternatives.

Coté WordPress

WP Super Cache

WP Super Cache est développé par Donncha O Caoimh, auteur de la branche Wp MU.

Le plugin va générer des pages HTML statiques à partir des pages du sites. Les pages sont mises à jour régulièrement (réglable). Ce procédé permet de servir des pages sans avoir à la générer.

La seconde fonctionnalité intéressante du plugin est le pré-chargement des pages pour forcer la mise en cache. Il est possible par exemple de pré-générer ou mettre à jour les caches toutes les 30 minutes. Cette fonctionnalité est très intéressante car même le premier visiteur profitera du cache, contrairement à la plupart des plugins de cache ou c’est le premier visiteur qui va le générer.

WP Minify

Wp Minify est un plugin qui permet la compression et la concaténation des fichiers JS et CSS. Selon la qualité de vos fichiers (en terme de code) il n’est peut être pas possible de les compresser. Dans ce cas la il faut aller dans option avancé et désactiver la minification.

La concaténation des /assets, même non minifiés, permet de diminuer le nombre de requêtes et donc le temps de réponse.

WP Optimize

Wp Optimize est un plugin qui permet de nettoyer et optimiser la base de données de wordpress. Il va aussi défragmenter les tables. Il suffit de le lancer de temps en temps.

jQuery lazy load plugin

jQuery lazy load plugin est un plugin qui pemet de charger les images des pages à la demande. le plugin est basé sur le plugin JQuery Lazy Load.

Ceci permet de diminuer grandement le temps de chargement initial d’une page. Et c’est quand l’utilisateur affichera l’image qu’elle sera chargée.

Sur une page d’accueil où il y a une dizaine d’articles (ou plus) cela peut faire gagner énormément de connexion HTTP.

Conseils de bon sens

Eviter d’installer trop de plugins
Limiter les JS et CSS externe (hors CDN)
Utiliser des images compressées et découpées à la bonne taille

Côté Serveur

Si on veux que le site soit aussi performant que possible, il va falloir, si possible, aller configurer un peu le serveur. Pour cette partie vous allez avoir besoin des accès root sur le serveur.

XCache

XCache est un accélérateur de code PHP. Il va mettre en cache le code PHP compilé afin de ne pas avoir à le re-compiler une prochaine fois. Contrairement à PHP APC, XCache est stable et entièrement compatible avec PHP 5.4+.

Voici un tutoriel qui date un peu, mais qui est toujours d’actualité, qui explique comment faire l’installation de XCache sur un serveur debian : Installer XCache sur Debian.

Configurer Apache

Apache est très configurable, le tutoriel optimiser la configuration d’Apache est assez complet à ce sujet.

MySQL

Pour une installation basique de wordpress le SGBD est MySQL.

Il existe des scripts comme MySQLTuner qui peuvent aider à configurer correctement le serveur MySQL.

Installer un Firewall

Un firewall, par exemple Shorewall permet de faire le tri dans les demandes et de ne pas envoyer à Apache les requêtes de type DDOS. Contrairement au mod_evasive la requête va être ignorée au niveau de la carte réseau. On va donc limiter au maximum son impact sur le serveur en termes de ressources utilisées.

Résultat

Voici le résultat de Yslow sur la page d’accueil du blog une fois toutes les optimisations mises en place.

Et voici le temps de chargement de la vue réseau de Firebug pour le premier et le second chargement de la page d’accueil:

Premier chargement

Second chargement

Configurer shorewall sous debian

de arnaud

On novembre 6, 2012

dans Sécurité

Temps de lecture : 2 minutes

Le tuto fonctionne aussi sous Ubuntu 12.04 (oui c’est article qui date)

Le pare-feu « Shoreline Firewall », plus communément appelé « Shorewall« , est un outil qui permet de configurer plus facilement Netfilter (IpTable).

Shorewall est un outil qui permet de configurer Netfilter, son travail est fini.

L’avantage de Shorewall est qu’il est très flexible, une fois que l’on a compris la syntaxe.

Si vous avez d’autres firewalls il faut les désinstaller avant de commencer (ex: firestarter)

Installation de shorewall

Maintenant que les fichiers de configuration de base sont placés aux bons endroits nous allons pouvoir commencer à configurer Shorewall selon nos besoins.Par défaut les connexions entrantes sont refusées mais les connexions sortantes sont autorisées. Selon vos besoins vous pouvez changer la politique en éditant le fichier `/etc/shorewall/policy`. Dans la suite de l’article on partira du principe que la politique utilisée est la politique par défaut.

Mise en place des règles du firewall

Ouvrir le fichier qui contient les règles:

On a deux zones le « net » et le « $FW » (firewall).

Trois actions:

ACCEPT = accepter
REJECT = refuser
DROP = ignorer (préferez-le à reject)

Voici un exemple de fichier de configuration:

Avant de continuer pensez à vérifier que vous avez bien ajouté une règle pour autoriser votre connexion SSH. Par défaut c’est le port 22 mais il a pu être changé. Vérifiez que Port est bien à 22 dans : `etc/ssh/sshd_config`. Si ce n’est pas le cas il faudra modifier la règle correspondant au SSH

Maintenant que nous avons correctement configuré la bête reste à lui dire qu’elle peut être lancée.

Mettre la variable startup à 1 au lieu de 0.

Lancement de Shorewall

Allez il est temps de le lancer:

La sortie devrait plus ou moins ressembler à ça :

Si ce n’est pas le cas et qu’une erreur apparait c’est que vous avez un problème de configuration.

Afficher des graphiques avec JQPlot

de arnaud

On août 16, 2011

dans JQuery

Temps de lecture : < 1 minute

JQPlot est un plugin JQuery qui permet de dessiner des graphiques dans vos pages HTML. Si vous faites des pages de statistiques sur vos pages Internet vous comprendrez rapidement quelles sont les applications et surtout en quoi il vous simplifie les choses. En effet, il vous suffit de lui donner les données et de décider quel type de graphique vous voulez obtenir en sortie et le tour est joué ! On peut facilement imager une fonction PHP (ou autre) qui va générer les données qu’il faut mettre en entrée de JQPlot à partir de votre base de données.

Voici quelques exemples de graphiques que l’on peut obtenir grâce à ce plugin:

Framework JQuery mobile

de arnaud

On août 16, 2011

dans Framework, JQuery

Temps de lecture : 2 minutes

Tous ceux qui ont déjà utilisé le dernier né de JQuery, à savoir JQuery mobile vont vraiment apprécier JqmPhp. En effet JqmPhp permet de simplifier une syntaxe assez lourde et surtout de fournir un code optimisé.

Travaillant actuellement sur une application web pour smartphone, je me suis fortement intéressé à ce framework pour rendre mon code plus clair.

Une fois que vous avez téléchargé le framework vous devez le configurer. A savoir que la version actuelle de JQuery mobile est la Alpha 4 mais que Jqmphpest conçu pour la Alpha 3. C’est pourquoi il est possible que certaines des nouvelles fonctionnalités de JQuery Mobile ne soient pas encore prises en charge.

Pour la configuration rendez-vous dans le fichier /lib/jqmphp.php

Les valeurs suivantes sont à changer par les liens vers les nouvelles versions de JQuery Mobile (en local ou sur un serveur distant).

/**
 * Sets the jQuery path.
 * @var JQMPHP_JQ
 */
define('JQMPHP_JQ', 'http://code.jquery.com/jquery-1.5.min.js', true);

/**
 * Sets the jQuery Mobile path.
 * @var JQMPHP_JQM
 */
define('JQMPHP_JQM', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js', true);

/**
 * Sets the jQuery Mobile CSS path.
 * @var JQMPHP_CSS
 */
define('JQMPHP_CSS', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css', true);

Maintenant que le framework est configuré on va pouvoir créer notre première page.

<?php   
//  Creation de l'objet jqmphp
$j = new jqmPhp();  

// ajout du titre au header
$j->head()->title('Menu principal');

// Création d'une page ( il peu en avoir plusieurs par jqmphp )
$p = new jqmPage('Menu Principal');

// choix du theme et ajout du titre à la page
$p->theme('c')->title('Menu Principal');

// choix du theme pour le header de la page
$p->header()->theme('c');

// ajout de text HTML dans la page
$p->addContent('Bienvenue sur ma belle page');

// Exemple de création de liste ( courant dans JQuery mobile)
$gm = new jqmListviem();

// création et ajout d'un item à la liste
$ann = $gm->addBasic('Lien 1', 'page1.php','',true);

$cal = $gm->addBasic('Lien 2', 'index.php?action=3');

// ajout de la liste à la page
$p->addContent($gm);

// ajout de la page à l'objet
$j->addPage($p);

// affichage de la page
echo $j;

?>

Comme on peut le remarquer le code est assez simple, mais qu’en est-il du résultat ?

Ceci est un exemple très simple mais vous trouverez sur le site du projet des exemples complexes avec des formulaires, des listes à icônes…

En conclusion : Bien que le framework soit très récent il promet d’être très utile aux développeurs web soucieux des utilisateurs de smartphone.

Nous sommes dans l’attente d’une version qui sera sûrement adaptée à la version beta de JQuery mobile qui sortira prochainement.

Faire un audit de sécurité

de arnaud

On août 12, 2011

dans Sécurité

Temps de lecture : 2 minutes

Hacker Target est un site Internet qui vous propose de tester les vulnérabilités de votre application web.
Le site vous propose plusieurs types de tests selon votre site Internet.

Voici la liste complète des tests proposés gratuitement par le site (limité à 4/jours) :

les injections SQL
les CMS Drupal, Joomla et WordPress
les ports de votre serveur
les vulnérabilités de vos services
les problèmes de configuration ou de scripts
faire du fingerprint (déterminer les versions de vos librairies et logiciels)
en savoir plus sur votre domaine par le biais de whois par exemples
obtenir des infos sur vos CMS, fameworks, serveur, emplacement géographique…Etc

Nous allons ici détailler le test concernant WordPress car c’est celui que je viens de réaliser sur localhost:8080.

Voici la liste des tests :

WordPress Version Check
Site Reputation from Google, Norton and MyWot
Default admin account enabled
Directory Indexing on plugins
htaccess readable
robots.txt present
Sites Externally linked from main page (reputation checks)
WordPress Plugins that are detected passively and versions against latest versions.
Javascript linked
iframes present
internal site links
Hosting Reputation and Geolocation information
IP address sharing and reputation of sites sharing the IP address

Voici par exemple le type de conseils que l’on peut recevoir :

The WordPress administration login page is at the default location http://YOUR-WEBSITE/wp-admin/
This is not a critical risk however it should be understood that brute force attacks against WordPress login accounts
including the admin account are not difficult. A strong password on the admin accounts is vital. It is recommended to
rename the default admin account to a non-generic name.

Sinon, le rapport contient aussi la liste des liens externes de votre site afin de vérifier que personne n’a réussi à insérer des URLs vers des sites sans rapport.
Vous aurez aussi en fin de rapport la liste des sites Internet qui sont hébergés sous la même IP, ainsi que leurs MyWOT Reputation et leur résultat au Google Safe Browse.

Vous l’aurez compris, cet outil peut vous donner de mauvaises surprises s’il tombe entre de mauvaises mains.

Site Internet : Hacker Target

Charger vos scripts en asynchrone

de arnaud

On août 10, 2011

dans Optimisation

Temps de lecture : < 1 minute

Le chargement de vos fichiers Javascript ralentit le chargement de page. Ceci est logique car le navigateur doit télécharger les fichiers avant de faire l’affichage. Grâce à Require.js vous allez pouvoir charger vos JavaScript en asynchrone. C’est-à-dire charger le texte, les images, les styles puis seulement une fois que la page est affichée correctement, et que le lecteur peut commencer à lire le contenu, le JavaScript. Require.js permet aussi de détecter les fichiers qui ont déjà été chargés afin de ne pas les recharger.

L’utilisation du script est très simple, dans un premier temps, il faut inclure le fichier contenant require.js :

Puis à la fin du body il faut dire à require.js de charger les autres scripts :

require([
            "scripts/underscore.js",
            "scripts/jquery.js",
            "scripts/backbone.js"
        ], function(){
            $('#exemple').html('Jquery loaded!')
        })

Le gain au chargement de la page est assez intéressant, surtout depuis la refonte complète de la librairie.

Menu contextuel en JavaScript

de arnaud

On août 8, 2011

dans JQuery

Temps de lecture : < 1 minute

Le plugin JQuery contextMenu vous permet de faire des menus contextuels sur des images, du texte ou tout autre contenu. L’utilisation de contextMenu peut être utile pour permettre de partager un contenu sur les réseaux sociaux, pour gérer du contenu dynamique ou simplement pour afficher des informations à l’utilisateur.

Voici un exemple de menu contextuel généré par le plugin :

Pour obtenir ce genre de résultat voici comment appeler le plugin :

$.contextMenu({selector: '#id_de_votre_objet_html', items: {
	edit: {name: "Edit", icon: "edit", callback: $.noop},
	cut: {name: "Cut", icon: "cut", callback: $.noop},
	copy: {name: "Copy", icon: "copy", callback: $.noop},
	paste: {name: "Paste", icon: "paste", callback: $.noop},
	"delete": {name: "Delete", icon: "delete", callback: $.noop},
	sep1: "---------",
	quit: {name: "Quit", icon: "quit", callback: $.noop}
}});

Comme vous pouvez le voir son utilisation est très simple.

Rendre votre CSS compatible sur tous les navigateurs

de arnaud

On août 8, 2011

dans Outils

Temps de lecture : 2 minutes

Prefixr est un outil, en version alpha, qui vas vous aider dans le développement de vos designs. En effet, le site vous propose de prendre n’importe quel code CSS et de vous en ressortir un code CSS compatible sur tous les navigateurs.

Voici un exemple d’utilisation :

Vous avez écrit :

.example {
  border: 10px solid #000000;
  width: 500px;
  height: 500px;
  -moz-border-radius: 10px 200px 200px 10px;
}

Malheureusement -moz-border-radius ne fonctionne pas sur tous les navigateurs… On vas donc passer le code dans Prefixr pour le rendre compatible.

Et on vas obtenir le code suivant :

.example {
	border: 10px solid #000000;
	width: 500px;
	height: 500px;
	-webkit-border-radius: 10px 200px 200px 10px;
	-moz-border-radius: 10px 200px 200px 10px;
	-o-border-radius: 10px 200px 200px 10px;
	-ms-border-radius: 10px 200px 200px 10px;
	-khtml-border-radius: 10px 200px 200px 10px;
	border-radius: 10px 200px 200px 10px;
}

Bien que ceci soit déjà pas mal, cela implique de faire des aller retours entre votre éditeur et votre navigateur pour tester et modifier votre CSS. C’est pourquoi les développeur ont mis en place une api accessible depuis les éditeurs de texte évolués afin d’utiliser le service sans aller sur le site.

Pour cela il faudra créer une nouvelle commande dans votre éditeur qui exécutera :

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"

Il faudra installer curl si vous ne l’avez pas.

En conclusion Prefixr est un outil très intéressant et offrant un gain de temps considérable. Cependant il vas nécessiter des mise à jours régulières pour s’adapter au mieux à toutes les règles du CSS3.

Les extensions WordPress

de arnaud

On août 6, 2011

dans Outils

Temps de lecture : 2 minutes

WordPress est un des CMS les plus utilisés dans le monde. Il permet de créer rapidement et très simplement un blog, mais aussi des sites Internet en tous genres. Avec les bonnes extensions, vous pouvez même en faire un site de e-commerce. Son avantage est principalement son optimisation pour le référencement. En effet, si vous avez du contenu intéressant, il sera facilement et rapidement indexé sur les moteurs de recherche. Un des autres avantages de WordPress est sa grande flexibilité. Vous pouvez réussir à faire énormément de choses juste en ajoutant des extensions. Voici donc une liste des extensions que vous pourrez directement installer depuis votre interface administrateur. Pour installer une extension, rendez-vous dans Extensions>Ajouter.

Extensions orintées référencement

Beaucoup d’extensions existent pour optimiser votre référencement, mais il faut faire un choix et éviter de trop alourdir votre WordPress.

SEO ALRP : permet de rajouter automatiquement à la fin de vos articles des liens vers d’autres articles de la même thématique
Simple Tags : permet de trouver simplement les mots clés pour vos articles
Tweet, Like, Google +1 and Share : permet l’ajout de liens de partages sur les réseaux sociaux
SEO Ultimate : pour mettre en place des balises meta différentes pour chaque page

Utilitaire

WordPress Backup : permet de faire une sauvegarde de vos images, plugins et thèmes WordPress
Broken Links Remover vérifie tous les intervalles de temps défini, les liens du site afin de trouver des liens ou des images morts.
Mobile Smart : permet la détection des appareils mobiles et la sélection d’un thème WordPress adapté.
Exploit Scanner teste le code de votre WordPress afin de tenter d’y trouver des failles de sécurité
Post View permet de suivre le nombre de visites de vos articles, de les classer par fréquentation, de faire des graphiques avec les données…

Optimisation

DB Cache Reloaded : Mise en cache des résultats des requêtes SQL
WP Widget Cache permet une gestion pointue du cache de vos widgets