Носов Андрей

[nosovandrew]

Оптимизация сайта: http://www.fc-ural.ru/main/

На клиентскую производительность влияют следующие аспекты:

1. Изображения.

В среднем на загрузку изображений, по данным audit, тратится порядка 3-4 секунд. Для сокращения времени загрузки изображений можно провести следующие оптимизации:

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

• Использовать изображения в таких форматах, как JPEG 2000, JPEG XR или WebP, они обеспечивают наилучшее сжатие изображений.

• В идеале, сраница не должна загружать изображения, размер которых больше, чем размер, отображаемый на экране у пользователя. Для решения этой проблемы можно использовать векторный формат изображений SVG, изображение SVG может масштабироваться до любого размера. Другой способ - создать несколько версий изображений, а потом указывать, какое изображение нужно будет загрузить в HTML или CSS, используя media-запросы.

• Offscreen изображения, это изображения, которые пользователь не видит при загрузке страницы, это значит, что не нужно использовать эти изображения, как часть начальной загрузки страницы. Их можно загружать позже, это может уменьшить время загрузки страницы.

• Исползовать кэширование для всех изображений.

• Использовать CDN для изображений.

2. Текст.

Текст можно сжимать с помощью GZIP, он лучше всего подходит для сжатия текста. На данный момент на текст уходит коло 2-х секунд загрузки страницы.

3. CSS-стили.

Чем больше у нас css-стилей, там дольше загружается страница. Каждый css-файл задерживает нашу страницу от рендеринга. На данный момент, расходуется около секунды времени загрузки. Возможные решения проблемы:

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

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

• Использовать кэширование и CDN для css-стилей.

4. Скрипты.

Те скрипты, которые являются необходимыми для первой страницы, загружаются сразу. Остальные задерживаются с помощью async и defer и подгружаются уже после отрисовки страницы, когда появляется необходимость. Используется около секунды от общего времени загрузки.

5. Ответ сервера.

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

• Размещение контента на CDN или смена хостинг-провайдера.

• Оптимизация запросов к базе данных, использование кэширования, изменение конфигурации сервера.