Кто влияет на скорость загрузки страниц сайта и потребляет трафик

Кто влияет на скорость загрузки страниц сайта?

В процессе создания веб-сайта, для улучшения корпоративного имиджа и облегчения понимания пользователями компании и продукции, часто добавляется большое количество соответствующих изображений. Если изображения используются неправильно (слишком много изображений, слишком большие изображения), при загрузке будет потребляться больше системных ресурсов, что повлияет на время загрузки всей страницы. Поэтому очень важно хорошо поработать над оптимизацией изображений.

Так как же изменить и оптимизировать изображения?

1. Управление размером изображения

(1) Для локальных изображений

Поскольку изображения, размещенные на веб-странице, будут напрямую упакованы в программный пакет, слишком большое изображение приведет к слишком большому размеру пакета и увеличению времени загрузки. В то же время слишком большое изображение также приведет к увеличению времени рендеринга, поэтому производителю необходимо максимально сжать размер изображения.

Создатель может оптимизировать и изменить изображение следующими способами:

• Для изображений, не требующих прозрачного формата, рекомендуется использовать формат JPEG вместо формата PNG.

• Будь то ПК или мобильный телефон, используйте формат изображений WebP. В случае сжатия с потерями изменения до и после сжатия не так легко заметить невооруженным глазом, но размер может быть значительно уменьшен. (Примечание: WebP — это новое поколение форматов изображений, запущенное Google в 2010 году, которое превосходит текущий формат JPEG с точки зрения сжатия. При том же качестве размер изображений в формате WebP на 40% меньше, чем у изображений в формате JPEG. Использование формата WebP для изображений веб-сайта может значительно повысить скорость загрузки веб-сайта).

(2) Как включить формат изображений WebP на сайте:

1) Действия по включению WebP одним щелчком мыши: http://help.eyingbao.com/products/webp.html

2) После включения формата изображений Webp, что делать, если некоторые изображения нечеткие? Вы можете изменить качество изображения в свойствах управления изображениями, но учтите, что чем выше качество изображения, тем больше размер изображения и тем медленнее будет открываться веб-сайт.

Этапы работы следующие: http://help.eyingbao.com/products/wangzhanshangtupianbuqingxizenmechuli.html

Примечание:

• Убедитесь, что на веб-странице нет лишних и бесполезных графических ресурсов.

• Обратите внимание на изображения, которые загружаются по умолчанию, но впоследствии могут никогда не отображаться, например, слайдеры, аккордеоны и галереи изображений.

• Чтобы сократить время, необходимое для рендеринга ключевых изображений, система Yiyingbao использует отложенную загрузку менее важных изображений.

(3) Ускорение обработки изображений в сети доставки контента (CDN)

В системе создания сайтов Yiyingbao, за исключением изображений ICON, все остальные будут развернуты на CDN. Для таких сетевых изображений нет необходимости их сжимать.

(4) Ленивая загрузка изображения

Компонент изображения платформы для создания веб-сайтов Yiyingbao поддерживает технологию отложенной загрузки, а изображение по умолчанию использует функцию отложенной загрузки:

2. Быстрая проверка больших изображений на веб-страницах

Вы можете использовать инструмент разработчика Network для проверки времени загрузки и размера изображения. Конкретные операции следующие:

(1) Все браузеры имеют режим отладки разработчика. Возьмем в качестве примера Chrome. После открытия страницы нажмите ctrl+shift+i или щелкните Inspect в контекстном меню, чтобы войти в режим разработчика. Щелкните вкладку Network.

(2) Нажмите «Img», затем нажмите «Size» в списке, чтобы отсортировать размеры изображений. В основном оптимизируйте изображения размером более 50K и используйте инструменты обработки изображений для оптимизации.

3. Оптимизируйте изображение и повторно загрузите его для публикации.

Повторно загрузите и опубликуйте оптимизированное изображение, чтобы завершить функцию. Вы также можете напрямую включить функцию Webp в бэкэнде управления веб-сайтом одним щелчком мыши.

Выше приведены основные решения для оптимизации изображений на страницах веб-сайта для повышения скорости загрузки. Если на страницах вашего веб-сайта также есть проблема с изображениями слишком большого размера, то оптимизируйте их в соответствии с вышеприведенными методами!