Bonjour chers lecteurs du site de blog. Aujourd'hui, je veux parler avec vous d'un sujet aussi important que la vitesse de chargement d'un site. Vous avez probablement tous entendu dire qu'en plus de nombreux autres facteurs affectant la promotion d'un projet Web, les moteurs de recherche ont récemment commencé à en tenir compte. Et les visiteurs sont très agacés par les freins du site, surtout ceux qui y sont habitués.
Mais néanmoins, pour de nombreux webmasters, la vitesse de téléchargement n'est pas le sujet sur lequel on devrait commencer à s'interroger immédiatement, généralement elle est reportée à plus tard, et les problèmes urgents associés au remplissage de la ressource avec des matériaux uniques et à l'amélioration de son optimisation interne sont mis en avant. , mais l'ensemble des facteurs influençant. Comme on dit, la force d'une chaîne est déterminée par son maillon le plus faible ...
Services en ligne pour mesurer la vitesse de chargement du site Web
En tout cas, c'est ce que j'ai ressenti jusqu'à récemment pour essayer d'accélérer ma ressource. Mais il m'est venu à l'esprit qu'il valait mieux ne pas attendre les tendances désagréables dans (à savoir, une diminution du trafic avec, car c'est plus critique de la vitesse de téléchargement), mais corriger un défaut évident dès maintenant.
Tu dois juste réaliser que la vitesseà partir duquel votre site Web, blog ou forum est chargé, est un indicateur très important... Si votre projet ne fonctionne pas bien avec cet indicateur, cela peut entraîner des conséquences plutôt désagréables. Et le plus important d'entre eux est que les visiteurs peuvent refuser de travailler avec votre ressource, car le chargement des pages prend beaucoup de temps. De plus, les moteurs de recherche, notamment Google, en tiennent compte dans l'évaluation globale de l'utilité d'une ressource particulière.
Afin de comprendre à quelle vitesse les pages de votre ressource sont chargées, vous pouvez utiliser, par exemple, les capacités de celui-ci, qui sont décrites en détail dans l'article sur le lien fourni. Et vous pouvez utiliser les services de services qui sont conçus à cet effet. Ci-dessous, j'en citerai quelques-uns à titre d'exemples.
- Pingdom - ici, il suffit d'indiquer simplement l'adresse de la page, dont vous voulez mesurer la vitesse de téléchargement (cela ne doit pas être la page principale, car la vitesse de téléchargement des pages internes n'est pas moins et souvent encore plus importante).
En conséquence, un diagramme du temps de téléchargement des objets de page Web individuels sera présenté, ainsi que leur URL et leur poids. Moins d'objets seront chargés et plus chacun d'eux pèsera léger, Tout le meilleur. Par exemple, à cette fin, je:
- combiné quelques images du thème du site en
- et aussi, si possible, réduit de
- à part ça, ça a du sens
En fait, vous pouvez suivre certains problèmes et l'historique de mesure de la vitesse de votre site sur les onglets adjacents du menu supérieur de Pingdom.
Une fenêtre pop-up vous demandera de copier le lien permanent vers le test effectué, ainsi que de l'envoyer par e-mail ou Twitter. Également en bas de la fenêtre, vous pouvez vous abonner au sujet de disponibilité. Si votre ressource tombe en panne (devient inaccessible aux visiteurs), un message vous sera envoyé par e-mail ou SMS sur votre téléphone portable. Mais ce service est payant, bien qu'il y ait la possibilité d'un essai gratuit.
Pour votre site, ainsi que pour visualiser Traceroute, vous devrez sélectionner l'onglet "Ping et Traceroute" tout en haut de la page. Entrez l'URL sans http dans le formulaire proposé, cochez la case "Traceroute" ou "Ping" sous ce formulaire, et cliquez sur "Tester maintenant".
- WebPageTest - comme d'habitude, entrez l'URL de la page en cours de vérification (pas nécessairement la page principale). Pendant un certain temps, le service calcule la vitesse de chargement de tous les éléments du site, après quoi il produit un diagramme très visuel (plus précisément, même deux - pour le premier passage et pour le second, lorsque certains des éléments du site sont déjà chargés à partir du cache du navigateur):
Dans le premier diagramme, faites attention à la position de la ligne verticale violette - ce sera heure de fin de rendu du site... La deuxième ligne verticale (bleu) signifierait temps de chargement complet... C'est bien si la première ligne est à 1-1,5 secondes de chargement du site et la seconde est antérieure à 4 secondes. Ensuite, les paragraphes suivants peuvent être lus "pour référence". Si le site se charge pendant plus de 4 secondes, vous devez corriger cette situation.
- Google PageSpeed \u200b\u200bInsights
Est un outil pour les développeurs de Google lui-même. Il donne une estimation de la vitesse de chargement de votre site (ou plutôt l'optimisation de cette vitesse) sur une échelle de 100 points. 100 est un idéal inaccessible, mais 80-90 est assez réaliste à obtenir, d'autant plus que le service donne des recommandations très détaillées pour corriger les lacunes identifiées.
Comme vous pouvez le voir sur la capture d'écran ci-dessus, Google PageSpeed \u200b\u200bInsights fournit une évaluation complète - pour ordinateur de bureau et mobile. De plus, vous trouverez ci-dessous une évaluation de l'utilisabilité de votre ressource sur différents gadgets. Si vous ne vous êtes pas encore dérangé, alors le score sera très faible (et sur la capture d'écran à droite de votre site dans la fenêtre du smartphone, tout sera clairement visible).
Mais surtout, Google PageSpeed \u200b\u200bInsights donne des recommandations sur la façon d'augmenter la note de votre site, c'est à dire. comment l'accélérer. Il faut bien sûr commencer par le haut, car ces corrections contribueront le plus à l'accélération.
Par exemple, j'ai eu un problème avec la configuration de la compression gzip et avec la définition du temps de mise en cache pour les statiques (images, fichiers css et scripts) dans les navigateurs des utilisateurs, car Apache fonctionne pour moi en conjonction avec nginx, mais je ne peux pas travailler avec. J'ai dû écrire au support technique d'Infobox pour lui demander de tout configurer - ils l'ont fait, et ils n'ont même pas pris d'argent (grâce à eux!). À propos, ils ont initialement fixé la durée de stockage du cache à 1 heure, mais Google PageSpeed \u200b\u200bInsights jurait toujours:
J'ai dû plonger dans les instructions de ce service en ligne et en déduire que le minimum devrait être fixé à 1 jour de stockage de la statique dans le cache. J'ai demandé au support technique d'hébergement de livrer avec une marge d'une semaine, ce qu'ils ont fait. Maintenant, le score a légèrement augmenté et Google n'a pas de revendications très importantes sur ma ressource en termes de vitesse de téléchargement, ce qui est bien.
- Tester mon site - un nouveau service, toujours de Google. Il se concentre principalement sur l'évaluation version mobile votre site, y compris par le critère de sa vitesse de chargement:
Simple et de bon goût, comme on dit. Vous pouvez vous abonner à la newsletter des changements.
- GTmetrix - à nouveau "sans plus tarder" entrez l'url de la page souhaitée et attendez un peu la fin de l'analyse. En conséquence, vous recevrez un rapport basé sur les données de deux plugins de navigateur - Page Speed \u200b\u200b(lire comment l'utiliser ci-dessous) et YSlow. En fait, quelles données faire confiance et dont les recommandations à suivre dépendent de vous.
À ce sujet, j'ai déjà écrit en détail et je ne me répéterai donc pas, afin de ne pas encombrer l'article déjà encombrant (lu jusqu'au bout - vous pouvez vous considérer comme un héros).
- Administrateur ping - une ressource en ligne similaire pour mesurer le temps de réponse des serveurs de différentes parties de notre vaste planète.
- Suivi de l'hôte - presque le même, seulement des pays différents.
- ByteCheck - vous permet de mesurer la valeur TTFB (Time To First Byte) de votre site, qui est souvent prise en compte lors de l'optimisation. C'est l'heure à laquelle le navigateur reçoit le premier octet de données du serveur. Plus la valeur TTFB est élevée, plus les ressources de traitement du serveur sont lentes, ce qui est mauvais. Lisez la suite pour obtenir des conseils pour optimiser le chargement du site Web.
- Impact de la charge - ce n'est pas vraiment une question de vitesse, mais c'est aussi un service important. Il vous permet de tester la capacité de charge de votre site et si la vitesse de chargement des pages diminue. Une chose très utile.
- Vitesse de la page Web Est un service en ligne avec un design du début des années 90, mais assez informatif si vous vous adaptez au manque de convivialité. Vous trouverez ci-dessous des recommandations générales pour corriger la situation.
Est-il important de suivre la vitesse de chargement des pages?
Mais revenons de la mesure de la vitesse à la recherche d'opportunités pour l'augmenter. , auparavant, il y avait un onglet expérimental «Efficacité du site», où la vitesse de chargement du site était estimée.
En général, il n'y a rien de criminel dans la vitesse de téléchargement indiquée ici, mais le fait que mon site de blog soit chargé plus lentement que 84% de toutes les ressources Web sur Internet est déjà une cloche à laquelle il faut répondre. Mais puisque Google pense que mon blog est un outsider en termes de vitesse, il vaut la peine de prendre ce problème au sérieux et de s'attaquer à la question de savoir comment l'augmenter.
En fait, je n'avais rien à proposer de spécial, car Google lui-même suggère la solution la plus optimale. Plus précisément, il suggère d'utiliser un outil, qui à son tour vous aidera à comprendre ce qu'il faut exactement faire pour accélérer un peu (ou beaucoup) votre site. Je parle d'un service en ligne Vitesse de la page (auparavant, il y avait aussi des extensions du même nom pour navigateur FireFox et Chrome, que j'ai principalement utilisé).
Je ferai une réserve tout de suite que cet outil fonctionne avec des choses plutôt compliquées et pas tout à fait claires pour les webmasters ordinaires, qui sont principalement liées aux subtilités et aux nuances du serveur Web. Si vous n'avez jamais administré de serveur, mais ce sera difficile.
Il y a un moyen de sortir - fatiguez votre hébergeur sur le thème de l'exécution des actions prescrites par Paige Speed. D'accord ou pas d'accord est une autre question. Je n’ai pas osé, car c’est idiot de donner accès au serveur à quiconque (ici, je suis tellement incrédule).
Sur la page principale, PageSpeed \u200b\u200bpropose même d'installer le module sur votre serveur s'il exécute Apache ou Nginx (juste mon cas):
Mais je n'ai toujours pas compris comment cela se fait, car je ne comprends pas du tout en administration de serveur et je n'ai jamais travaillé avec des systèmes de type Unix. C'est beaucoup plus difficile que d'installer un programme ou de télécharger un plugin WordPress. Un autre niveau d'immersion. L'hébergeur n'a pas non plus osé se fatiguer à ce sujet. En général, je n'ai pas testé ce module - il est possible que vous l'ayez déjà essayé et qu'il y ait quelque chose à dire ...
En général, la première fois que j'ai utilisé Page Speed \u200b\u200bcomme extension de navigateur (maintenant, si je comprends bien, cela ne fonctionne pas). Il était auparavant intégré aux outils de développement de Firefox et Chrome. Certes, tout d'abord (il y a quelques années) je viens de jeter un coup d'œil sur les conseils qu'il me donne, et pratiquement sans rien comprendre, j'ai décidé que ce n'était pas pour moi, après quoi, le cœur léger, j'ai supprimé le plugin PageSpeed \u200b\u200bcomme un élément qui n'était pas nécessaire et étranger à mon esprit.
Le fait est que même en comprenant ce que ce plugin jure, je ne savait pas quoi fairepour éliminer tout cela et accélérer en quelque sorte votre blog. En général, j'ai tout de suite trouvé beaucoup de choses plus importantes, en comparaison avec lesquelles le bruit de la souris avec les paramètres du serveur Web (d'autant plus que je ne les comprends pas vraiment) me paraissait petit et insignifiant.
Certes, à un moment donné, j'ai également reporté la solution du problème de sécurité en veilleuse et par conséquent payé pour cela avec la perte de tout cet argent. Conscient de ce qui s'est passé, l'autre jour j'ai décidé de baisser la tête et d'essayer de déplacer le problème de l'augmentation de la vitesse de chargement du site, malgré toute l'incompréhensibilité et la complexité de cette question pour moi.
Bref, j'ai réinstallé Paige Speed \u200b\u200bà Mazila (maintenant ce n'est plus nécessaire de faire ça), j'ai regardé ce qu'il jure exactement et j'ai quand même réussi à améliorer quelque chose et, j'espère, au moins augmenter un peu la vitesse.
P.S. Désormais, Page Speed \u200b\u200bne peut être utilisé qu'en ligne et il n'est plus nécessaire de l'installer dans le navigateur (dans tous les cas, ce plugin est incompatible avec les nouvelles versions de chrome), bien que cela ne change pas l'essence.
Donc, avant vous deviez installer un plugin dans votre navigateur, mais maintenant il suffit d'aller ici , entrez l'URL de la page que vous souhaitez analyser (différents types de pages peuvent avoir des problèmes de vitesse de chargement différents, il est donc logique de cocher toutes les options de cet outil) et cliquez sur le bouton bleu "Analyser".
Après avoir attendu les résultats du processus de vérification, vous verrez une fenêtre similaire à celle que j'ai déjà montrée dans la capture d'écran ci-dessus dans le texte (au paragraphe 3 des descriptions des services en ligne pour vérifier la vitesse de chargement des sites). Alors en conséquence, vous verrez toute une liste de réclamations que ce service en ligne a à votre ressource, à savoir la vitesse de son chargement. Régalez-vous, il vous donnera quelques conseils sur la façon d'optimiser le serveur Web en conjonction avec le moteur que vous utilisez.
De plus, tout en haut de la fenêtre Vitesse de la page, il y aura des notes et des recommandations que vous aimeriez voir et modifier tout d'abord ("Corrigez-le nécessairement"), car cela aura le plus grand effet en termes d'augmentation de la vitesse de téléchargement et ne vous demandera pas trop d'efforts. Je donnerai un exemple d'analyse d'un de mes projets secondaires, auquel mes mains n'atteignent pas vraiment:
Ceux. recommandations et problèmes trouvés, marqués d'un rectangle rouge avec point d'exclamation et situés tout en haut de la liste sont les plus importants et il est souhaitable de commencer l'optimisation avec eux (bon marché et joyeux, comme on dit), obtenant ainsi le plus grand effet.
Les notes surlignées en orange nécessiteront beaucoup d'efforts de votre part pour être corrigées, mais peuvent ne pas entraîner une augmentation très significative de la vitesse. Hélas et ah, alors qu'ils peuvent être mis en veilleuse et s'attaquer aux tâches principales qui contribueront à accélérer considérablement le projet.
J'ai une première photo il y a quelques années (même en utilisant le plugin - maintenant la même chose peut être vue sur http://gtmetrix.com/, car il utilise l'API PageSpeed) pour https: // le site était comme ceci:
J'ai alors décidé de partir du tout premier point "Tirer parti de la mise en cache du navigateur" (maintenant il s'appelle "Utiliser le cache du navigateur"), car selon la logique de Page Speed, ces recommandations devraient conduire à la plus grande accélération de mon blog.
Si vous cliquez sur le spoiler à côté de cette inscription, une liste de divers fichiers qui ne répondent pas aux exigences optimales apparaîtra mise en cache d'objets statiques (scripts, fichiers CSS, fichiers image utilisés sur une page Web) dans les navigateurs des utilisateurs (c'est-à-dire les lecteurs):
Ceux. PageSpeed \u200b\u200bInsights nous conseille d'optimiser la mise en cache de divers éléments de pages Web dans les navigateurs des utilisateurs pour augmenter la vitesse de chargement afin que lors de la visualisation d'autres éléments, ces éléments statiques ne soient pas chargés à nouveau depuis le serveur. En théorie, tout cela semble assez déroutant, car je n'ai aucune idée des mécanismes de mise en cache utilisés par les navigateurs (lisez à ce sujet et comment le supprimer).
De plus, nous optimiserons la mise en cache des objets statiques en utilisant les mécanismes de votre serveur d'hébergement lui-même. Assez déroutant, mais je vais vous proposer des solutions toutes faites trouvées sur Internet, et vous les essaierez en action et déciderez laquelle fonctionnera le mieux sur votre hébergement.
Optimiser la mise en cache du navigateur et vérifier si cela fonctionne
Certes, cela n'a pas fonctionné sur mon hébergement actuel, car j'ai maintenant un tas d'Apache avec nginx (je dois configurer le dernier que l'hébergeur a fait pour moi d'une manière que je ne connaissais pas). Mais si vous avez un Apache pur, la méthode suggérée ci-dessous peut fonctionner.
En général, nous essaierons d'influencer le serveur sur lequel votre projet est hébergé afin qu'il émette des commandes aux navigateurs visant à optimiser la mise en cache des éléments statiques. Nous allons le faire en utilisant le plutôt bien connu outil de gestion de serveur distant - fichier .htaccess... Connaissez-vous l'existence de tels?
Il vit généralement dans le dossier racine. Naturellement, tout ce qui est décrit ci-dessous ne fonctionnera que sur les serveurs exécutant Apache, mais il y en a généralement la plupart. Après vous être connecté à votre ressource via FTP (), ouvrez le dossier racine (il s'agit généralement de PUBLIC_HTML ou HTDOCS) et recherchez le fichier .htaccess qu'il contient.
Désormais, vous faites tout à vos risques et périls. Par conséquent, assurez-vous de télécharger une copie de ce fichier sur votre ordinateur afin de revenir rapidement en arrière si quelque chose se produit.
Si .htaccess n'est pas visible, alors essayez dans le programme FileZilla de sélectionner dans le menu supérieur les éléments "Serveur" - "Forcer l'affichage fichiers cachés". Si après cela, il n'apparaît pas à la racine, créez un fichier texte vide sur votre ordinateur dans n'importe quel éditeur qui vous convient (j'utilise Notepad plus plus), nommez-le quelque chose et copiez-le à la racine.
Après cela, renommez ce fichier en .htaccess dans le programme FileZilla. Vous devrez maintenant l'ouvrir pour le modifier et y ajouter le code ci-dessous. Mais d'abord, je vais vous expliquer un peu.
Les moyens les plus courants d'activer cette option sur un serveur Web exécutant Apache sont avec les modules mod_headers ou mod_expires. Le code ci-dessous vous aidera à activer la mise en cache des statiques dans le navigateur si le service en ligne au moins un de ces modules Apache est installé sur votre serveur.
Je vais d'abord donner code pour le module mod_headers... J'attire votre attention sur le fait qu'il vérifie si votre hébergeur dispose de ce module. S'il n'est pas trouvé, le code ne sera pas exécuté et ne causera aucune erreur. Cependant, je vous recommande encore une fois fortement de copier d'abord le fichier original (avant de saisir le code ci-dessous) .htaccess sur votre ordinateur afin d'éviter les excès.
Vous pouvez supprimer les commentaires (leurs lignes commencent par un signe dièse) plus tard, mais ils n'affecteront pas le travail du code de toute façon.
Il sera possible d'en rajouter un bloc de code calculé par module pour mod_expires, où à nouveau il est utilisé pour vérifier sa présence sur votre serveur, ce qui garantit la sécurité de l'utilisation de ce morceau de code:
Les commentaires, encore une fois, peuvent alors être supprimés.
Si cela n'a soudainement pas fonctionné, mais que vous espérez un miracle, alors voici quelques variantes supplémentaires du même code, mais essayez-les une par une, et pas toutes en même temps:
ExpiresActive On ExpiresByType application / javascript "accès plus 1 an" ExpiresByType text / javascript "accès plus 1 an" ExpiresByType text / css "accès plus 1 an" ExpiresByType image / gif "plus 1 an" ExpiresByType image / jpeg "accès plus 1 année d'accès "ExpiresByType image / png" plus 1 an " Header set Cache-control: private Header set Cache-control: public BrowserMatch "MSIE" force-no-varie BrowserMatch "Mozilla / 4. (2)" force-no-varie - FileETag MTime Taille
ExpiresActive on ExpiresDefault "accès plus 1 mois"
Maintenant, après avoir inséré le code dans .htaccess pour augmenter la vitesse en optimisant la mise en cache dans le navigateur du côté du visiteur et enregistré les modifications apportées, vérifiez à nouveau votre page de ressources dans PageSpeed \u200b\u200bInsights et assurez-vous que le problème a disparu:
Comme vous pouvez le voir, dans mon cas, "Utiliser le cache du navigateur" n'est plus une faille critique qui ralentit le chargement, et l'icône à côté de cette note est devenue orange, mais pas verte. Malheureusement, je ne suis pas en mesure d'influencer les services tiers à partir desquels mon site charge des statiques (tels que Yanedx, Google, Feedberner et Aptulaika).
Q.E.D. C'est ainsi que nous avons résolu sans effort l'un des problèmes les plus importants et les plus significatifs rencontrés dans Page Speed.
Comment activer la compression d'objets statiques sur le serveur
En outre, un problème très courant sur lequel le service GTmetrix jure est le manque de compression de fichiers sur le serveur avant de les transférer vers les navigateurs des utilisateurs.
Utilisé dans ce cas, dont j'ai déjà parlé. Si vous analysez pas directement via PageSpeed \u200b\u200bInsights, mais via GTmetrix, alors dans la zone PageSpeed \u200b\u200b"Activer la compression" est appelé "Activer la compression gzip", et dans YSlow - "Compresser les composants avec gzip".
Afin d'activer cette compression très Gzip sur les sites d'hébergement où le serveur Apache est utilisé, il suffira d'ajouter le fragment de code correspondant au fichier .htaccess (il s'agit d'un fichier de contrôle de serveur distant). Apache a deux modules de compression et l'un d'eux sera installé par votre fournisseur d'hébergement (bien que ce ne soit pas un fait).
Le plus courant - commençons par cela. Encore une fois, nous ajoutons un contrôle de la présence de ce module au code afin de ne pas recevoir d'erreur 500 pour l'ensemble du site.
Un peu moins populaire et pour cela, le code permettant d'activer la compression Gzip pour les types de fichiers requis ressemblera à ceci:
En fait, essayez de tester la page dans PageSpeed \u200b\u200bInsights après avoir installé le code. Si le problème a disparu, considérez-vous chanceux. Cependant, en raison de la présence d'Apache avec nginx, tout cela ne m'a pas aidé (l'hébergeur a dit que nginx est responsable de la statique, dans cette situation, il est nécessaire de le configurer - comme il l'a fait je ne sais pas).
Bonne chance à toi! A bientôt sur les pages du site du blog
Vous pourriez être intéressé
Mesurer et augmenter la vitesse du site dans GTmetrix, ainsi que configurer le chargement de la bibliothèque jQuery à partir de Google CDN 
Compression Gzip pour accélérer le chargement du site Web - comment l'activer pour Js, Html et Css à l'aide du fichier .htaccess 
Comment augmenter la vitesse de chargement du site Web au maximum et optimiser la charge du serveur 
Accélération du site Web - ce qui donne, comment mesurer et comment accélérer le site Web vous-même 
Créez des sprites CSS dans le générateur Sprites Me en ligne pour réduire le nombre de requêtes serveur 
Optimisation et compression du CSS dans Page Speed \u200b\u200b- comment désactiver les fichiers de style externes et les combiner en un seul pour un chargement plus rapide 
Comment obtenir un site Web rapide - optimisation (compression) des images et des scripts, ainsi que réduction du nombre de requêtes Http
La vitesse de chargement du site est l'un des indicateurs les plus importants de l'utilisabilité des ressources et, surtout, l'un des centaines de facteurs de classement. En effet, un utilisateur moderne qui clique sur un lien n'attend pas plus de 5 secondes le chargement de la page. Par conséquent, plus le chargement de votre site est long, plus vous perdez de clients potentiels.
Plus de 50% des internautes utilisant des appareils mobiles s'attendent à un chargement quasi instantané du site Web. Sur la base de ces statistiques, cet article se concentrera sur la façon d'atteindre des indicateurs 100/100 dans Google PageSpeed \u200b\u200bInsights pour les appareils fixes et mobiles en utilisant l'exemple du site Monitor Backlinks.
Motivation
Le site exemple se charge assez rapidement, donc dans ce cas, les résultats s'amélioreront au maximum.
Un jour, en travaillant avec l'outil PageSpeed, il a été remarqué que le site de Google avait un score mobile étonnamment bas de 59/100. La situation avec la version pour appareils fixes était meilleure - 92/100.
Il semblerait qu'ils auraient dû utiliser leur propre outil pour optimiser leur site Web, non? Un résultat 100/100 est-il donc impossible à atteindre?
C'était l'incitation à réaliser le chargement le plus rapide du site, à prouver qu'il est possible d'obtenir des résultats 100/100, et si vous le souhaitez, vous pouvez également le faire. Ce n'est pas une obsession, c'est simplement la poursuite de la perfection.
Le point de départ du site d'essai était 87/100.
En conséquence, après avoir appliqué certaines manipulations, les résultats suivants ont été obtenus:
Comment nous avons réussi à atteindre de tels indicateurs, lisez la suite.
Comment accélérer le chargement des pages?
Avant de passer aux étapes étape par étape selon les instructions, laissez-moi noter que l'outil PageSpeed \u200b\u200bn'est qu'un guide pour les webmasters sur la manière d'optimiser une ressource. De plus, l'outil contient des recommandations pour accélérer le chargement des pages de votre site, et l'obtention de résultats positifs dépend en grande partie des paramètres du serveur.
Veuillez noter que certaines étapes des instructions peuvent nécessiter des connaissances techniques, quel que soit le système de gestion de contenu (CMS) utilisé.
Alors, commençons:
Étape n ° 1: Optimiser les images
Pour accélérer le chargement des images, l'outil PageSpeed \u200b\u200bInsights a suggéré de les optimiser en réduisant la taille des fichiers. Pour accomplir cette tâche, deux choses importantes doivent être faites:
- Compressez toutes les images à l'aide d'outils tels que Compressor.io et TinyPNG. Ce sont des outils gratuits avec lesquels vous pouvez réduire la taille d'un fichier image de plus de 80%, et dans certains cas, sans dégrader la qualité de l'image elle-même.
- Réduisez la taille des images au minimum sans dégrader leur qualité. Par exemple, si sur le site nous avons besoin d'une image 150x150px, alors sur le serveur l'image doit être de la taille appropriée. Les paramètres d'image ne doivent pas être personnalisés à l'aide de balises CSS ou HTML.
Selon les règles ci-dessus, chaque image sur le site a été téléchargée et également compressée et redimensionnée manuellement. Et afin de ne pas prendre la peine d'optimiser les images après leur téléchargement sur le site, il est préférable de prendre l'habitude d'optimiser initialement toutes les nouvelles images téléchargées sur le serveur. Chaque nouvelle image doit être compressée et ajustée aux paramètres requis.
PageSpeed \u200b\u200bInsights offre la possibilité de télécharger des images déjà optimisées, afin qu'elles puissent être téléchargées sur le serveur directement à partir de ce service. La même chose peut être faite avec JavaScript et CSS.
Étape n ° 2: minimisez JavaScript, CSS et HTML
Dans l'exemple, Google suggère de réduire les fichiers JavaScript et CSS.
Le processus de minification réduit la taille des fichiers en éliminant les espaces inutiles, les traits d'union, les lignes, les symboles et les commentaires dans les fichiers JavaScript et CSS. Les programmeurs laissent souvent beaucoup d'espace et de commentaires lors du codage, ce qui peut doubler la taille des fichiers JavaScript et CSS.
Pour résoudre ce problème, Gulpjs a été installé sur le serveur. C'est un outil qui crée automatiquement un nouveau fichier CSS et supprime tous les espaces inutiles. De plus, il crée automatiquement un nouveau fichier CSS chaque fois que vous apportez de nouvelles modifications. Dans l'exemple fourni, cela a permis de réduire la taille du fichier CSS principal d'environ 300 Ko à 150 Ko. Cette différence de taille est due à des caractères inutiles.
Vous pouvez également réduire la taille de JavaScript et CSS en renommant les variables, à condition que les sélecteurs fonctionnent correctement et que le HTML soit mis à jour.
JavaScript peut être optimisé à l'aide de Closure Compiler, JSMin ou YUI Compressor. Vous pouvez créer un programme personnalisé qui, à l'aide des outils ci-dessus, renomme les fichiers et les enregistre dans le répertoire de travail.
Vous pouvez réduire le CSS à l'aide des outils YUI Compressor et cssmin.js.
Vous pouvez réduire le code HTML via PageSpeed \u200b\u200bInsights. Analysez la page et sélectionnez Tronquer le HTML. Pour optimiser le code, cliquez sur "Afficher le contenu optimisé".
Vous pouvez en savoir plus sur l'optimisation des fichiers JavaScript et CSS en suivant le lien:
Vous pouvez également télécharger les fichiers optimisés directement à partir de l'outil PageSpeed.
Voici les résultats après avoir minifié JavaScript et CSS:
Étape n ° 3: Utilisation du cache du navigateur
Pour de nombreux webmasters, l'étape consistant à utiliser la mise en cache du navigateur est la plus difficile.
Pour résoudre ce problème, j'ai dû déplacer tous les fichiers statiques du site vers le CDN (Content Delivery Network).
Un CDN est un réseau de serveurs situés à divers endroits dans le monde. Ils mettent en cache les versions statiques de sites Web telles que les images, les fichiers JavaScript et CSS. Les serveurs CDN stockent des copies du contenu du site, et lorsque vous visitez ce site, le contenu statique est téléchargé à partir du serveur le plus proche.
Par exemple, si le serveur principal du site est situé au Texas, alors sans CDN, un visiteur d'Amsterdam devra attendre que le contenu du site soit acheminé depuis un serveur situé aux États-Unis. Avec un CDN, le site se chargera beaucoup plus rapidement depuis le serveur le plus proche de l'utilisateur, dans ce cas depuis Amsterdam. Ainsi, la distance d'accès aux données est réduite et le site se charge presque instantanément.
Voici une visualisation du fonctionnement d'un CDN:
Sur le site de test, toutes les images, les fichiers JavaScript et CSS ont été transférés vers le CDN, et seuls les fichiers HTML sont restés sur le serveur principal. Le placement d'images sur un CDN joue un rôle important dans la vitesse à laquelle les pages du site Web se chargent pour les visiteurs.
Après les manipulations susmentionnées, l'outil PageSpeed \u200b\u200ba continué à suggérer de manière agaçante d'utiliser la mise en cache du navigateur pour certaines ressources tierces. Voici une capture d'écran:
Pour résoudre ce problème, j'ai dû corriger les scripts réseaux sociaux en remplaçant les compteurs par des images statiques hébergées sur un CDN. Au lieu de scripts tiers qui tentaient d'accéder aux données de Twitter, Facebook ou Google Plus pour compter les abonnés, un compteur hors ligne a été installé, ce qui a aidé à résoudre ce problème.
Plus ennuyeux, en plus des problèmes avec les scripts de médias sociaux, le code de Google Analytics ralentissait le site Web.
Résoudre le problème avec le script Google Analytics est une tâche assez ardue. Comme Analytics était nécessaire et qu'il ne peut pas être supprimé du site, nous avons dû chercher d'autres solutions.
Google modifie son code Analytics assez rarement, une ou deux fois par an. Par conséquent, Razvan a créé un script spécial qui vérifie les dernières mises à jour du code Analytics toutes les huit heures et les télécharge lorsque des mises à jour sont trouvées. De cette façon, vous pouvez héberger le code JavaScript Analytics sur le serveur, éliminant ainsi le besoin de le télécharger à partir des serveurs de Google à chaque visite.
En l'absence de mises à jour, le code Analytics sera chargé de la version mise en cache vers le CDN.
Et lorsque Google met à jour le code JavaScript, le serveur télécharge automatiquement la nouvelle version et la met à jour sur le CDN. Ce script a été utilisé pour tous les scripts tiers externes.
Voici une capture d'écran de Pingdom Tools montrant tous les téléchargements à partir du CDN, y compris le code Google Analytics. Le seul fichier téléchargé à partir du serveur est le fichier de la page d'accueil, qui ne fait que 15,5 Ko. L'élimination de tous les scripts tiers a considérablement amélioré la vitesse de chargement globale.
Étape # 4: supprimer les codes de blocage
La suppression des bloqueurs est également une étape assez difficile dans le processus d'augmentation de la vitesse de chargement des pages, nécessitant de bonnes connaissances techniques. Le principal problème qui a dû être résolu était la révision de tout le code JavaScript du haut depuis le "header" et le "body" jusqu'au "footer" situé en bas sur toutes les pages du site.
Si votre site est Wordpress, le plugin Autopmize vous aidera probablement dans cette tâche. Vérifiez vos paramètres puis dans
décochez Force JavaScript et réglez-le sur Inline all CSS.Étape n ° 5: activer la compression
Étape # 6: Optimisez votre format mobile
L'analyse du format mobile montre l'adaptabilité de la version mobile du site à différents types de résolution, l'utilisation de polices adaptées et la présence d'un bon système de navigation.
DE en utilisant google Chrome, vous pouvez voir à quoi ressemble votre site dans différentes versions mobiles. Pour ce faire, cliquez sur l'icône de menu (hamburger) paramètres et commandes du navigateur dans le coin supérieur droit, puis sélectionnez «Plus d'outils → Outils de développement». Dans la barre d'outils, sélectionnez l'icône du périphérique mobile. C'est tout, voyez:
Dans le cas de l'exemple, aucun changement radical n'a été nécessaire.
Conclusion
En conséquence, les 6 étapes les plus importantes ont été franchies pour obtenir un score idéal de 100/100 dans Google PageSpeed \u200b\u200bTools pour Monitor Backlinks. En conséquence, non seulement la page principale a été optimisée, mais également toutes les pages internes.
Parmi toutes les actions menées pour optimiser le site, trois des plus importantes peuvent être distinguées:
- Utilisation de CDN.
- Élimination des codes de blocage. (Évitez JavaScript dans le corps du codage, mieux vaut le déplacer vers le bas des fichiers.)
- Optimisation des tailles et compression des images.
Je tiens à vous rappeler une fois de plus que Google PageSpeed \u200b\u200bTools n'est qu'un outil auxiliaire pour l'optimisation des ressources. Les outils sont conçus pour réduire le temps entre une demande (cliquer sur un lien) et une réponse de la page du site (affichage des premiers éléments de la page) afin que les visiteurs ne quittent pas le site sans attendre son chargement. En outre, les recommandations fournies par l'outil doivent être appliquées avec précaution, afin que les utilisateurs ne voient pas une mise en page réduite ou un ensemble de blocs sans style.
Remarque. Le chargement rapide des pages du site affecte indirectement le classement de la ressource dans les moteurs de recherche, c'est-à-dire: une vitesse de chargement plus élevée → des visites de plus en plus longues → un classement plus élevé.
Si vous avez utilisé l'outil Google PageSpeed \u200b\u200bInsights pour optimiser votre site, veuillez partager vos progrès dans les commentaires.
N'oubliez pas non plus que les spécialistes de l'UAWEB sont toujours prêts à fournir l'assistance nécessaire dans la création, l'optimisation et la promotion de votre ressource Web, afin que chaque seconde passée par les utilisateurs sur votre site vous apporte des avantages!
Module Google PageSpeed \u200b\u200bpour un site Web: ce qu'il peut et comment l'utiliser
Nous avons décidé d'expérimenter et d'ajouter un accélérateur de Google à trois projets. Ce qui en est sorti - nous le découvrons.
Les sites Web devraient se charger instantanément. Oh non, les sites ne doivent rien à personne? Montez dans le trolleybus et asseyez-vous à côté de l'étudiant assis avec un iPhone. Voyez s'il est prêt à attendre le chargement d'une boutique en ligne. Disons simplement: trois secondes - et l'onglet est fermé. Le résultat suivant des résultats de la recherche est utilisé.
Au fait, sur les résultats de la recherche. La vitesse de chargement du site affecte le classement des moteurs de recherche. Preuves et. Les sites qui ralentissent sont moins fréquemment visités par les robots, ce qui signifie qu'ils sont moins fréquemment indexés. La place dans les résultats de recherche et la commodité de trouver les informations nécessaires en souffrent.
Pensez constamment à savoir si votre page se chargera plus lentement sur un smartphone que sur un PC. Et si tel est le cas, nous le déclasserons probablement dans le SERP.
- Matt Cutts, Google
Google a travaillé dur et a publié son propre outil de test de vitesse - PageSpeed. Il est facile de trouver des éléments qui ralentissent le chargement - allez ici et dans le seul champ, nous indiquons l'adresse que vous souhaitez tester. Un rapport de performance détaillé sera prêt dans une minute. Le résultat sera affiché dans les perroquets. Idéalement, il y en a une centaine, mais essayez de l'obtenir! Même Google lui-même ne peut pas faire cela: vérifiez ses services :)
Des tests sont effectués à la fois pour les versions desktop et mobile du site. Il est préférable de naviguer par l'échelle de couleurs: la zone jaune indiquera qu'il y a des éléments qui méritent d'être optimisés, la verte vous informera que tout va bien. Si le site est dans la zone rouge, accélérez et optimisez. Sinon, il y a un abîme devant: pendant le chargement de la page, l'utilisateur ira déjà sur un autre site :)
Il existe deux façons d'optimiser votre site.
Optimisation manuelle
1. Compressez les images avec Photoshop ou exécutez-les Optimizilla , par exemple
Moins les images pèsent, plus il y a de chacals, plus le site se charge rapidement. Nous faisons de la compression, cachons des photos multi-mégapixels sous le chat. Assez de prévisualisations 640 × 480. Plus l'image est petite, plus le site est rapide.
Même sur la page d'accueil de Google Developers, les graphiques peuvent être compressés à 71%.
2. Nous connectons les polices à partir du site lui-même, plutôt que de les extraire de Googlephones
Moins - jusqu'à ce que le navigateur ait chargé la police, l'utilisateur verra l'ennuyeux Arial ou Tahoma.
3. Utilisation maximale du cache du navigateur
Lorsque le site a déjà été partiellement sauvegardé par le client, le chargement sera beaucoup plus rapide.
4. Réduisez JavaScript et CSS
Les scripts ne sont pas modifiés tous les jours après leur publication - il est inutile de les compresser à la volée. Arrêtez l'optimisation une fois après les changements de code. Les modèles JS sont mieux gérés sur le serveur, incorporent les résultats au format HTML et utilisent les modèles sur le client après le téléchargement.
5. Réduire le HTML
En pratique - suppression des espaces supplémentaires, des tabulations, des sauts de ligne.
6. Supprimer le code inutilisé
Vous pouvez utiliser l'audit "Chrome" intégré. Appuyez sur F12 et accédez à l'onglet Audits. Il y a un seul bouton Exécuter en bas. Fait essentiellement la même chose que PageSpeed. Uniquement en temps réel.
Optimisation automatique
Tout site se compose d'éléments dynamiques et statiques. Les éléments dynamiques sont du HTML lui-même, dérivé du travail php et des requêtes de base de données. Le reste est statique. Ce sont des images, du JavaScript et du CSS.
L'optimisation automatique d'un site peut être effectuée avec une chose intéressante de Google - PageSpeed \u200b\u200bInsights. Ce module est installé sur le serveur nginx et, après paramétrage, se compresse en temps réel infos dofiga , y compris graphique.
PageSpeed \u200b\u200bInsights peut analyser le HTML et optimiser les ressources. Pincez, en bref. DANS code source les ressources seront situées d'une manière différente, pas en fonction de ce que le développeur a demandé pour compresser la photo Cela vaut la peine d'être considéré. Mais l'affichage des ressources ne changera pas. Le poids diminuera. Cela signifie que la vitesse de chargement de la page augmentera et que les visiteurs seront plus satisfaits :)
Cependant, PageSpeed \u200b\u200bInsights a des limites. Il ne peut être installé que sur nginx fonctionnant sur ou sur un serveur virtuel. Non, un serveur partagé loué quelque part en Allemagne ne fonctionnera pas.
La deuxième limitation a à voir avec la guerre éternelle des navigateurs. Les images compressées par PageSpeed \u200b\u200bsont converties au format .webp, que seul Chrome comprend (cette chose ne fonctionnera pas sur Internet Explorer 6, très apprécié). DANS dernières versions Opera a également appris à afficher de telles images. Parce que le moteur a changé.
Exemples d'utilisation de PageSpeed \u200b\u200bInsights
Nous avons installé le module PageSpeed \u200b\u200bInsights sur trois projets - sur notre nouveau site et sur deux projets clients. Le module voit de quel navigateur provient la requête, cherche à voir s'il est entraîné pour afficher le format webp et donne soit une image optimisée, soit un jpeg normal.
La mise en place de Sibiriks a pris environ une demi-journée. Il fallait faire quelque chose de manière empirique: ils l'ont changé, ils ont observé ce qui se passait. Parfois, la zone était verte, mais il pouvait être complètement imprévisible de voler en jaune.
Les deux versions sont maintenant dans la zone verte. Cela signifie qu'il n'y aura aucun problème de vitesse. Si la vitesse de connexion est bonne, pas un peu EDGE :)
Dans le cadre du support technique de la boutique en ligne de l'usine Vitra, nous avons décidé d'expérimenter et d'installer le module PageSpeed \u200b\u200bInsights dessus:
Récemment, Google a sérieusement pris «l'accélération» d'Internet. Aujourd'hui, la société est impliquée dans presque tous les développements visant à optimiser les ressources Web, si vous avez oublié, je vous le rappellerai: création de CDN, manifestes CSS, développement de plate-forme javascript, DNS public et bien plus encore. Aujourd'hui, nous allons parler du nouveau service Google PageSpeed, qui vous permet d'optimiser les données et de les charger beaucoup plus rapidement.
Qu'est-ce que le service PageSpeed?
Le principe de fonctionnement du nouveau service est d'une simplicité scandaleuse. Une fois que vous avez configuré votre site pour qu'il fonctionne avec le service, le robot de recherche Google intercepte toutes les données de votre serveur, optimise le contenu et stocke le cache sur son serveur. Lorsqu'un utilisateur accède à une page de votre site, Google remplace vos données par celles stockées sur ses serveurs, ce qui accélère le chargement des pages.
Exigences de PageSpeed?
Vous devez savoir certaines choses avant d'utiliser un nouveau service. PageSpeed.
1. À l'heure actuelle, le service ne prend pas en charge le travail avec les domaines "nus", le préfixe www doit être présent dans le domaine du site. Autrement dit, http://example.com ne fonctionnera pas avec le nouveau service, mais http://www.example.com démarrera sans problème. Peut-être que dans un proche avenir, ce défaut sera corrigé.
2. Vous devez avoir un accès complet au panneau de configuration du nom de domaine. Pour que PageSpeed \u200b\u200bfonctionne, vous devez modifier l'enregistrement CNAME. Si vous avez enregistré un domaine auprès d'un hébergeur, vous devrez le contacter afin que le support technique modifie les enregistrements CNAME pour vous.
Configurer un site pour qu'il fonctionne avec PageSpeed
1. Tout d'abord, allez à et cliquez sur le bouton d'enregistrement.
Puisque PageSpeed \u200b\u200best actuellement en cours de «rodage», il est possible d'être parmi les testeurs uniquement sur invitation. Après votre inscription, vous devrez attendre un moment pendant que les spécialistes Google traitent votre demande. Selon l'heure de la journée et la qualité de votre site, l'attente peut prendre une heure ou plus.
2. Une fois l'invitation envoyée, cliquez sur le bouton en surbrillance dans la barre latérale - Service de vitesse de page.
Il peut y avoir un léger hic à ce stade. Si vous n'avez pas encore ajouté votre site au panneau Google Webmaster, le moment est venu de le faire. Le système suggérera un tel scénario.
Après avoir ajouté le site à la section pour les webmasters, vous devez modifier les enregistrements pour le domaine, à savoir, définir l'adresse CNAME correcte, par laquelle le service vous vérifiera et créera des pages de cache.
4. Les modifications de la valeur CNAME sont effectuées via le panneau de domaine du bureau d'enregistrement. Pour accéder aux paramètres du registraire NameCheap, vous devez accéder à l'enregistrement de tous les hôtes, puis suivre le chemin de gestion des hôtes. International Registrar GoDaddy stocke CNAME dans DNS Manager. Dans l'ensemble, les panneaux de contrôle de domaine pour tous les bureaux d'enregistrement ont le même principe, et par conséquent, en vous concentrant sur l'exemple ci-dessous, vous pouvez le comprendre.
Presque toujours, l'enregistrement d'adresse IP et l'enregistrement d'alias de messagerie sont identiques.
Lorsque vous accédez à votre tableau de bord des enregistrements CNAME, vous verrez un formulaire similaire:
Que faut-il changer?
Nous laissons l'enregistrement avec le courrier "@" inchangé, mais dans la ligne de l'adresse IP, changez la valeur numérique en pagespeed.googlehosted.com. Dans certains cas, vous devrez ajouter un point (sans guillemets) à la fin du nom de domaine: "pagespeed.googlehosted.com.".
En outre, dans le champ Type d'enregistrement, vous devez sélectionner la valeur d'alias CNAME. Après avoir effectué les ajustements, enregistrez le formulaire en cliquant sur le bouton approprié.
C'est terminé. Vous devrez maintenant attendre environ une journée pour que le DNS du domaine change dans tous les navigateurs. Si vous ne parvenez pas à trouver par vous-même comment changer le DNS d'un domaine, écrivez au support technique du registraire, il vous aidera certainement.
Étant donné qu'à l'heure actuelle, Page Speed \u200b\u200bne prend pas en charge le travail avec des domaines nus comme (http://example.com), pour fonctionner, vous devrez rediriger vers un domaine avec un préfixe, c'est-à-dire vers http://www.example.com. C'est très simple de le faire sur les serveurs Apache. Il suffit d'ajouter l'entrée suivante au fichier principal (dans le dossier racine du site) .htaccess:
RewriteEngine On RewriteCond% (HTTP_HOST) ^ example.com RewriteRule (. *) Http://www.example.com/$1
N'oubliez pas de remplacer "example.com" par le nom de domaine de votre site Web.
Avantages de l'utilisation de la vitesse de page
Vous pouvez vérifier l'augmentation de la vitesse de chargement des pages à l'aide des fonctionnalités standard de l'API Google. Une fois tous les paramètres définis et le DNS mis à jour, cliquez sur le bouton "Exécuter le test de vitesse".
Le système vous dirigera automatiquement vers une page où l'application vous montrera les résultats. En moyenne, la vitesse de chargement augmente de 24% et la vitesse d'indexation du contenu augmente de 40%. À propos, le temps consacré aux téléchargements peut être légèrement réduit en configurant la mise en cache des images.
