La bande passante Internet devient de plus en plus large, ce qui semble avoir fait un saut qualitatif dans la vitesse de chargement des pages Web. En fait, ce n'est pas le cas, car avec l'augmentation de la bande passante, il y a de plus en plus d'objets sur la page Web, donc accélérer la vitesse d'ouverture des pages Web reste une question importante. 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 font pas partie du contenu de cet article. Il suffit de savoir quel format doit être utilisé quand réduire le temps de chargement de la page 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 instructions plus verbeuses lors de l'écriture de CSS, comme cette phrase :
margin-top: 10px
;
margin-bottom
:
10px;
margin-left: 20px;
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">Le quatrième paragraphe</p>
peut être inclus dans un 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.
Pour certaines URL, telles que "www.kenengba.com/220", lorsque le serveur reçoit une telle demande d'adresse, il faut du temps pour déterminer le type de fichier de cette adresse. Si 220 est un répertoire, vous pouvez aussi bien ajouter une barre oblique supplémentaire après l'URL pour en faire www.kenengba.com/220/ , afin que le serveur puisse clairement savoir d'un coup d'œil qu'il souhaite accéder à l'index ou au fichier par défaut dans le répertoire, économisant ainsi du 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 convivial :
<img id=”moon” height=”200″ width=”450″ src=”” <p class=”pictext”>alt=”moon image” />
</p>
Quand le navigateur connaît les paramètres de hauteur et de largeur, même si l'image ne peut pas être affichée temporairement, il fera de la place à l'image sur la page et continuera à charger le contenu suivant. Le résultat est des temps de chargement plus rapides et une meilleure expérience de navigation.
6. Réduisez les requêtes http
Lorsqu'un spectateur ouvre une page Web, le navigateur émettra de nombreuses requêtes d'objets (images, scripts, etc.). En fonction du délai du réseau, le chargement de chaque objet sera retardé. S'il y a beaucoup d'objets sur la page, cela peut prendre beaucoup de temps.
Il est donc nécessaire de réduire la charge des requêtes http. Comment réduire le fardeau ?
1. Supprimez certains objets inutiles.
2. Combinez deux images adjacentes en une seule.
3. Fusionnez les CSS
Jetez un œil au code suivant :
<link 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
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.