Как ускорить загрузку сайта
Как ускорить загрузку сайта
Иногда владельцам ресурсов бывает достаточно сложно понять, почему их очень красивый и интересный сайт не получает заслуженной любви посетителей и поисковых систем. Казалось бы, дорогой и сложный дизайн, отличные тексты, написанные профессиональными журналистами, а посетителей очень и очень мало, да и те, кто заходит, не всегда дожидаются загрузки даже первой страницы. Довольно часто причина этого как раз и кроется в том, что дождаться долгой загрузки в век быстрого интернета хватает терпения далеко не у каждого.
По несколько минут ожидать, когда страница любимого сайта откроется и покажет свое содержание, посетители могли лет 20 назад, когда и интернет был по большей степени модемным, да и веб-технологии заметно отставали от современных, сегодня же люди хотят скорости.
Что делать?
Для начала определиться с тем, что делать что-то надо. Но не стоит искать сразу хостинг пошустрее или варианты посолиднее, типа выделенных серверов, на самом деле даже на самых простых и дешевых хостингах, ограниченных по ресурсам, довольно успешно существуют посещаемые порталы, которые просто правильно оптимизированы. Что значит оптимизированы? Как правило, с такими проблемами сталкиваются владельцы сайтов, созданных на основе каких-либо CMS, в результате большого количества и длительности запросов, которые формируются при попытке открыть сайт. Вот с уменьшением этих запросов и нужно в первую очередь начать работать.
Первое, что рекомендуется сделать – включить кэширование. Большинство CMS при каждом обращении к странице формируют ее буквально с нуля, делая сотни запросов и тем самым нагружая сервер и тормозя загрузку. Решается это как раз технологией кэширования – проще всего это сделать специальными плагинами, которые есть практически для всех CMS. Эти плагины сохраняют копию страницы при загрузке и некоторое время выдают эту копию заходящим пользователям, без создания излишних запросов к базам данных и файлам, что значительно снижает нагрузку на сервер.
Второе – оптимизируйте таблицы стилей.
Использовать их в оформлении сайта, безусловно, очень удобно, однако некоторые CMS имеют «болезнь» использовать сразу несколько таблиц и во время загрузки браузеру приходится обращаться за информацией к каждой из них, создавая лишние запросы. То есть, по возможности, объедините в один файл все таблицы стилей. Кроме того, постарайтесь почистить их от ненужных пробелов, строк, уменьшить, где это возможно. Любая лишняя буква создает дополнительную нагрузку.
Третье – разберитесь с java-скриптами.
Большинство java-скриптов требует для правильной работы подключения дополнительных библиотек. Очень часто можно встретить ситуацию, что библиотеки эти подгружаются с самого сайта, хотя более оптимально использовать для их подгрузки специальные сервисы, например, от Google – оттуда они и скачаются быстрее, вполне вероятно уже находятся в кэше браузера посетителя, попав туда при посещении других ресурсов и не будут опять же создавать лишние запросы и нагружать ваш сервер.
Кроме того, стоит учесть, что любой браузер, встретив в коде страницы java-код, вообще перестает загружать что-либо другое, пока не обработает (то есть загрузит и запустит) его полностью, поэтому помещать функции вызова таких java-скриптов лучше ближе к концу страницы, чтобы хоть что-то, пока он догружается, пользователь уже мог видеть. Точно так же, как и таблицы стилей, все файлы скриптов тоже стоит объединить в один, чтобы не создавать лишних запросов. Вручную это, конечно, делать не стоит, но существуют специальные программы и сервисы, которые могут сделать это качественно и быстро.
Вот, собственно, три способа ускорить загрузку своего сайта, которые доступны даже для тех, кто в веб-программировании понимает мало, то есть для любителей и начинающих вебмастеров. Ими, конечно, все не ограничивается, но с опытом вы их тоже узнаете и освоите.
вы сможете получить безопасный для SEO код
если не хотите везти Mac в кустарный сервис или устанавливать SSD своими силами, внешний носитель — отличный компромисс.
Кэширование – это способ временного хранения данных для более простого и быстрого извлечения. Это означает, что кэширование может быть выполнено двумя путями: сервер вашего хоста может кэшировать некоторые данные, а затем браузеры ваших пользователей могут кэшировать оставшиеся данные. Это гарантирует, что вашему серверу не придётся запускать так много запросов и файлов, а пользователям – загружать каждый отдельный файл всякий раз, когда они посещают ваш сайт.
Для иконок и пиктограмм всегда старайтесь использовать SVG. Векторные изображения могут сэкономить до 60% от размера файла. Почему важны такие мелочи, как подобные иконки?
Один из лучших способов ускорения загрузки сайта — использование кэширующих плагинов, благодаря которым данные вашего сайта после загрузки будут находиться в кэше браузера пользователя, что в свою очередь предотвратит количество запросов на сервер и ускорит загрузку сайта.
Оптимизация загрузки невозможна без заботы о «чистоте» кода, передающегося браузеру пользователя при заходе на сайт. Большое число символов в исходном коде заметно влияет на скорость загрузки, поэтому его краткость является важным фактором успеха.
Существует еще и техническая сторона вопроса. Если вы упустите из внимания столь важный показатель как скорость загрузки, это приведет к увеличению необходимого объема ресурсов хостинга и, соответственно, к дополнительным затратам. То есть работа над улучшением производительности оправдана как с экономической, так и с технической точки зрения.
Снижение скорости загрузки страницы на 1 секунду влечет за собой:
уменьшение числа просмотров на 11%;
снижение показателя удовлетворенности пользователя на 16%;
уменьшение конверсии до 6%.
Все знают, что медленный сайт — это плохо. Из-за тормозящего сайта возникают серьезные проблемы при решении повседневных задач. Иногда это просто раздражает. Часто торможение сайта — это и поломка, отказ в обслуживании — люди не дожидаются загрузки и уходят. Это актуально для случаев радикального торможения сайта, например, когда начало отрисовки страницы начинается через 8–10 секунд после клика.
Быстрая скорость загрузки сайта чрезвычайно важна. Она улучшает пользовательский опыт, увеличивает коэффициент конверсии, вовлеченность пользователей и даже поднимает сайт в результатах выдачи.
Вы можете подумать, что ввиду их статичности, изображения не оказывают особого влияния на скорость загрузки сайта. Но все совсем наоборот — изображения высокого качества оказывают огромное влияние на практически все ресурсы вашего сайта. Однако это совсем не означает, что вы должны отказаться от четких изображений в пользу маленьких и размытых эскизов.
Все сайты разные, поэтому в анализе быстродействия обращаем внимание на разные вещи. Сначала мы анализируем производительность ресурса. Насколько быстро генерируется первый байт, как быстро браузер получает отклик от сервера? А также: когда начинается рендеринг страницы и сколько в итоге времени уходит на полную загрузку.
Браузер пользователя выполняет множество шагов, прежде чем ответ в виде кода HTML от сервера будет передан клиенту и преобразован в пиксели на экране.
Критическим путем рендеринга (Critical Rendering Path) называется последовательность шагов, необходимых для первого отображения страницы.
Чем больше проект, тем больше вероятность, что какой-то код стал неактуальным. И лучший способ его минимизировать и сократить время загрузки – просто удалить ненужный код.
Распространенная ошибка на основе примера: главная страница сайта имеет свою структуру и набор необходимых для работы стилей/js скриптов, а личный кабинет имеет другой необходимый для нормальной работы набор. Ошибка заключается в том, что большинство сайтов подгружают все css стили и все js файлы сайта вне зависимости от типа страницы. То есть главная страница сайта может подгружать лишние стили и скрипты, предназначенные для страницы личного кабинета, а это приводит к многократному увеличению веса главной страницы сайта и последующим неблагоприятным последствиям, вплоть до неправильной работы сайта.
Если после установки плагина вы все равно видите предупреждение от Google об оптимизации картинок — не переживайте. Инструмент Google PageSpeed предоставляет оптимизированную версию этих картинок. Вы можете загрузить их, а потом обновить в библиотеке медиа в WordPress или через File Manager.
Тем не менее, с помощью Google Pagespeed Insights вы можете определить недостатки страницы, чтобы исправить их и оптимизировать загрузку.
Позвольте браузеру вначале загрузить страницу с контентом, а уже потом javascript-файлы. Для этого поместите эти файлы вниз страницы. Но здесь важно не перестараться. Например, ваш сайт содержит множество интерактивных «примочек», из-за чего некоторые файлы весят под сотни килобайт.
На скорость загрузки файлов влияет размер файлов и скорость передачи. Поскольку мы не можем влиять на скорость передачи, то будем влиять на размер файлов. А для более быстрого отображения будем разбираться с версткой.
Казалось бы, такая мелочь, как скорость загрузки сайта, слабо влияет на продажи. Однако это предположение в корне неверно. Исследовательская компания Aberdeen Group доказала, что каждая дополнительная секунда ожидания уменьшает количество просмотров страниц с товаром или услугой на 11%. Одна лишняя секунда загрузки раздражает 16% пользователей и снижает продажи на 7%. Половина аудитории покидают страницу, если экран браузера остается белым более трёх секунд.
И для посетителей, которые решили остаться, медленное время загрузки может повлиять на их отказ от сайта в будущем. В одном из опросов 79% клиентов заявили, что они не вернутся на сайт с низкой производительностью. В том же опросе 52% покупателей сказали, что быстрая загрузка страниц важна для их лояльности, а 44% — что рассказывают своим друзьям о негативном опыте взаимодействия с сайтом.
А также проанализировали время загрузки страниц через браузер Google Chrome. Данную проверку быстродействия сайта можно провести следующим образом: через F12 открыть вкладку «Network» (предварительно очистив фильтр) и запустить действие клавишей F5
Удалите ненужные расширения
Это правда, что каждому сайту нужны расширения. Но всегда важно выбрать самый лучший вариант из нескольких. Некоторым расширениям нужны дополнительные скрипты, подключение к удаленной сети, или просто дополнительное время, чтобы загрузиться. Это может ужасно замедлить вас. Поэтому, все ненужные расширения должны быть удалены, ну или в крайнем случае выключены.
Особенно быстрые сайты важны для мобильных — ведь здесь помимо самого сайта роль играет скорость соединения (которая часто ожидает желать лучшего). Не забываем, что в 2019 году Google перевел сайты на Mobile First индексацию — теперь при ранжировании приоритет отдается оценке качества именно мобильной версии.
Систему управления следует настроить так, чтобы на сайте для каждой из страниц генерировались две версии. Первая версия генерируется для всех клиентов, у которых не поддерживаются сервис-воркеры или выключен javascript. Для данной группы ничего не меняется, все как и раньше. Никаких изменений.
Именно поэтому я рекомендую своим клиентам сосредоточиться на мобильных устройствах, а не на ПК. В частности, вы должны сосредоточиться на своем мобильном сайте.
Для анализа скорости загрузки сайта, включая его страницы и элементы, можно воспользоваться несколькими бесплатными онлайн инструментами ниже:
После проверки необязательно спешить выполнять все рекомендации Page Speed Insights. Некоторые из них способны навредить сайту. Например, изменение в JavaScript может существенно повлиять на отображение рабочих элементов. Не нужно гнаться за высокой оценкой сервиса, важнее оптимизировать страницу для удобства посетителей и хорошего ранжирования. Например, скорость загрузки сайта Google Developers для мобильных устройств получила среднюю оценку.
Зачем нужно ускорение
Многие даже не догадываются, сколько проблем можно решить, если сделать сайт быстрым:
Ваш сайт зарабатывает деньги, но вы хотите увеличить доход.
Вы хотите, чтобы ваш бренд, компанию воспринимали с большим доверием.
У вас сайт-СМИ и вы хотите продавать больше рекламы, не теряя аудиторию.
Вашей компании (продукту) не хватает премиальности.
Вы тратите деньги на рекламу, а сайт не продает, много отказов.
Ваш сайт проигрывает сайтам конкурентов в поисковой выдаче.
У вас плохая лояльность клиентов, мало повторных покупок (обращений).
Доля мобильных пользователей у вашего сайта велика, а конверсия очень низкая.
Есть много онлайн-сервисов, которые позволяют проверить быстроту загрузки страниц — достаточно ввести нужный URL. Рассмотрим три самых интересных, на наш взгляд.
Чем выше скорость загрузки сайта, тем лучше для поведенческих факторов и продвижения в поиске. Идеально, если сайт загружается за 1-2 секунды.
Чтобы ускорить сайт, нужно убрать всё лишнее и сфокусироваться на простоте. Используйте меньше тяжёлых графических элементов. Оптимизируйте всё, что можно (вес изображений и страницы, код CSS).
Скорость нужно измерять регулярно. Если она начнёт падать, вы это вовремя заметите и сможете найти причину.
Используйте Gzip- сжатие
Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3–4 раза быстрее.
Использование связки Nginx+Apache
Для увеличения скорости загрузки страниц можно использовать связку Apache и Nginx. Это два самых распространённых веб-сервера в мире, популярность объясняется мощью Apache и скоростью Nginx. Помимо плюсов, у каждого инструмента есть и свои недостатки: например, в Apache есть ограничения памяти сервера, в то время как Nginx, эффективный для статических файлов, нуждается в помощи php-fhm или аналогичных модулей для загрузки динамического контента.
Тем не менее можно и даже нужно объединить два веб-сервера для большей эффективности, используя Nginx, как статический фронтенд и Apache — как бэкенд. Такое решение положительно скажется на скорости загрузки страниц сайта.