10 хитростей, которые увеличат скорость вашего сайта

После работы над оптимизацией скорости веб-сайта Creative Tim я решил записать некоторые вещи, которые могут помочь максимально увеличить скорость. Один совет, который очень важен, — максимально сократить время загрузки страниц. Любой цифровой продукт должен предлагать пользователю отличный опыт, а быстрый сайт улучшает общее качество и повышает удовлетворенность ваших пользователей. Суть в том, что каждый заслуживает быстрой работы в Интернете, поэтому относитесь к своим пользователям как можно лучше.

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

1. Приобретите себе быстрый сервер

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

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

Если вы используете Wordpress, вы можете увидеть несколько хороших вариантов здесь.

Мы используем Heroku для Creative Tim и определенно рекомендуем его и вам!

2. Оптимизируйте свои изображения

Код со страниц веб-сайта обычно загружается быстро, но изображения намного больше и загружаются дольше.

Прежде всего, когда вы используете изображения, обязательно выберите правильный формат. Существуют разные типы (.gif, .jpg, .png) для разных целей (например, отображение фотографии, графики, изображения с небольшим количеством цветов или изображения, состоящего из многих цветов). Мы советуем как можно чаще использовать .jpeg, так как этот формат проще всего загрузить.

Во-вторых, не масштабируйте изображения с помощью HTML. Если вам нужно изображение размером 400x400 пикселей, создайте изображение именно 400x400 — не больше и не меньше. Не используйте изображение размером 800x800, потому что необходимо загрузить полное изображение, в то время как меньшее может помочь.

Если вы ищете инструменты для редактирования изображений, ознакомьтесь с этим сообщением в блоге Crazy Egg.

3. Сделайте свой дизайн адаптивным

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

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

Если вы хотите узнать больше об адаптивном веб-дизайне, вы можете начать с основ в W3Schools или выбрать наш любимый фреймворк Bootstrap.

4. Оптимизируйте доставку CSS и javascript

Храните свои CSS и Javascript в отдельных файлах вне файлов HTML. Вместо дублирования кода CSS или JS на нескольких страницах вам следует просто импортировать внешние файлы туда, где они нужны.

5. Включите кеширование браузера

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

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

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

6. Включить сжатие

Большие страницы громоздки и загружаются медленно, и, поскольку вы не хотите возиться с их содержимым, особенно если оно высокого качества, вам следует рассмотреть возможность их архивирования. Сжатие уменьшает пропускную способность ваших страниц и увеличивает скорость вашего сайта. Мы предлагаем использовать инструмент под названием Gzip, и, поскольку 90% сегодняшнего интернет-трафика проходит через браузеры, поддерживающие Gzip, он, вероятно, лучший.

7. Минимизируйте ресурсы

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

Вот что рекомендует Google:

8. Избегайте плохих запросов

ЕСЛИ у вас неработающие ссылки, они приведут к ошибкам 404/410 и расточительным запросам. Старайтесь обращать внимание на свои URL-адреса, ищите неработающие и исправьте их (не забудьте дважды проверить свои изображения). Чтобы ускорить процесс, вы можете использовать эту онлайн-проверку неработающих ссылок.

9. Минимизируйте редиректы

Иногда необходимо перенаправить браузер с одного URL-адреса на другой, чтобы указать новое местоположение URL-адреса, отслеживать клики или соединять разные части сайта. Но перенаправления вызывают дополнительный HTTP-запрос и добавляют задержку. Используйте их только в том случае, если для этого нет другого решения.

Вот некоторые из рекомендаций Google:

  • Никогда не ссылайтесь на URL-адреса на своих страницах, которые, как известно, перенаправляют на другие URL-адреса.
  • Никогда не требуйте более одного перенаправления для доступа к данному ресурсу. Например, если C является целевой страницей, и есть две разные начальные точки, A и B, обе A и B должны перенаправлять непосредственно на C; A никогда не должен промежуточно перенаправлять на B.
  • Сведите к минимуму количество дополнительных доменов, которые выполняют перенаправления, но фактически не обслуживают контент. Это может быть заманчиво, так что вы также можете обнаружить неверный пользовательский ввод, но это может закончиться неприятным кругом.

10. Используйте оптимизатор скорости страницы

Приходя непосредственно от Google, вы можете использовать инструмент PageSpeed ​​Insights, чтобы получать предложения, которые ускорят вашу страницу. Некоторых из них я уже касался в предыдущих пунктах, и я уверен, что они будут более специфичными для вашего случая. Это очень хороший ресурс, особенно если кто-то с техническим образованием может просмотреть их.

И еще: не забудьте сделать резервную копию перед тем, как начнете вносить необходимые изменения. Если у вас есть какие-либо советы или вопросы, обязательно дайте мне знать в разделе комментариев ниже. :)