AMP pour accélérer le Web mobile
AMP signifie Accelerated Mobile Pages, ou Pages Mobile Accélérées. A l’heure où les appareils mobiles ont pris le dessus sur l’ordinateur fixe, où Google accorde la priorité aux sites optimisés pour la navigation itinérante, la vitesse de chargement sur mobile et tablette est un enjeu crucial. Découvrons ce qu’est le projet AMP.
AMP : qu’est-ce que c’est ?
Le Projet AMP est un projet open-source et dédié à l’accélération du Web mobile.
Il est composé par de nombreux partenaires, comme entre autres Google, LinkedIn, Twitter, WordPress, DailyMotion, Vimeo, … : la liste est disponible sur le site du projet.
Ce projet définit un nouveau standard de codage de page Web : AMP permet de créer des pages Web qui affichent rapidement du contenu statique. Il impose aux sites de fournir le contenu de leurs pages Web dans une version light très rapide à charger. L’intérêt annoncé de AMP est d’offrir à l’internaute un affichage des pages Web quasi instantané, de la même manière que sur Apple News ou encore Facebook Instant.
Selon le Projet AMP, les pages ainsi créées sont dix fois plus légères en moyenne et par conséquent jusqu’à quatre fois plus rapides à télécharger. Le but avoué est donc que l’internaute puisse consulter toujours plus de contenu Web, et de manière toujours plus rapide.
Et augmenter le nombre de pages vues par un internaute, c’est mécaniquement augmenter le nombre de publicités qu’il voit… Ce qui restera toujours le but ultime de notre ami Google 😉
Les techniques AMP
Techniquement, le fonctionnement d’AMP est basé sur trois choses différentes :
- l’AMP HTML est du HTML avec certaines restrictions pour des performances fiables et certaines extensions pour la construction de contenu enrichi au-delà du HTML de base.
- La bibliothèque AMP JS assure le rendu rapide des pages HTML AMP.
- Le cache Google AMP peut être utilisé pour servir les pages HTML AMP mises en cache.
Les résultats de recherche Google indiquent aux utilisateurs que vos pages utilisent AMP HTML en affichant l’icône spécifique (lightning bolt). Ainsi, les internautes sont prévenus que le contenu de votre site sera chargé rapidement sur leur mobile ou sur leur réseau.
Une page AMP possède la même URL que la page en langage HTML classique, accompagnée du suffixe /amp/.
Les optimisations apportées :
- Autorisation des scripts asynchrones uniquement : empêche JavaScript de retarder l’affichage de la page,
- Dimensionnement de manière statique de toutes les ressources (images, publicités, iframes) : déclaration de la taille de la ressource,
- Empêchement du blocage de l’affichage de la page par les mécanismes d’extension (tweets, instagram, mosaïque d’images, …),
- Obligation pour une feuille de style CSS d’être en ligne et de ne pas dépasser 50Ko : pas de requêtes HTTP supplémentaires,
- Hiérarchisation du chargement des ressources, par exemple lecture à l’ouverture de la page uniquement des images visibles au-dessus de la ligne de flottaison,
- Exécution des animations seulement si elles sont accélérées par GPU (processeur graphique),
- Préchargement des polices Web,
- …
Ces techniques seront détaillées plus avant dans un prochain article.
Injection SQL : comment éviter un problème de sécurité en PHP
Quelque soit l’expérience, le niveau de compréhension, la dextérité d’un développeur web, l’un des problèmes majeurs qu’il doit garder à l’esprit tout au long de la phase de développement, c’est la SECURITE. Les clients sont de plus en plus conscients des problèmes de sécurité sur internet et sont donc plus préoccupés par ces questions en ce qui concerne leur propre site web. Concernant le langage de programmation PHP, l’injection SQL est une menace pour les sites web dont les données stockées sont issues de sources distantes.
Aujourd’hui, nous allons présenter une vue d’ensemble de cette menace pour la sécurité ainsi qu’un conseil pour aider les développeurs à éviter ce problème en rendant les requêtes SQL moins vulnérables.
Web Formulaires HTML5 Autocomplete
La spécification HTML5 introduit de nombreuses évolutions au niveau des formulaires, afin de mettre en place de nouveaux comportements. Intéressons-nous aujourd’hui à l’attribut autocomplete, permettant de gérer par défaut l’auto-complétion sur un élément particulier du formulaire.
Web formulaires html5 – required
La spécification HTML5 introduit de nombreuses évolutions au niveau des formulaires, afin de mettre en place de nouveaux comportements natifs.
Intéressons-nous aujourd’hui à l’attribut ‘required’, permettant de définir pour quel élément une valeur est obligatoire avant la validation du formulaire.
Web Formulaires HTML5 – Autofocus
La spécification HTML5 introduit de nombreuses évolutions au niveau des formulaires, afin de mettre en place de nouveaux comportements.
Intéressons-nous aujourd’hui à l’attribut ‘autofocus’, permettant de positionner par défaut le curseur sur un élément particulier du formulaire.
Web Formulaires HTML5 – Placeholder
La spécification HTML5 introduit de nombreuses évolutions au niveau des formulaires, afin de mettre en place des comportements jusqu’ici traités par Javascript.
Intéressons-nous aujourd’hui à l’attribut ‘placeholder’, permettant de générer un petit texte par défaut dans un champ de saisie.
HTML5 – Rich Media : Vidéo
Après le zoom sur l’élément audio dans l’article HTML5 – Rich Media (2nde) : Audio , voici la 3e et dernière partie HTML5 ‘Rich Media’ consacrée à l’élément vidéo.
De nos jours, avec l’augmentation constante de la bande passante mise à disposition des utilisateurs, le contenu vidéo est devenu incontournable.
Les plugins Flash d’Adobe et à un degré moindre SilverLight de Microsoft sont les technologies majeures permettant la diffusion de vidéo sur le web.
Voyons ce que HTML5 nous propose pour s’affranchir de ces technos propriétaires, ce qui soit dit en passant est extrêmement intéressant pour les plates-formes Apple iOS ne supportant pas Flash…).
Lire la suite
HTML5 – Rich Media : Audio
Comme nous l’avons auparavant évoqué à travers l’article HTML5 Rich Media – 1ere partie/, HTML5 propose aujourd’hui une alternative aux plugins propriétaires ‘Flash’ ou ‘SilverLight’.
Dans cette seconde partie consacrée aux éléments dits ‘Rich Media’, nous allons nous pencher sur l’élément audio, détailler ces attributs et aussi les contraintes pesant sur son utilisation.
HTML5 – Rich Media (1ere partie) : Canvas
Dans la courte mais déjà si riche histoire du web, certaines évolutions ont été des étapes marquantes. L’introduction de la balise <img> fut une innovation majeure dans la perception du rendu ; par la suite, celle du JavaScript, puis d’Ajax apportèrent le dynamisme qui lui manquait.
S’il est possible de faire énormément de choses en combinant HTML, CSS & JavaScript, il reste néanmoins des trous dans la raquette : la publication de contenus audio et vidéo requiert l’utilisation de plugins comme Flash ou SilverLight.
Il est donc possible de tout faire, finalement ? Magnifique ! Oui et non, car Flash et SilverLight sont des outils sous contrôles de sociétés mercantiles.
Aujourd’hui, HTML5 propose de combler l’espace vacant via des éléments dits ‘Rich Media’.
Dans cette première partie, consacrée à ces éléments, nous allons détailler l’élément canvas.
Lire la suite
HTML5 : Introduction
Si le langage HTML5 est en cours de spécification, 2012 est l’année où ces spécifications doivent passer au statut “candidate recommendation”, c’est-à-dire qu’elles ont atteint un certain niveau de maturité.
Les constructeurs de navigateurs web implémentent d’ores et déja dans leurs outils certaines de ces spécifications, ce qui fait que les web développeurs et designers peuvent les utiliser dans leurs conceptions.
Tirant leçon de l’échec du XHTML2, les concepteurs du HTML5 ont suivi un principe simple mais efficace : “Supporter l’existant”.
On y retrouve donc la plupart des spécifications du HTML4.01.
La méthode suivie est de privilégier le pragmatisme à la théorie, et en cas de conflit, de se ranger au point de vue de l’utilisateur lambda plutôt que de celui de la pureté théoricienne.
Et surtout d’écouter les avis des fabricants de navigateurs. Lire la suite
