L'exprimer

Inclure JavaScript au bas du document HTML

Si vous n'avez pas document.write (ou n'importe quelle autre génération dynamique de contenu de la page en utilisant javascripts) pour insérer une partie du contenu de la page dans vos scripts, déplacez le script include au bas de la page, avant la fin de la balise BODY.
La spécification HTTP/1.1 suggère que les navigateurs de télécharger plus de deux composants en parallèle par le nom d'hôte. Si vous servez vos images à partir de noms d'hôtes multiples, vous pouvez obtenir plus de deux téléchargements de se produire en parallèle. Alors que le téléchargement est un script, cependant, le navigateur ne démarre pas tout télécharger d'autres fichiers, même les noms de domaines différents.
Il ya aussi des façons de créer dynamiquement des nœuds de script et charger des scripts à distance après la page est chargée en utilisant AJAX.

Externaliser vous JavaScript

Utilisation des fichiers JavaScript externes se traduira par un chargement plus rapide des pages, parce que les fichiers JavaScript sont mis en cache par le navigateur. «Inline JavaScript dans les documents HTML se téléchargées à chaque fois le document HTML est demandée. Cela pourrait effectivement réduire le nombre de requêtes HTTP faites, mais il augmente par la suite la taille du document HTML. JavaScript externe sont mis en cache par le navigateur, la taille du document HTML est réduite sans pour autant augmenter le nombre de requêtes HTTP.
S'il vous plaît noter que, si les utilisateurs sur votre site ont une vue de plusieurs pages par session et nombre de vos pages réutiliser les mêmes scripts et feuilles de style, il ya un plus grand bénéfice potentiel de mise en cache des fichiers externes.

Emballez vos fichiers JavaScript

En cas de JavaScripts, contrairement à CSS, les fichiers peuvent croquer à l'aide des algorithmes classiques qui donnent une taille de fichier réduite que de simplement la suppression des espaces ou des tabulations. Un exemple de javascript emballeur peuvent être trouvés ici http://dean.edwards.name/packer/

Débarrassez-vous de tous les scripts en double

Il est très rare que les scripts entiers peuvent être dupliquées, mais un examen des dix premiers sites web américains montre que deux d'entre eux contiennent un script en double. Dupliquer des scripts, mais réduit évidemment la performance par la création de requêtes HTTP inutiles et le gaspillage d'exécution JavaScript.
En outre, dans de nombreux cas, bien que les noms des scripts sont différents, il ya un risque de scripts en double dans la même page en raison de la taille des équipes et le nombre de scripts.

Réduire l'accès aux éléments DOM lorsque cela est possible

Accès aux éléments DOM avec JavaScript est lente de sorte afin d'avoir une page plus réactive, vous devez:
Références à des éléments • Cache accessibles
• Les nœuds de mise à jour "hors ligne", puis les ajouter à l'arbre
• Évitez de fixer mise en page avec JavaScript

Comportement séparée du contenu et de présentation

Tout comme nous Présentation séparée (CSS / XSLT) à partir de contenu (XHTML / XML), nous devrions également séparer le comportement (Javascript). C'est ce qu'on appelle Javascript discret. Tout comme nous lier à des fichiers CSS externes, nous devrions créer un lien vers des fichiers externes javascript.

Au lieu de codage du comportement dur dans le contenu (par exemple onmouseover, onclick, etc), le comportement devrait être dynamiquement ajouté à des éléments, des classes, et les éléments uniques (ID) en utilisant le DOM. Le document de base, le contenu, ne doit contenir que valide XHTML / XML et pas javascript.
Javascript doit augmenter le contenu en ajoutant des comportements. Le contenu doit rester utile et utilisable sans javascript (ou sans javascript plein appui).

J'ai sauvé ce âges article en arrière, de sorte Désolé! Je ne me souviens de la source ... mais il a semblé utile, pour nous qui devons être conscients sur le public pour qui nous développons le site pour ... alors voici i est

Poids de la page peut être utilisée pour déterminer le temps de téléchargement pour une page donnée sur une variété de vitesses de connexion Internet. A titre d'exemple, le tableau suivant montre les temps de téléchargement pour trois pages différentes à un certain nombre de vitesses de connexion populaires.

Les avantages de la réduction de poids de page?

L'impact positif de la réduction des prestations poids de page propriétaires de sites Web et les consommateurs. Les avantages potentiels comprennent:

