web-dev-qa-db-fra.com

Comment contrôler l'ordre de la combinaison de styles et de scripts mis en file d'attente - problème de vitesse du site

Nous savons que, en utilisant wp_head() et wp_footer(), tous les scripts et styles sont mis en file d'attente à l'aide de wp_enqueue_styles et wp_enqueue_scripts hook. Ce que nous faisons est de mettre en file d'attente nos feuilles de style et nos scripts en utilisant functions.php. De même, les plugins WordPress placent également leurs feuilles de style et leurs scripts en utilisant la même méthode.

Donc, à la fin, il y a beaucoup de styles et de scripts en file d'attente dans l'en-tête ou le pied de page. Ce que recommande Google PageSpeed:

Optimiser l'ordre des styles et des scripts - Google PageSpeed

Nous savons que wp_enqueue_script() et wp_enqueue_style() offrent un paramètre $deps, dans lequel nous pouvons définir la profondeur ou la priorité du script ou de la feuille de style. Mais cela n'affecte que les scripts et les styles, pas les deux. Donc, avec une charge combinée de scripts et de feuilles de style du thème, et/ou du thème enfant, et/ou des plugins, et/ou de l'API tierce, etc. s'améliore avec la qualité d'un site web?
Ou, sont-ils à l'épreuve des balles pour faire écho les styles en premier, que les scripts?

wp-enqueue-scriptwp-enqueue-styleperformance
2
Mayeenul Islam

J'essaierai de répondre au mieux à cette question étant donné qu'il n'y a pas de méthode pare-balles.

Il appartient au développeur de vraiment planifier la manière dont le DOM est peint. WordPress ne peut pas deviner ce que va faire un thème, un plugin ou un utilisateur, il peut simplement fournir des conseils et des outils de base. Le problème est bien sûr que lorsque de nombreux plugins sont ajoutés à un site, vous pouvez avoir un désordre sur vos mains. C’est ce qui distingue une structure de site bien conçue d’une structure cliquée à la hâte.

Le $deps ne définit pas vraiment la priorité, il fournit uniquement un contexte de dépendance. En réalité, vous pouvez définir une priorité dans le crochet d’action à l’aide du paramètre $priority. Il n'y a rien de mal à utiliser plusieurs wp_enqueue_scripts avec différents paramètres $priority.

Quelques pointeurs.

  • Mettez en place une structure de chargement pour vos fichiers css/js, écrivez-la, analysez-la à l'aide des outils de développement, Firebug, etc., pour voir comment la page est peinte.
  • Utilisez l'action wp_enqueue_scripts pour wp_enqueue_style
  • Utilisez $priority et $in_footer pour vos actions
  • Si possible, chargez javascript de manière javascript, et chargez aussi peu de javascript que nécessaire.
  • Cache tout

Exemple d’inspection du chargement de la trame dans les outils de développement, le survol de ces détails donne plus d’informations sur la pile d’appels. enter image description here

2
Wyck