À mesure que la bande passante augmente, il y a de plus en plus d'objets sur les pages Web. L'accélération de l'ouverture des pages Web reste donc un problème important. Il existe trois façons d'accélérer la vitesse d'ouverture des pages Web. L'une consiste à augmenter la bande passante du réseau, l'autre à optimiser la machine locale de l'utilisateur et la troisième à optimiser la page Web dans une certaine mesure par le concepteur du site Web. Cet article est du point de vue d'un concepteur de site Web et partage quelques conseils pour optimiser la vitesse de chargement des pages Web.
1. Optimiser les images
Il n'y a presque aucune page Web sans images. Si vous avez vécu l’ère des chats 56K, vous n’aimerez pas les sites Web avec beaucoup d’images. Parce que charger une telle page Web prendra beaucoup de temps.
Même maintenant, la bande passante du réseau s'est beaucoup améliorée et les 56 000 chats disparaissent progressivement. Il est encore 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é de l'image et l'utilisation de formats appropriés.
1. Réduisez le nombre d’images : supprimez les images inutiles.
2. Réduire la qualité de l'image : Si cela n'est pas nécessaire, essayez de réduire la qualité de l'image, en particulier au format jpg. Une réduction de 5 % de la qualité peut ne pas sembler un grand changement, mais le changement de taille du fichier est relativement important.
3. Utilisez un formatage approprié : voir point suivant.
Par conséquent, vous devez modifier l'image avant de la télécharger. Si vous pensez que Photoshop est trop compliqué, vous pouvez essayer certains outils d'édition d'images en ligne. Vous êtes trop paresseux pour éditer mais vous souhaitez avoir des effets spéciaux sur vos photos ? Vous pouvez essayer d'appeler javascript pour obtenir des effets d'image.
2. Sélection des formats d'image.
Il existe généralement trois formats d'image utilisés sur les pages Web, jpg, png et gif. Les indicateurs techniques spécifiques aux trois formats ne constituent pas le contenu de cet article. utilisé quand. Pour réduire le temps de chargement des pages Web.
1. JPG : Généralement utilisé pour afficher des œuvres photographiques de paysages, de personnes et des photos artistiques. Parfois utilisé dans les captures d’écran d’ordinateur.
2. GIF : il fournit moins de couleurs et peut être utilisé dans des endroits où les exigences de couleur ne sont pas élevées, comme les logos de sites Web, les boutons, les émoticônes, etc. Bien entendu, les images animées constituent une application importante du gif. Comme une image de réflexion réalisée 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 pages Web. Généralement utilisé sur les pages Web qui nécessitent un affichage d’arrière-plan transparent ou des exigences de qualité d’image élevées.
3. Optimiser CSS
Les feuilles de style en cascade CSS permettent aux pages Web de se charger plus efficacement et d'améliorer l'expérience de navigation. Avec CSS, la disposition des tableaux peut être supprimée.
Mais parfois, nous utilisons des déclarations plus verbeuses lors de l'écriture de CSS, comme cette phrase :
margin-top: 10px;
marge droite : 20 px ;
marge inférieure : 10 px ;
margin-left: 20px;
vous pouvez le simplifier en :
margin: 10px 20px 10px 20px
ou cette phrase :
＜p class="decorated">Un paragraphe de texte décoré＜/p>
＜p class="decorated">Deuxième paragraphe＜/p>
＜p class="decorated">Troisième paragraphe＜/p>
＜p class="decorated">Quatrième paragraphe＜/p>
peut être inclus avec div :
＜div class="decorated">
＜p>Un paragraphe de texte décoré＜/p>
＜p>Deuxième paragraphe＜/p>
＜p>Troisième paragraphe＜/p>
＜p>Quatrième paragraphe＜/p>
＜/div>
La simplification du CSS peut supprimer les attributs redondants et améliorer l'efficacité opérationnelle. Si vous êtes trop paresseux pour simplifier le CSS après l'avoir écrit, vous pouvez utiliser certains outils CSS simplifiés en ligne, tels que CleanCSS
4. Ajoutez une barre oblique après l'URL
. Certaines URL, par exemple, lorsque le serveur reçoit une telle demande d'adresse. il faut du temps pour déterminer le type de fichier à cette adresse. Si le Web est un répertoire, autant ajouter une barre oblique supplémentaire après l'URL pour la changer en /, afin que le serveur sache clairement en un coup d'œil s'il souhaite accéder à l'index ou au fichier par défaut du répertoire, économisant ainsi temps de chargement.
5. Le marquage de la hauteur et de la largeur
est très important, mais de nombreuses personnes l'ignorent toujours par paresse ou pour d'autres raisons. Lorsque vous ajoutez des images ou des tableaux à 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. S'il y a beaucoup d'images, le navigateur doit constamment ajuster la page. Cela affecte non seulement la vitesse, mais également l’expérience de navigation.
Ce qui suit est un code d'image relativement convivial :
<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 temporairement, la page libérera également de l'espace pour les images, puis continuera à charger le contenu suivant. En conséquence, le temps de chargement est plus rapide et l'expérience de navigation est meilleure.
6. Réduisez les requêtes http
lorsque le spectateur ouvre un
.page Web, le navigateur émettra de nombreuses requêtes d'objets (images), scripts, etc.), en fonction du retard du réseau, s'il y a beaucoup d'objets sur la page Web, cela peut prendre beaucoup de temps. du temps.Par
conséquent, commentréduire
la charge sur les requêtes http ?
Certains objets inutiles.2. Combinez deux images adjacentes en une seule.
Regardez
le code suivant.
＜lien rel="stylesheet" type="text/css" href="/body.css" />
＜link rel="stylesheet" type="text/css" href="/side.css" />
＜link rel="stylesheet" type="text/css" href="/footer.css" />
Nous pouvons le combiner en un seul :
＜link rel="stylesheet" type="text/css" href="/style .css" />
réduisant ainsi les requêtes http.
7. Autres conseils (ajoutés par le traducteur)
1. Supprimez les modules complémentaires inutiles.
2. Si des widgets d'autres sites Web sont intégrés à la page Web, si vous avez le choix, assurez-vous de choisir celui à vitesse rapide.
3. Essayez d’utiliser des images au lieu du flash, ce qui est également bon pour le référencement.
4. Si certains contenus peuvent être rendus statiques, rendez-les statiques pour réduire la charge sur le serveur.
5. Le code statistique est placé en fin de page.