Le portefeuille Tumblr est très lent

Question

Tout d'abord, je ne suis à aucun moment un dev; Je ferai de mon mieux pour me faire comprendre.

Je me suis créé (il y a longtemps maintenant) un portfolio, en utilisant la plateforme tumblr. C'est peut-être la plus grande palette, je sais, mais je l'aime ainsi et je veux la conserver, car il m'est facile de la mettre à jour.

J'ai du mal en ce moment, car depuis 1 ou 2 mois, ma page est extrêmement lente à se charger. Cela peut prendre de 5 à 30 secondes! Je pense qu'il y a un problème d'optimisation, car même s'il affiche une vidéo Youtube (cela peut affecter la vitesse), la lecture de la vidéo commence (vous pouvez entendre le son) avant que le chargement de la page ne soit terminé (ce qui rend la vidéo plus une chose ennuyeuse qu'une fonctionnalité intéressante)

vous pouvez vérifier par vous-même: https://greatorex.fr

J'ai utilisé l'inspecteur dans Firefox pour voir ce qui se passe lors du chargement. il y a quelques erreurs, mais je ne sais pas comment les interpréter.

La ressource à l’adresse « https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)

Lors du chargement, je peux voir en bas à gauche de Firefox qu'il reste longtemps sur cette ressource. J'ai changé la police utilisée, mais cela n'affecte pas cette étape.

Content Security Policy: Les paramètres de la page ont empêché le chargement d’une ressource à inline (« script-src »). Un rapport CSP est en cours d’envoi.

(désolé pour le français, je ne peux pas traduire ça)

J'ai fait quelques petites modifications dans le code source du modèle, mais juste du HTML et (un tout petit peu) de la modification css, donc je ne sais pas pourquoi cela affectera le chargement de la page.

Merci pour votre contribution, je serai très reconnaissant.

Bonne journée.

Answer 1

J'ai utilisé l'inspecteur dans Firefox pour voir ce qui se passe lors du chargement. il y a quelques erreurs, mais je ne sais pas comment les interpréter.

La ressource à l'adresse « https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic »A été bloquée en raison d'un type MIME (« text / html ») incorrect (X-Content-Type-Options: nosniff)

Politique de sécurité du contenu: Les paramètres de la page ont empêché le chargement d'une ressource à inline («script-src»). Un rapport CSP est en cours d'envoi.

Vous pouvez ignorer complètement les erreurs ci-dessus, celles-ci n'affectent pas la vitesse de chargement de la page:

• La politique de sécurité du contenu ne fait rien telle qu'elle est publiée par la plateforme tumblr en mode rapport uniquement
• fonts.googleapis.com (X-Content-Type-Options: nosniff) erreur en commun expliquée ici . Quoi qu'il en soit, vous ne pouvez pas interférer avec le serveur de polices de Google, vérifiez simplement que la police existe là-bas.

À première vue, vous avez surchargé la page avec des images GIF animées (GIFV de https://64.media.tumblr.com/....gifv) ou quelque chose comme ça, voir le test de Google . Lorsque vous utilisez <img src='animated.GIF'>, le navigateur n'affiche pas la page jusqu'à ce qu'il charge complètement toutes ces images.
Il est recommandé de convertir une telle animation au format vidéo et d'utiliser la balise place de <img>.
<video>La balise commence à afficher le contenu à la fois, tandis qu'une partie restante de la vidéo se charge.

Vous pouvez vérifier quels éléments ralentissent le chargement, vous pouvez utiliser certains services tiers, puis prendre une décision sur comment et quoi optimiser:

1. https://developers.google.com/speed/pagespeed/insights/ - le service mesure non seulement la vitesse de chargement des pages à partir d'ordinateurs et d'appareils mobiles, mais donne également des recommandations détaillées pour accélérer le site, en soulignant les faiblesses.

2. https://www.pingdom.com/ - outil puissant, payant, mais il existe une version d'essai pendant 14 jours

3. https://developers.google.com/web/tools/chrome-devtools#network et https://developers.google.com/web/tools/chrome-devtools#performance(puisque vous connaissez déjà la console des développeurs Firefox, bienvenue dans celle de Google) - vous pouvez mesurer rapidement la vitesse de téléchargement directement dans le navigateur Google Chrome. Appuyez simplement sur la touche F12, allez dans l'onglet Réseau et actualisez la page.

4. https://www.dareboost.com/fr - analyse de nombreux paramètres et donne des recommandations pratiques

5. https://tools.keycdn.com/speed - montre combien de demandes ont été faites pendant le chargement de la page et quelle taille chacune d'elles a.

6. https://performance.sucuri.net/- le test mesure le temps nécessaire pour se connecter à un site Web ou à une page. Ce qui est important, c'est le "temps jusqu'au premier octet", qui nous donne des informations sur le temps qu'il a fallu pour que le contenu soit envoyé à votre navigateur pour démarrer avec la page

7. https://www.site24x7.com/ - Affiche un résumé des graphiques avec ventilation du contenu par requête et ventilation du contenu par taille.

Un outil supplémentaire pour vérifier l'accessibilité de la page:

• https://gtmetrix.com/ - vous pouvez sélectionner la région du serveur pour vérifier la vitesse de chargement de la page dans différentes parties de la planète

• https://www.dotcom-tools.com/website-speed-test.aspx - vérifiera la vitesse de votre site Web dans de vrais navigateurs à partir de 25 emplacements à travers le monde.

• https://www.webpagetest.org/ - charge la page deux fois, vous permettant ainsi de tester la mise en cache