web-dev-qa-db-fra.com

Google n'arrive pas à télécharger CSS et JS à partir de CDN CloudFront

Nous avons constaté de nombreuses erreurs liées à la "convivialité mobile" dans la console de recherche. Lorsque j'ai cliqué dessus et choisi l'option "Vérifier la version en direct", la page était toujours compatible avec les appareils mobiles. Cependant, les erreurs d'utilisation sur le mobile n'ont pas disparu de la console de recherche.

Nous avons poursuivi les tests et une ou deux fois, nous avons eu une erreur "Problèmes de chargement de page" en plus du "Test de convivialité mobile" et la page a été rendue avec du contenu texte et des images, mais CSS n'a pas été chargé.

Il s'avère que Google Bot n'arrive pas à télécharger CSS de la distribution CloudFront. Cela provoque des erreurs "Mobile d'utilisabilité" dans la console de recherche et potentiellement une pénalité de recherche.

Nous avons un site Web statique hébergé sur S3/CloudFront. Les documents CSS et HTML sont sur la même distribution. Nous avons HTTP/2 activé et je m'attends à ce que CSS soit servi via la même connexion que HTML. Cependant, cela n'arrive pas de temps en temps et le téléchargement de CSS échoue. Les erreurs se produisent rarement, mais elles affectent le classement de notre site Web.

CSS et JS ne sont pas dans le fichier robots.txt

Nous n'avons AUCUNE restriction de géolocalisation.

AUCUNE erreur ne provient de Googlebot dans les journaux CloudFront. Je ne vois que les demandes réussies de Googlebot. Il y a des erreurs d'autres utilisateurs, donc les journaux semblent fonctionner correctement.

La stratégie de protocole de la visionneuse est définie sur Rediriger HTTP vers HTTPS.

Les liens vers CSS sont relatifs et ressemblent à ceci: https://www.visualwatermark.com/css/all-24c79a5ab7f0103302353199ecf9f1cf.css

La distribution CloudFront en question est https://www.visualwatermark.com/

Avez-vous des idées sur ce qui peut être changé pour que Google Bot puisse toujours télécharger du CSS à partir de CDN CloudFront?

2
Ivan Nikitin

Copiez le code CSS utilisé dans la page et placez-le en ligne dans une balise de style sur la page.

Cela force le css, et il n'y a pas d'impact sur les performances, et dans certains cas, il s'exécutera plus rapidement car il n'y a pas de routine de requête pour une page css.

De plus, les polices doivent être les polices standard ou installées localement, mais je préfère utiliser les polices standard choisies par le navigateur au lieu de les charger.

2
drtechno