Stocker tous les JS/CSS en PHP?

Question

Contexte: Je travaille sur une application web d'une seule page qui charge tout via AJAX et qui a donc commencé à apprendre php il y a quelques jours. J'ai immédiatement pensé à tout mettre (html, css, javascript) dans les fichiers php afin qu'il n'y ait qu'un seul fichier html et une seule requête sprite. Par exemple, javascript externe pourrait être stocké dans:

main.js.php (en ajoutant les .js à des fins d'organisation uniquement) qui ressemblerait à ceci:

<script> 
... 
</script> 

ou

<style> 
... 
</style> 

Question: Est-ce que stocker tout dans php serait une mauvaise idée? J'ai OCD et aime avoir des fonctions connexes dans des fichiers séparés (et en fait, des dossiers aussi), alors disons simplement que mon projet utilise 100+ inclus. Ceux-ci ne sont chargés qu'une seule fois, lorsque l'utilisateur visite (site AJAX). Je veux réduire le nombre de requêtes Http à seulement 1 html et 1 sprite (mon application utilise une police personnalisée pour les images en fait). Mon application sera également exécutée sur des appareils mobiles (en utilisant un design différent, en utilisant beaucoup moins d'inclusions mais une méthode similaire).

recherche: Voici ce que je sais:

• Vous pouvez avoir Apache gérer js/css php, mais n'est pas quelque chose que je suis intéressé (dangereux) - link
• Ce site a moi l'idée, bien que je ne comprends pas tout à fait - 3 Ways to Compress CSS
• caching avec quelque chose comme APC (ne sais pas comment cela fonctionne, mais hors de la portée de cette question) améliorerait la vitesse php

(?)

Answer 1

quelques points à considérer:

1. Code - rapport texte:

vos pages de contenu sont lus par google. Lorsque Google classe vos pages, l'un des paramètres est le rapport entre le code et le contenu textuel. Si vous mettez votre code css/js avec le contenu, vous réduisez le ratio. (btw, un des arguments pour utiliser divs au lieu de tables est que les tables prendront normalement plus de code html et baisseront le ratio).

EDIT: c'est une théorie et un fait pas vraiment connu. Il est important que le code html soit syntaxiquement correct, il sera donc plus facile à analyser par les analyseurs des moteurs de recherche. certains disent que google ignore le contenu qui vient après les 100 premiers kb, donc c'est aussi quelque chose à considérer.

2. Nginx

j'ai nginx installé avec apache comme proxy inversé pour gérer php.

nginx est un serveur http, qui sait comment gérer les pages statiques. La conception d'apache est le thread par client, tandis que nginx utilise le modèle de réacteur, ce qui signifie que nginx peut gérer beaucoup plus de trafic qu'apache en tant que serveur web (environ 50 fois le nombre de requêtes). L'inconvénient est que nginx ne gère pas les requêtes php, et pour cela l'apache est installé aussi - nginx enverra tous les appels php à l'apache, donc il les traitera et retournera la réponse à nginx, et de retour au client. Si dans cette configuration (ce qui est assez courant) vous mettrez les fichiers css/js sous javascript, vous perdrez l'avantage du nginx, qui, au lieu de manipuler les fichiers statiques js/css seul, enverra eux à l'apache comme il va les traiter comme des pages php.

3. cache

fichiers de mise en cache est l'un des mécanismes les plus communs pour améliorer les performances de votre site, tout en réduisant le trafic. Si vous mélangez du contenu statique avec du contenu dynamique, vous perdrez l'avantage de la mise en cache des fichiers statiques. Lorsque vous travaillez dans un environnement Web, il est préférable (en habbit) de conserver autant de contenu statique que vous pouvez séparer du contenu dynamique. Cela vous donnera les meilleurs résultats lors de la mise en cache des données statiques.

bien sûr, il n'y a pas de règles pour ce qui devrait et ce qui ne devrait pas. J'ai beaucoup de contenu js dynamique, mais les fonctions principales sont normalement extraites dans des fichiers statiques.

4. sprites CSS

sprites css (comme @Muu mentionné) sont une grande amélioration de la performance et devraient être adoptées définitivement.

une autre recommandation plus spécifique à votre cas - si vous voulez que votre contenu soit indexé correctement - puisque vous avez mentionné que la plupart des données seront chargées en utilisant ajax, je vous recommande de l'avoir aussi sans ajax. par exemple: www.domain.com/ aura un lien vers #contact, qui montrera le formulaire (chargé en utilisant ajax). vous devriez aussi avoir www.domain.com/contact pour l'indexation. assurez-vous également que si un utilisateur entre sur www.domain.com/#contact - il sera redirigé vers la page de contact (ou le contenu sera chargé dynamiquement).

Utilisez les outils de développement Web des navigateurs pour voir quelles demandes sont faites et voir où vous pouvez réduire le nombre de demandes, et aussi prêter attention à la taille des fichiers, voir quels fichiers sont mis en cache et demandés par le serveur. définir les attributs du cache dans votre configuration du serveur et htaccess.

espoir qui aide;)

PS: Une autre astuce - si vous obtenez l'eau renversée sur tout votre clavier - ne pas essayer de le sécher avec un sèche-cheveux - il pourrait fondre vos clés ...

Answer 2

Alors que la réduction du nombre de requêtes HTTP est une bonne chose, elle a aussi des problèmes. Si vous combinez CSS et Javascript dans le fichier HTML, vous augmentez la taille de la page. Vous empêchez également le navigateur de mettre en cache les fichiers CSS et Javascript, de sorte que ces ressources sont téléchargées encore et encore, au lieu d'une seule fois.

De plus, la diffusion de fichiers statiques est beaucoup plus rapide que le service via PHP. PHP est lente.

La combinaison de toutes les images est cependant une excellente idée. C'est ce que Google utilise: http://www.google.co.uk/images/nav_logo91.png

Dans l'ensemble, je dis ne vous dérange pas. Gardez CSS et Javascript séparés, combinez les images si possible et - oui - utilisez certainement APC si vous le pouvez. Rappelez-vous cependant - n'optimisez pas votre site prématurément. Obtenez d'abord le contenu, développez les fonctionnalités, etc. Rendre votre site rapide peut se faire au détriment de la maintenabilité réduite - je le sais par expérience.

Answer 3

Je garderais CSS et JS hors du PHP à moins qu'il ne soit généré dynamiquement. Les pages statiques sont généralement plus rapides et plus faciles à utiliser par le serveur Web. La séparation des fichiers permet également au navigateur client de mettre en cache certaines données utilisées de manière répétée (par exemple, le fichier CSS).

Néanmoins, assurez-vous d'utiliser la compression sur les fichiers individuels. Quelques liens utiles dans le Google "Page Speed" documentation.

En outre, la mise en cache du bytecode améliore la vitesse. Ne doit pas compiler à chaque fois.