J'ai créé un site Web de restaurant, c'est une page de menu unique contenant différents aliments. Le problème est que la page mentionnée ci-dessus est trop lente sur la première charge. Premièrement, je pensais que lorsque vous entrez la page de menu, tous les éléments avec des images appropriées (environ 200 images) sont en cours de chargement et c'est la cause première du problème, mais j'ai ensuite configuré JS Trigger qui clique sur certains éléments de menu sur la page. Chargez et charge seulement 6 images. Cependant, cela n'a pas aidé. Donc, veuillez décrire certaines façons d'optimiser ma page pour un chargement rapide.
Merci beaucoup à l'avance! :)
4 Réponses :
Même si seulement 6 images sont chargées, en fonction de la taille des images, ce sera lent. Envisagez de redimensionner vos images pour optimiser la vitesse.
Vous pouvez le faire à l'aide de GIMP / Photoshop ou de ce site Web: HTTPS: // Tinypng. com p>
[modifier] p>
N'utilisez pas tous ces fichiers séparés dans la production: P>
<script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/jquery.sticky.js"></script> <script src="js/jquery.backstretch.min.js"></script> <script src="js/isotope.js"></script> <script src="js/imagesloaded.min.js"></script> <script src="js/nivo-lightbox.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script src="js/jquery.parallax.js"></script> <script src="js/smoothscroll.js"></script> <script src="js/wow.min.js"></script> <script src="js/custom.js"></script>
et avez-vous vraiment besoin de nombreux fichiers JS? p> Ne pas utiliser de cette manière, miniez tout et assurez-vous que vous utilisez le Version minifiée de jQuery, pas la jquery.js. P> Vérifiez ici ici: https: // code .jquery.com / p> Essayez de vous aider à vous aider avec l'automatisation et la minification du code: https://gruntjs.com/ p> ou utilisez simplement ce site Web: https://www.minifier.org/ p> p>
Chacune de 6 images pèse environ. 80 Ko, est-il suffisant de ralentir le chargement?
Quel est le site Web? Est-ce en ligne? Quelque chose d'autre fait pire. Postez votre code ici ou dans un lien CodePen
alfreda.com.az - Aller au menu sur NAV, cliquez sur n'importe quel article.
Vous appelez trop de fichiers CSS et de bibliothèques JS. Essayez de minimiser tout et mettre en une seule /
Vous devez vous optimiser toutes les images:
Vous pouvez utiliser l'outil en ligne pour cela:
Vous pouvez télécharger de nombreuses images sur elle et ce dossier zip de compresser des images.
Après optimisation, toutes les images que la vitesse du site augmentera. compresse jpeg
URL: https://compressjpeg.com/
compresse png
URL: https://commresspng.com/
Utilisez Java Script Ajax et créez une pagination pour la liste. C'est-à-dire que vous obtiendrez des données de la base de données et affichez seulement 10 valeurs à la fois. Et pour les images .. Choisissez certaines de vos images communes et créez Sprite .. Ces 2 choses vous aident le plus. Dans votre chaque projet ..
Vous pouvez essayer https://minImagesvideos.com Cela devrait compresser vos images pour optimiser le contenu de votre page. Cependant, vous devez partager votre code pour les problèmes liés à JS ALSI
Que devrait être optimisé? Il n'y a aucun code pour optimiser dans le poteau.
@Teemu je veux dire, toutes manières d'éviter les images en cours de chargement. Je ne peux pas poster le code, Cuz il est trop grand et inapproprié.
Comme vous pouvez le constater, sans le code, nous ne pouvons que spéculer ce qui pourrait être faux. Vous devez faire vos propres recherches pour réduire le code. Par exemple. Retirez les scripts jusqu'à ce que la page charge plus rapidement, de cette façon, vous trouverez le script qui ralentit votre page. Si tous les scripts sont supprimés et que la page est toujours lente, supprimez d'autres liens sources (comme CSS StylesSheets), à un moment donné, vous découvrirez la cause.
@Teemu bien, je vais essayer ça, merci