Prestations Web Performance

Au sein du studio TimeDM, on réalise l’optimisation entre le moteur de site web tel que WordPress, le châssis de la template (Theme WP) et sa carrosserie visible (Interface Utilisateur), afin que Serveur & Client échangent vite entre eux. Faites des économies… Boostez votre business.

Représentation graphique du fonctionnement du serveur web - by TimeDM
Représentation graphique du fonctionnement du serveur web – by TimeDM

Ainsi, chaque éléments electro-mécanique-informatique qui entre en jeu entre le serveur web et le navigateur web est optimisé. C’est ça qui est bon pour votre business.

Spécialité Web Performance by TimeDM

La spécialité du studio TimeDM est l’optimisation de la web performance.

En tant que graphiste Web Designer de nuit, Auto-Entrepreneur créateur de sites Web le jour, et Blogueur rédacteur à mes heures, mon travail est de créer des sites professionnels et personnalisés pour chaque projet.

Du brief initial à la mise en ligne finale, je bosse avec vous pour répondre aux questions que vous avez, discuter, développer vos idées, commentaires et suggestions. Mon travail est directement visible au sein du « garage web » du studio DESIGNMOTEUR. Cette approche vous permet de savoir et voir autant que possible ce que je fais et comment je le fais.

Passionné automobile depuis des années, si ce n’est, depuis toujours, c’est ainsi que depuis 2012, je dédie une partie de mon temps à écrire quelques mots sur l’actualité du secteur automobile via le site DESIGNMOTEUR.

En tant que passionné de courses automobiles, je me suis naturellement spécialisé Web Performance dans mon activité de création de sites Web. Depuis ces débuts, le site DESIGNMOTEUR bénéficie ainsi de mon travail de R&D (recherche & développement) de web designer et de la technologie Web adaptée et disponible, tout en appliquant les principes de la Web Performance.

DESIGNMOTEUR - Responsive Web Design - 2017 - screen homepage
DESIGNMOTEUR – Responsive Web Design – 2017 – screen homepage

Ainsi, bénéficier de la technologie Web d’avant-garde, ça peut être utile à votre projet ! N’est-ce pas ? C’est pour cela que je propose de mettre la technologie Web développée pour le site DESIGNMOTEUR au profit de votre projet Web.

Web Performance ?

On peut définir la web performance par la vitesse d’affichage d’un site web et la perception du visiteur par rapport à la rapidité d’affichage d’une page web et de son contenu.

L’essentiel est que le site envoie le premier élément affiché par le navigateur en moins de 500 ms et que le site entier soit chargé en moins de 3 secondes.

TimeDM - 2017 - screen Web Performance
TimeDM – 2017 – screen Web Performance

« Faire de la Web Perf’ est un peu comme la préparation moteur en automobile.

Ajouter une entrée d’air en admission du moteur, ou ajouter un carburateur, ou encore préparer et optimiser la cartographie moteur afin de le rendre davantage plus performant et gagner en nombre de chevaux de puissance. Objectif ? Gagner en temps au tour sur circuit. Gagner en efficience moteur.

Sur le Web, le but est de faire que le site appelé affiche vite le contenu demandé. Techniquement, on ajoute un plugin qui fait le taf, on bosse la conception du site de manière optimale.

On se pose avec le plan de site des pages et de la navigation. On agis pour que le site charge vite est optimisant le chargement de chaque élément du site web. Objectif ? Réduire le temps de chargement à moins de 1 seconde, ou gagner en temps par page sur le Web. Résultat gain de temps, économie ressource serveur, bonus pour le référencement et confort de navigation. »

– Ewen LJ, Web Designer, Blogger,
Team Principal DESIGNMOTEUR

Chaque site préparé par TimeDM prend en compte la Web performance dès l’élaboration du plan de site jusqu’à la mise en ligne du site.

Vous avez un projet de site ? Alors mettez le contact avec le studio TimeDM et discutons-en !

Appliquer les principes Web Performance

Votre site jusqu’à 3x plus rapide !? Tendre vers les notes/grades AA sur Page Speed Grade et YSlow Grade !? Un rêve ? Une réalité !

L’accélération de votre site a un impact positif sur votre business. La vitesse de chargement de votre site est un critère essentiel pour l’expérience utilisateur de vos visiteurs mais aussi un point capital en matière de référencement.

La vitesse de chargement, d’exécution et d’affichage est un enjeu majeur pour la réussite de tout site internet. Les utilisateurs acceptent des temps de chargement de 5 secondes maximum, un peu plus pour un site qui connaissent. Les sites augmentent considérablement leur conversion en accélérant l’affichage.

Les moteurs de recherche dont Google prennent en compte le critère de chargement pour son algorithme de positionnement. Google peut parcourir + vite votre site en vue de répertorier leurs pages. Plus les utilisateurs naviguent sans attendre et plus ils sont tentés de découvrir du contenu sur le même site. Vous avez donc plus de chance de les transformer en client.

Allez-vous offrir une expérience utilisateur faible alors que vous pourriez facilement leur offrir un site rapide ? L’avènement du haut débit n’a rien à voir avec les temps de chargement et de navigation. Un site mal optimisé est lent quel que soit la connexion à Internet des visiteurs.

Comment accélérer votre site web ?

Comment TimeDM va accélérer votre site web ?

L’audit de l’existant de performance web permet de pointer les points bloquants et à les possibilité d’optimisation. Accompagné de recommandations opérationnelles, il se révèle d’une valeur ajoutée importante et durable.

Demandez l’audit essentiel Web Perf gratuit de votre site Internet ! Mettez le contact avec le studio TimeDM

