Мой Bootstrap веб-сайт загружается много времени. Я использовал шаблон Celia от Envato, чтобы построить его

Question

Я купил шаблон Celia у Envato Element и отредактировал большинство кодов. Я разместил свой сайт на Github здесь: https://github.com/rosyhnguyen/rosyhnguyen.github.io. Я использовал домен из Namecheap: https://rosyhnguyen.me

Мой сайт не содержит видео или медиа-файлов, но загрузка занимает много времени *1010* ( почти 5-10 секунд, чтобы загрузить страницу тематического исследования).

Не могли бы вы помочь мне с тем, что не так с моей настройкой? Все мои настройки находятся в ссылке GitHub выше. Загрузка сайта занимает много времени

Answer 1

Проверьте вкладку сети в chrome.

sketchslider2.png составляет почти 15 МБ, а размер изображения составляет 7001 x 3842

fitcheck.png - 4,5 МБ, а размер - 8168 x 4000

, если вы не планируете при проецировании вашего веб-сайта на широкоэкранный телевизор эти размеры не нужны.

Необходимо оптимизировать крупномасштабные изображения в диапазоне 1920 x 1080.

Если вы измените размер скетч-слайдера до 1920 ширину и сохранить в формате jpg, тогда вы можете уменьшить его занимаемую площадь примерно до 175 кб

для фитчека, при том же преобразовании вы можете получить его до 100 кб

up-decor.jpg также может ' его тоже не найти, и какое-то время горит, пытаясь его решить.

Answer 2

Если вы хотите получить хороший обзор того, что происходит на вашем сайте, вы должны проверить водопад на вкладке Сеть в Chrome инструментах разработчика.

Из того, что я вижу, есть ресурс под названием: 'sketchslider -2.png 'и другой png тоже 16mb. Изображения убивают вашу производительность.

Размеры изображений на веб-сайтах должны быть максимально уменьшены, также как и использование уменьшенных версий CSS и Javascript.

Вы используете сверхтяжелые Файлы png повсюду.

Также попробуйте поискать в своем коде некоторые недостающие ресурсы, потому что я также видел около 404.

Вы можете уменьшить размер ваших изображений, используя редуктор изображений инструмент (например, https://tinypng.com/) или Photoshop, например.

Я сделал снимок экрана, чтобы вы могли увидеть проблему на странице вашего примера.

Надеюсь было полезно.

Скриншот сетевого водопада