Передний вопрос

Недавно я получил работу, которая требовала отладки сайта Squarespace, чтобы понять, почему он загружается так медленно. Я решил поделиться тем, что я сделал, чтобы увеличить скорость загрузки.

Инструменты

Я использовал встроенный инструмент Google «Маяк». Если вы не знаете, где это находится, вы можете найти его в Dev Tools в разделе «Аудит».

Отказ от ответственности: все времена загрузки оцениваются по сравнению с моделируемым медленным соединением 4G.

Почему время загрузки является проблемой

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

Первый запуск

Если вы посмотрите на показания ниже, вы увидите, что сайт загружается невероятно медленно (опять же, это на фоне медленного 4G).

Проблемы и исправления

Аудит предоставит вам список распространенных проблем и исправлений. Вот что я получил.

Скрипты блокировки рендеринга

Проблема

Когда страница загружается, браузер загружает элементы HTML-файла сверху вниз. Это означает, что любые элементы в теге <head> будут загружаться еще до того, как содержимое тега <body> будет отображено на экране. В данном случае было загружено 3 Мб скриптов; как Javascript, так и CSS.

Исправить

Я удалил все скрипты, блокирующие рендеринг, которые смог. Это включало jQuery и power.io.

Примечание о Squarespace

Мы не можем вернуть примерно 6 секунд времени загрузки из-за того, как устроен Squarespace. Они загружают универсальный javascript в шапку. Это невозможно изменить. Дополнительную информацию см. в этой статье на форуме, опубликованной в сентябре.

Общий объем «универсальных» пакетов составляет около 1 Мб данных.

Изображения неправильного размера

Проблема

Сайт загружал в общей сложности 2,7 МБ данных только для изображений. Ключевыми проблемами были:

  • Большой логотип в шапке. Он имеет ширину 1500 пикселей, несмотря на то, что максимальная ширина составляет 1200 пикселей.
  • Коллекция из 4 изображений в карусели. Каждый из них имеет ширину 750 пикселей.
  • Изображение баннера, которое скрывается при загрузке страницы.

Исправить

Нет исправления. Платформа автоматически обрабатывает адаптивное изменение размера изображения. На экранах Retina загрузится изображение в 2 раза больше размера экрана. Мы мало что можем сделать с тем, как построена платформа. Нам просто нужно признать, что то, как загружаются изображения, так сказать, не в наших руках.

Огромная полезная нагрузка сети

Размер полезной нагрузки при первом запуске был 5 Мб! Это огромно! Вот пара вещей, которые я сделал, чтобы уменьшить его до 2,2 Мб (что все еще довольно много в моей книге).

Внедрение кода для конкретной страницы

Проблема

На каждой странице у них был небольшой скрипт для изменения изображения логотипа. По какой-то причине они использовали скрипт jQuery на каждой странице, чтобы добиться этого. Кроме того, это происходило в <head>.

Исправить

Я создал функцию в нижнем колонтитуле, которая вставляется на каждую страницу, которая ищет определенные страницы, на которых они хотят иметь другой логотип — без jQuery.

Изображение баннера

Проблема

Они загружали изображение баннера, которое скрывали.

Исправить

Полностью удалите изображение баннера.

Типография

Проблема

Стили типографики брались из трех источников: Typekit (встроенный в Squarespace), Typography.com и шаблонные таблицы стилей. Это означало, что они загружали в общей сложности 4 отдельных семейства шрифтов:

  • Европа
  • Промикса Нова
  • Готэм
  • Готэм Экран Смарт

Исправить

После окончательного рендеринга единственными шрифтами, которые действительно использовались, был набор Gotham. Я изменил стили по умолчанию на панели инструментов Squarespace на Arial, потому что это веб-шрифт, и его не нужно откуда-либо загружать.

Резюме

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

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

У вас есть другие горячие советы по сокращению времени загрузки? Бросьте их в комментарии ниже!