Comment TimeDM accélère votre site

Comment je vais faire concrètement pour accélérer le chargement de mon site ? Je vous réponds techniquement en respectant les principes édictés par la ‘Web Performance’, ce sont des normes, standard et des techniques à mettre en œuvre.

A la pointe de la technologie Web

J’applique les bonnes pratiques de la performance Web en optimisant la configuration du serveur et le code moteur du site.

Concaténation

On assemble les fichiers CSS et JavaScript pour réduire le nombre de requêtes totales. Diminutions de requêtes client/serveur permet l’augmentation de la vitesse de chargement des pages et du site.

Minification

On supprime tous les caractères inutiles de vos pages HTML, de vos ressources CSS et JavaScript, automatiquement. Plus légers, les fichiers sont plus rapides à charger.

Chargement différé

Nous étudions l’organisation de chargement des fichiers appelés dans la page. Si possibilité, les fichiers JavaScript ne seront chargés qu’après la fin du rendu de la page.

Diminution

On intègre directement les petites images en une seule. Moins de requêtes pour charger les images, cela améliore le temps de chargement des visites, particulièrement sur mobile et tablette. Regrouper l’ensemble des images de l’interface utilisateur (icônes) en une seule et même image. Cela réduit drastiquement le nombre de requêtes serveurs.

Mise en Cache

Les éléments optimisés sont mis en cache. Nous adaptons aussi les entêtes HTTP (Hypertext Transfer Protocol) pour mieux mettre en cache les ressources dans le navigateur. Il s’agit de données « enregistrées » dans un état statique sur un système. Ces données ne seront pas recalculées lors d’une requête (interrogation du serveur). Cela permet un affichage plus rapide des pages, et donc une navigation plus agréable.

Le cache du navigateur permet de stocker les fichiers statiques directement sur le poste de l’utilisateur. Cette technique est intéressante car elle diminue le nombre de requêtes effectuées par le navigateur au serveur distant (serveur sur lequel est stocké le site Web). En effet le navigateur interroge d’abord son cache pour voir s’il n’a pas le fichier en réserve avant d’interroger le serveur (dans le cas où le fichier n’est pas en cache).

Compression

On met en place la compression de tous les contenus texte (pages .html, feuilles de styles .css, scripts .js) ainsi que les images et avec la même qualité !

La compression Gzip est une compression utilisant un format GNUzip. Tout se passe directement sur les serveurs hébergeant vos sites Web. Le serveur compresse les données, votre navigateur lui se chargera de les décompresser.

Optimisations serveur

Nous écrivons des instructions compréhensibles et optimisés pour les serveurs Web.

Pourquoi tout le monde ne le fais pas sur le web ?

Bonne question. Il est vrai que de nombreux sites ne respectent pas toutes ces bonnes pratiques. Après, selon le projet, selon les contraintes, il faut adapter ces pratiques en fonction de nombreux facteurs.

Responsive Web Performance

Web Performance 2.0 …ou appelons ça de la Responsive Web Performance (RWP) en référence au fait de s’adapter à l’infrastructure serveur et d’être éco-responsable afin d’économiser des ressources serveurs.

En terme de création de site, on peut stopper/ralentir les trucs sprite, inlining, et autre domain sharding ! En HTTP2 ce serait contre productif. Mais il faut veiller, à faire de la web Perf’ comme on fait du Responsive Web Design (RWD).

Le ‘loading time’ a longtemps été la valeur de référence.

Maintenant il y a deux métriques essentiel à checker, on a :

‘Start Render’ = le moment où la page blanche affiche les premiers éléments visible de la page web

‘Speed Index’ = le rythme auquel les éléments s’affichent.

HTTP/2 - Web Performance - Waterfall webpage- screen

HTTP/2 – Web Performance – Waterfall webpage- screen

Dès maintenant, il faut repenser l’application des principes de la Web Performance adapté au protocole HTTP 1.1 pour l’adapter aux nouveautés apporté par HTTP/2.

Entre autres on peut établir cela :

concaténation 2.0

HTTP 1.1 : utiliser des techniques de concaténation des fichiers CSS & JS, afin de réduire le nombre de requêtes entre le serveur et le navigateur.

HTTP/2 : le protocole gère le multiplexing et il y a le principe de connexion unique.

domaine sharding 2.0

HTTP 1.1 : répartir des ressources tels que images sur plusieurs domaines afin de paralléliser les requêtes et outrepasser la limite du nombre de connexion simultané du navigateur web avec le serveur.

HTTP/2 : le protocole gère le multiplexing et il y a le principe de connexion unique.

Aussi, on peut appliquer les Principes de la Web Performance en s’inspirant du Responsive Web Design pour s’adapter au HTTP/2, appelons ça Responsive Web Performance.

Comment TimeDM va accélérer votre site propulsé par le moteur WordPress?

Bien sûr, tous les sites réalisés par TimeDM sont nativement optimisés, en respectant les principes édictés par la ‘Web Performance’, et ce dès la conception du projet.


En savoir davantage sur les Prestations Web Design = Charte graphique +Mobile first +Responsive Web Design +Wireframe +Sitemap


En savoir davantage sur les Prestations Web Développement = HTML +CSS +JavaScript +PHP & MySQL x WordPress


En savoir davantage sur les Prestations Web Déploiement = UP +SEOP1 +BOOST +NAME +HOST +HTTPS +PERF


Vous savez exactement ce que vous voulez. Ok, parlons-en par email, maintenant. Vous hésitez… vous pouvez… me contacter afin de discuter par email. Ensemble, nous réfléchissons à ce qui peut répondre à votre objectif.