1. Le chargement des pages plus rapide. L'impact le plus évident de réduire le poids page est que les pages de votre site Web se chargent plus rapidement pour les visiteurs, quel que soit leur vitesse de connexion.
2. En réduisant les temps de chargement des pages de créer plus de visiteurs confortables. Les visiteurs sont moins susceptibles de devenir frustrés et aller voir ailleurs si vos pages se chargent rapidement. D'autre part, la lenteur de chargement des pages sont un des moyens les plus sûrs de perdre des visiteurs et des clients potentiels.
3. Plus rapides de charge-temps sera de contribuer à la conversion a augmenté. Plus les visiteurs resteront plus longtemps sur votre site. Plus d'entre eux finira par faire des achats, vous inscrire à votre newsletter, ou un livre de marquage de votre site.
4. Votre perception de la marque sera renforcée. Clients du scrutin et pour la première fois les visiteurs seront plus enclins à décrire votre site (et d'affaires) en tant que «professionnel» si vos pages se chargent rapidement.
5. Pages avec du code propre et solide sera souvent indexés de manière plus efficace par les moteurs de recherche naturels.
6. Pages optimisées pour le poids peut effectivement économiser les frais de bande passante sur les sites à fort trafic. 100.000 pages chacun pesant 150 Ko nécessiteront un débit deux fois plus de votre FAI de 100.000 pages chaque poids de 75 Kb. Pour les FAI qui font payer pour la bande passante utilisée ou pour les dépassements, cette réduction peut entraîner des économies importantes sur les frais de bande passante.

Considérons les données suivantes, publiées dans un rapport

Mettez les feuilles de style au sommet

Si vous voulez une page à charger progressivement; qui est, nous voulons que le navigateur pour afficher n'importe quel contenu elle a le plus tôt possible, mettre le CSS dans le haut de la page à l'intérieur du HEAD du document. Cela rend les pages semblent être plus rapide le chargement, ce qui facilite le rendu progressif de la page. Ceci est particulièrement important pour les pages avec beaucoup de contenu et pour les utilisateurs sur les connexions Internet lentes.

Il est un fait documenté que pour améliorer l'expérience utilisateur globale, il est important de fournir des indicateurs de progrès et de rétroactions visuelles. Pour éviter d'avoir à redessiner les éléments de la page, dans le cas si leur changement styles, certains navigateurs, y compris IE, rendu blocs de la page jusqu'à ce que le CSS est complètement chargée. Pour cette raison, l'utilisateur est arrive à voir une page vierge.

Les spécifications HTML W3 », déclare également que le CSS doit m'inclure dans la section HEAD de la page HTML. at the bottom of the page, so it's best not to use it. A noter également que, dans IE @import se comporte de la même que l'utilisation <link> au bas de la page, il est donc préférable de ne pas l'utiliser.

Évitez d'utiliser les caractéristiques spécifiques du navigateur

Filtres: utilisation du filtre augmente la consommation de mémoire et est appliquée par élément, et non par l'image, de sorte que le problème est multiplié. En outre, les filtres sont IE propriétaire, par conséquent, ne fonctionnera pas comme prévu dans d'autres navigateurs. Si vous voulez un fond transparent ou dégradé, utilisez 1Pixel avec des images.
Expressions: expressions CSS sont une caractéristique agréable d'avoir en CSS, mais il est encore IE fonctionnalité spécifique. En outre, il est important de noter que, ces expressions sont évaluée lorsque la page est rendue et redimensionnée, défile et même lorsque l'utilisateur déplace la souris sur la page. Inutile de dire que cela pourrait affecter les performances de votre page. Par conséquent, dans des mots simples, éviter d'utiliser des expressions CSS, à moins que vous vous sentez ses avantages »pèse plus que ses inconvénients»

Externaliser vous CSS

L'utilisation de CSS externe se traduira par un chargement plus rapide des pages, car les fichiers JavaScript et CSS sont mis en cache par le navigateur. Inline CSS dans les documents HTML se téléchargées à chaque fois le document HTML est demandée. Cela pourrait effectivement réduire le nombre de requêtes HTTP faites, mais il augmente par la suite la taille du document HTML. CSS externe sont mises en cache par le navigateur, la taille du document HTML est réduite sans pour autant augmenter le nombre de requêtes HTTP.

S'il vous plaît noter que, si les utilisateurs sur votre site ont une vue de plusieurs pages par session et nombre de vos pages réutiliser les mêmes scripts et feuilles de style, il ya un plus grand bénéfice potentiel de mise en cache des fichiers externes.

Emballez votre fichier CSS

D'emballage ou de croquer votre CSS est la pratique de la suppression des caractères inutiles à partir du code pour réduire sa taille ce qui améliore les temps de chargement.

Le CSS peut me croquer en supprimant tous les commentaires et les caractères indésirables tels que des espaces blancs, sauts de ligne, etc

Pour les enfants, j'ai penser à consolider toutes les meilleures pratiques, j'ai lu tous les temps en temps. Enfin! Je n'ai descendre pour le mettre à la plume. J'ai réalisé que ça va être la tâche gigantesque de créer ce document mammouth, alors j'ai décidé de consacrer toute une catégorie à elle, afin que je puisse continuer à ajouter des choses sur les meilleures pratiques au fur et à i les rencontrer ...

Eh bien! le contenu ici sera une fusion de mes personnels pratiques de développement d'interface utilisateur les meilleures à celles écrites par les développeurs standard comme Yahoo, Google etc

Surveillez cet espace et de garder l'Browing Meilleur Catégorie pratiques

Parlant simple (pour ceux qui n'ont jamais entendu parler avant aujourd'hui doctype)! DOCTYPE est la déclaration dans un document HTML qui vient avant la balise <HTML>, qui ressemble à ceci (collé à partir de la source de cette page très)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Par conséquent une solution à ce problème était de

• permettre aux développeurs web qui savaient leurs normes à choisir le mode à utiliser.
• continuer à afficher les anciennes pages en fonction de l'ancien (caprices) des règles.

Et DOCTYPE est né.

Ainsi, selon que vous page est conçue pour les normes ou non, vous choisissez le doctype approprié.

Les vieilles pages écrites avant que ces normes ont été introduites n'ont pas un doctype. Par conséquent, lorsque il n'ya pas de DOCTYPE dans votre code HTML, puis le navigateur est en mode Quirks.
Mais si le DOCTYPE est définie comme l'une des options suivantes, puis le navigateur est dit être en mode strict.

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">