Optimiser son site web de A à Z

Cela va faire un bon bout de temps que je n’ai pas posté de tutoriel ici. Je vous propose donc d’optimiser votre site web grâce à mon aide:

1. Voir l’état de son site

Avant de nous lancer dans l’optimisation, nous devons faire le bilan de notre site. Pour cela nous allons utiliser deux outils. Le premier outil se nomme « Full Page Test » et est édité par Pingdom. Pour l’utiliser, rendez-vous sur https://tools.pingdom.com/ puis rentrez l’adresse de votre site. Une fois le test effectué, notez le « Total loading time » ainsi que tous les fichiers dont la jauge bleue est importante. Une fois ceci fait, nous allons nous rendre sur https://pagespeed.googlelabs.com. Lancez le test et notez simplement votre note Page Speed (qui apparaît en haut de la page).

Il est temps que je vous parle de la page #TTTTFR (cc @Hardisk)

Samedi matin, une page a fait son apparition: la page #TTTTFR. Pour ceux qui ne me suivent pas sur twitter (c’est pas bien), TTTTFR signifie Together To The Top France. C’est un projet lancé piqué à un états-unien américain par le blogueur Hardisk. Son concept est très simple: vous êtes un podcasteur ou blogueur connu -> vous aidez un petit podcasteur (mais j’accepte également les petits blogueurs :)) à se lancer en faisant de la publicité. Et si vous aidez plein de gens, vous recevrez même un cadeau (mais ça on s’en fiche, l’important c’est d’aider les gens :D).

Houston, we have a problem!

Non, je ne parlerais pas de la mission Apollo 13 mais du problème qu’a eu ce site durant très exactement 6 heures et 2 minutes (merci UptimeRobot!). En fait, ce problème est du à ma box. Cette box, à la suite d’une déconnexion intempestive durant la nuit (serait-ce de la faute de SFR), n’a pas tenté de se reconnecter au réseau sans pour autant le signaler (voyant DSA allumé + aucun problème affiché sur la page d’administration). Fort heureusement, un simple reboot de la Trio3D (une box qui n’est d’ailleurs plus toute neuve!) a suffit à régler ce problème. Si vous avez tenté de me contacter durant cette période de down, ne renvoyez pas ce message, je le recevrais automatiquement lors de son renvoi par votre F.A.E.

Bienvenue sur Maude!

Vous ne l’avez sans doute pas remarqué, cependant lorsque vous allez sur mon site, vous n’atterrissez plus dans un des datacenters du groupe Illiad mais chez moi o/! En effet, hier soir, dans une immense envie de refaire de l’auto-hébergement, j’ai décidé de transférer mon site sur mon DockStar (photos à venir pour vous montrer « l’immense » place que prend l’auto-hébergement). Seuls problèmes: mon site mets environ 500ms de plus à charger (test effectué sur pingdom) et le chargement est légèrement plus long chez ceux qui ne sont pas chez SFR… Mais bon, je ne vais pas en mourir :-).

Afficher son adresse e-mail en clair sur son site

Aujourd’hui, je vous propose un petit code JavaScript bien utile. Ce petit code permet d’afficher une adresse e-mail en clair sans être repéré par les robots spammeurs! Sans plus attendre, voici le code à placer entre les balises <head> et </head>:

function mymailto(s1, s2, oon) {
    if(oon == true){
        window.location.href= 'mailto:' + s2 + '@' + s1;
    }
    else{
        return s2 + '@' + s1;
    }
}

Son utilisation est très simple. Voici comment l’utiliser:

<a href="#" onclick="mymailto('mondomaine.tld','monnomdecompte',true)"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3Edocument.write(mymailto('mondomaine.tld'%2C'monnomdecompte'%2Cfalse))%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /></a>

Source: bcolin