Créer un site web est une chose. Utiliser des outils permettant d’augmenter sa productivité ou de rendre ledit site web plus efficace rend les choses encore plus intéressantes.
FTP
Il existe de nombreux logiciels clients pour se connecter via FTP. J’ai eu la chance l’obligation d’en tester plusieurs étant donné que certains ne répondent pas à tous les besoins.
FileZilla: Compatible autant sur Windows, OSX et Linux, il est très utilisé, fonctionne bien et est gratuit. Son défaut majeur est le fait qu’il ne soit pas capable de sauvegarder un fichier directement à partir d’un éditeur de code. En fait, c’est possible mais il faut, à chaque sauvegarde, cliquer sur un bouton pour sauvegarder le fichier à distance. C’est très fatigant.
Cyberduck: Gratuit et grandement utilisé, ce client FTP est disponible autant sur OSX que Windows. Même s’il ne possède pas le problème majeur de FileZilla, il n’est pas sans faille. Il arrive souvent qu’un fichier ouvert puis refermé ne puisse plus être ouvert. Il faut alors fermer le logiciel et tout recommencer. Le logiciel contient de nombreux bogues qui rendent son utilisation frustrante. C’est toutefois la meilleure alternative gratuite.
Transmit: Disponible uniquement sur OSX, Transmit est à mon sens le meilleur client FTP sur le marché. Simple d’utilisation, tout est intuitif. Il est même possible de faire des drag-n-drop d’un serveur à l’autre et le logiciel se charge de faire le nécessaire pour y arriver! Un must si vous utilisez un client FTP au quotidien. Seul hic, il n’est pas gratuit.
Éditeurs
Il existe encore plus d’éditeurs de code que de logiciels FTP! C’est ici une question de préférence puisqu’il existe de nombreux logiciels qui exécutent bien la tâche. Voici mon opinion:
Dreamweaver: Éditeur pour les nuls… Yaaaaarrrrrk!* Je déteste cet éditeur. Efficace au début des années 2000 pour son intégration d’une interface visuelle, il crée, à mon sens, des codeurs qui ne comprennent pas toujours ce qu’ils font. De plus, il affiche par moment des erreurs dans le code qui n’existe pas et qui fon perdre un temps fou.
Sublime Text: C’est l’éditeur HTML/CSS le plus efficace que j’ai utilisé! D’une simplicité désarmante, il vous permet d’accomplir votre objectif principal: coder. Lorsqu’agrémenté d’extensions (même principe que WordPress), vous pouvez le transformer en un précieux outil de production qui reste simple et très agréable à utiliser. Considérez d’installer les extensions suivantes:
- Package Control
- Emmet
- BracketHighlighter
- DocBlockr
* Notez ici que je suis très biaisé et que vous devez prendre ce commentaire avec un très gros grain de sel… et beaucoup de sarcasme. Le seul but est de vous faire changer d’éditeur!
Statistiques
Pour mesurer l’impact d’un site web, on utilise des statistiques (duh!). Toutefois, afin de pouvoir interpréter des statistiques, encore faut-il en avoir! Chaque site web que vous créez devrait en cumuler. Même si vous ne croyez pas vous en servir, il est très important de faire le nécessaire pour les activer dès maintenant. Grâce à ces statistiques, on peut notamment mesurer:
- Nombre de visiteurs (visiteur vs visiteur unique)
- Nombre de pages vues (page vue vs page vue unique)
- Provenance des visiteurs (pays)
- Système d’exploitation
- Navigateur utilisé
- Page d’entrée du site
- Page de sortie
- Chemin de navigation de l’entrée à la sortie
- Etc.
La façon la plus répandue et la plus simple d’avoir des statitisques est d’utiliser : Google Analytics. Pour l’activer, il suffit de se créer un compte, de créer un profil pour le site web et finalement d’insérer le code (Javascript) dans toutes les pages du site. L’extension Google Analytics for WordPress peut vous aider. Autrement, vous pouvez ajouter le code dans le fichier footer.php du thème.
Gestion de site web – Référencement
La perception de votre site web par les moteurs de recherches est importante. C’est la façon dont les engins de recherches comprennent votre site. Il est donc important de valider qu’il n’y ait pas d’erreurs et, s’il y en a, de les corriger. Google Webmasters Tools et Bing Webmasters Tools (Bing et Yahoo!) vous indiqueront les problèmes rencontrés sur votre site web.
Gestion des ressources
La vitesse d’un site web est importante puisqu’elle joue un rôle sur le comportement du visiteur. Une étude faite par Amazon a montré qu’une augmentation de la rapidité de chargement d’une page de 100ms avait un impact de 1% sur leurs ventes. Une modification dans l’algorithme de Google a montré qu’une diminution de la vitesse d’une demi-seconde (0.5 seconde) avait fait chuter les recherches de 20%. Il existe plusieurs façons d’augmenter la rapidité d’une page web.
- Minifier les CSS et Javascript.
- Utilisation d’un CDN (ex: Amazon S3 et Cloudfront).
- Réduction de la taille des images
- Retrait d’informations non nécessaires dans les images: Smush.it
- Caching (WordPress: WP Rocket, W3 Total Cache)
- Utilisation de sprites.
L’utilisation d’un service comme Cloudflare permet de combiner plusieurs de ces stratégies.
Afin d’améliorer les performances d’une page, l’installation d’un outil comme Yslow peut vous aider à optimiser votre travail en vous guidant vers les divers points à améliorer. Vous pouvez également tester votre site avec les outils Speed test de Pingdom ou GT Metrix.
Exercices
- Visitez la page de Google Canada et inspecter le logo de Google. Que remarquez-vous ?
- Vous devez créer un sprite à partir de la page suivante: Création d’un sprite.
- La page du consultant web que vous avez améliorée au dernier cours connait actuellement un succès retentissant! Les moteurs de recherches (Google, Bing, Yahoo!, …) envoient actuellement des centaines de visiteurs à chaque seconde. Il est donc important d’optimiser la page.Vous devez donc réduire l’empreinte de la page selon ce que vous avez appris aujourd’hui. Pour récupérer la source à partir de laquelle vous devez travailler: Site web du consultant.Indices: Réduisez le nombre de requêtes, diminuez la quantité de texte soumis et améliorez la gestion des images.