Avec l'augmentation de la bande passante, il y a de plus en plus d'objets sur la page Web, il est donc toujours un sujet important pour accélérer l'ouverture des pages Web. Il existe trois façons d'accélérer l'ouverture des pages Web: l'une consiste à augmenter la bande passante du réseau, la seconde consiste à optimiser l'utilisateur sur la machine locale, et la troisième consiste à optimiser les pages Web par des concepteurs de sites Web. Cet article est basé sur la perspective d'un concepteur de sites Web et partage quelques conseils pour optimiser la vitesse de chargement des pages Web.
1. Optimiser les images
Il n'y a presque pas de page Web sans photos. Si vous avez connu l'âge de 56 000 chats, vous n'aimerez certainement pas les sites Web avec beaucoup de photos. Parce que le chargement d'une telle page Web prendra beaucoup de temps.
Même maintenant, la bande passante du réseau s'est beaucoup améliorée, et 56k Cat s'est progressivement s'estompé, et il est toujours nécessaire d'optimiser les images pour accélérer les pages Web.
L'optimisation des images comprend la réduction du nombre d'images, la réduction de la qualité d'image et l'utilisation de formats appropriés.
1. Réduisez le nombre d'images: supprimez des images inutiles.
2. Réduire la qualité de l'image: si elle n'est pas très nécessaire, essayez de réduire la qualité de l'image, en particulier le format JPG.
3. Utilisez le format approprié: voir le point suivant.
Par conséquent, avant de télécharger des photos, vous devez modifier les images. Êtes-vous trop paresseux pour éditer mais que vous voulez que les images aient des effets spéciaux? Vous pouvez essayer d'utiliser l'appel JavaScript pour implémenter des effets spéciaux d'image.
2. Sélection du format d'image
Il y a trois formats d'image généralement utilisés sur les pages Web, à savoir JPG, PNG et GIF. Temps de la page Web.
1. JPG: photographies qui sont généralement utilisées pour afficher des paysages, des personnages et des photos artistiques. Parfois, il est également utilisé sur les captures d'écran de l'ordinateur.
2. GIF: Il y a moins de couleurs fournies et peut être utilisée dans certains endroits où il n'y a pas de demande élevée de couleurs, telles que les logos de sites Web, les boutons, les expressions, etc. Bien sûr, une application importante du GIF est des images d'animation. Comme une image de réflexion faite avec Lunapic.
3. PNG: Le format PNG peut fournir un arrière-plan transparent et est un format d'image spécialement inventé pour l'affichage de la page Web. Il est généralement utilisé sur les pages Web qui nécessitent un affichage d'arrière-plan transparent ou nécessitent une qualité d'image élevée.
3. Optimiser CSS
Les feuilles de style de superposition CSS rendent les pages Web plus efficaces pour charger et améliorer l'expérience de navigation. Avec CSS, la méthode de mise en page du formulaire peut être retirée.
Mais parfois, lorsque nous écrivons CSS, nous utilisons des phrases plus verbeuses, comme cette phrase:
marge: 10px;
marge-droite: 20px;
marge-fond: 10px;
marge-gauche: 20px;
Vous pouvez le simplifier à:
marge: 10px 20px 10px 20px;
Ou cette phrase:
＜ p class = "décoré"> un paragraphe de texte décoré ＜ / p>
＜ p class = "décoré"> Deuxième paragraphe ＜ / p>
＜ p class = "décoré"> troisième paragraphe ＜ / p>
＜ p class = "décoré"> Paragraphe en avant ＜ / p>
Vous pouvez utiliser Div pour inclure:
＜ div class = "décoré">
＜ P> un paragraphe de texte décoré ＜ / p>
＜ P> Deuxième paragraphe ＜ / p>
＜ P> Troisième paragraphe ＜ / p>
＜ P> Forth Paragraphe ＜ / P>
＜ / div>
Le CSS simplifié peut éliminer les attributs redondants et améliorer l'efficacité opérationnelle. Si vous êtes trop paresseux pour simplifier après avoir écrit CSS, vous pouvez utiliser des outils CSS simplifiés en ligne, tels que CleanCSS.
4. Ajouter une barre oblique à l'arrière de l'URL
Certaines URL, par exemple, lorsqu'un serveur reçoit une telle demande d'adresse, il faut du temps pour déterminer le type de fichier de l'adresse. Si le Web est un répertoire, vous pourriez aussi bien ajouter une barre oblique supplémentaire à l'URL pour le faire / afin que le serveur puisse clairement savoir pour accéder au fichier d'index ou par défaut dans le répertoire, ce qui permet de gagner du temps de chargement.
V. Indiquez la hauteur et la largeur
Ceci est important, mais beaucoup de gens l'ignorent toujours à cause de la paresse ou d'autres raisons. Lorsque vous ajoutez des images ou des tables sur une page Web, vous devez spécifier leur hauteur et leur largeur, c'est-à-dire les paramètres de hauteur et de largeur. Si le navigateur ne trouve pas ces deux paramètres, il doit calculer la taille lors du téléchargement de l'image. Cela affecte non seulement la vitesse, mais affecte également l'expérience de navigation.
Voici un code d'image relativement amical:
＜ img id = "moon" height = "200" width = "450" src = "/>
Lorsque le navigateur connaît les paramètres de hauteur et de largeur, même si l'image ne peut pas être affichée pour le moment, l'image sera libérée sur la page, puis le contenu ultérieur continuera d'être chargé. Par conséquent, le temps de chargement est plus rapide et l'expérience de navigation est meilleure.
6. Réduire les demandes HTTP
Lorsqu'un navigateur ouvre une page Web, le navigateur émettra de nombreuses demandes d'objets (images, scripts, etc.). S'il y a beaucoup d'objets sur la page Web, cela peut prendre beaucoup de temps.
Par conséquent, nous devons réduire le fardeau des demandes HTTP. Comment réduire le fardeau?
1. Supprimez des objets inutiles.
2. Combinez les deux images à proximité en une seule.
3. Fusion CSS
Jetez un œil au code suivant et vous devez charger trois CSS:
＜ lien rel = "Stylesheet" type = "text / css" href = "/ body.css" />
＜ link rel = "Stylesheet" type = "text / css" href = "/ latéral.css" />
＜ link rel = "Stylesheet" type = "text / css" href = "/ footter.css" />
Nous pouvons le synthétiser en un seul:
＜ link rel = "Stylesheet" type = "text / css" href = "/ style.css" />
Cela réduit les demandes HTTP.
7. Autres conseils (ajoutés par le traducteur)
1. Retirez les compléments inutiles.
2. Si vous intégrez des widgets à partir d'autres sites Web sur la page Web, si vous avez de la place pour le choix, vous devez en choisir un rapide.
3. Essayez d'utiliser des images au lieu de Flash, ce qui est également bénéfique pour le référencement.
4. Si un contenu peut être statique, il sera statique de réduire le fardeau du serveur.
5. Le code statistique est placé à la fin de la page.