Низкой скоростью загрузки сайта не будет доволен никто: ни поисковая система, ни посетители. Не рассчитывайте на терпение читателей. Среди них нет таких, которые будут ждать отображения информации больше двух секунд. В борьбе за качество поисковой выдачи, Google и Яндекс выкидывают из индекса медленные страницы, лишая их шанса хоть как нибудь продвинуться вверх.
Что влияет на быстроту загрузки?
Полезные материалы о скорости загрузки сайта.
С какой скоростью должен загружаться сайт? Какое время полной отрисовки страницы считать нормальным?
Чем меньше время, тем лучше для сайта. Критическое значение, которое нельзя превышать — 2 секунды.
2 две секунды — это значение, при превышении которого страница будет считаться медленной и попадет под фильтры.
В отображении страницы веб-сайта задействованы компьютер пользователя и сервер, на котором лежат файлы сайта. Когда посетитель вводит в строку адрес страницы, начинается обмен между этими двумя машинами:
Компьютер посетителя запрашивает данные.
Сервер загружает код страницы.
Машина читателя запрашивает, а сервер отдает CSS-стили,
... JS-скрипты,
... шрифты,
... изображения.
Тормоза могут возникнуть у любого участника процесса. Хотя, возникновение проблем на сервере более вероятно. Типичные причины задержек:
Сервер медлительный: старое «железо», нехватка оперативки, мощности процессора.
Несовершенная система управления контентом, CMS.
Сервер физически находится далеко от компьютера посетителя. Файлы сайта размещены в киевском дата центре, а компьютер пользователя — на Сахалине.
Несовершенная архитектура страницы. Для ее отображения надо залить на машину читателя много разных файлов: изображений, стилей, скриптов, шрифтов и пр.
Процессы ускорения состоят из ступеней по устранению перечисленных препятствий.
Инструментов для замера скорости много. Самый совершенный и удобный — Google PageSpeed.
Введите в строку адрес площадки и через несколько секунд насладитесь полнотой собранных данных. Они разделены на две вкладки: десктоп и мобильник. Отображаются следующие параметры:
Время получения ответа от сервера.
Время, через которое читатель видит страницу.
Степень оптимизации сайта в части скорости.
Типовые советы по ускорению.
Воспользуйтесь разделом «Как исправить», чтобы увидеть адреса проблемных зон вашей площадки.
Хорошо, если блоки «Скорость» и «Оптимизация» отображены зеленым цветом. Желтый цвет — это признак наличия проблем.
Получите удовольствие от красоты графиков и диаграмм сервиса Pingdom. Этот стиль графического отображения последовательности загрузки файлов и скриптов называется «Водопад».
Самое тяжелое для сервера — это работа с крупными изображениями. Уменьшение их веса приведет к ощутимому снижению времени прорисовки.
Размер изображений.
Для четкого отображения товара в магазине достаточно фотографии с шириной 1500 пикселей. Этого размера достаточно даже для тех движков, в которых установлен скрипт просмотра фотографий с лупой — когда надо показать фактуру ткани или качество швов.
Объем фотографий в kb.
Файлы изображений, которые вы получаете от фотографа не годятся для выкладки на сайт. Сначала их надо сжать. Причем, сжать без потери качества. Пользуйтесь программами Adobe Photoshop, FastStone Image Viewer, XNView — во всех этих приложениях есть опция пакетной обработки. Без особых усилий за короткое время вы обработаете любое количество изображений в автоматическом режиме. От вас потребуется задать настройки обработки пакета: размеры, качество, алгоритм сжатия и др.
Размер превьюшек.
Проверьте, чтобы движок вашего интернет магазина создавал отдельные уменьшенные файлы изображений для предосмотра товара в списках. Этот параметр есть в настройках CMS.
«LaModa» применяет три размера изображений для одного и того же товара:
Превью — 8kb.
Изображение для страницы продукта — 20kb.
Фото для просмотра на увеличителе — 840kb.
Трудно представить, какова была бы скорость загрузки сайта, если бы во всех трех вариантах использовался «исходник», который весит почти один мегабайт.
Google PageSpeed выдает полный список картинок, которые подлежат оптимизации.
Gzip — это серверное приложение для создания сжатых архивов. Она похожа не программу для создания zip-файлов на локальных компьютерах. При работающем Gzip между сервером и машиной пользователя будут передаваться не разрозненные файлы стилей, скриптов и картинок, а заархивированные пакеты gzip гораздо меньшего объема. Их передача будет идти быстрее. Скорость загрузки увеличится.
Gzip включается в настройках сервера. Проверьте этот параметр в панели управления хостингом. Если вы его не нашли, напишите в техническую поддержку и попросите включить сжатие.
Наличие компрессии отображается в параметрах отчета Google. Если его нет, то сервис дает соответствующую рекомендацию.
«Ламода» посчитала лишним сжимать свои файлы.
Когда сайт открывается впервые, это делается дольше, чем все последующие разы. Происходит это потому, что некоторые файлы сохраняются в кеше браузера на компьютере пользователя. Браузер использует загруженные на предыдущей сессии файлы CSS, JS, изображения.
При желании файлы кеша можно стереть нажатием сочетания клавиш в Google Chrome «Ctrl+Alt+Del». Или обновить страницу без применения кеша сочетанием «Ctrl+F5» или «Ctrl+Shift+F5».
Настройку кеширования проведите самостоятельно в файле .htaccess или через панель хостинга настройками Nginx.
Google рекомендует «LaModa» подключить кеширование для некоторых файлов.
Файлы, которые содержат директивы, стили и программные коды тоже можно уменьшить. Для этого удалите лишние или все пробелы, комментарии, пустые строки. Для переменных придумайте более короткие имена. Читать и редактировать их в ручном режиме будет невозможно, но функционал с точки зрения браузера не пострадает. Объем оптимизированных файлов будет ниже.
Для того, чтобы программист мог комфортно продолжать работать, применяйте плагины для CMS. Они отдают серверу минимизированные файлы, а пользователь видит их в первоначальном виде с пробелами, комментариями и пустыми строками.
Браузеры имеют собственное формализованное мнение по поводу очереди загрузки файлов. Они не всегда совпадают с намерениями веб-мастеров. Бывает так, что форма обратной связи, которая на первом этапе не так важна, уже загрузилась, а главный стилевой файл еще нет. В это время страница имеет неприглядный вид и выглядит странно.
Чтобы браузеры загружали файлы в правильно порядке, подключайте их:
CSS — сразу после тега <head>,
JS — перед тегом </body>.
Соблюдая такую последовательность, вы дадите возможность браузеру загрузить страницу со всей ее «красотой», а затем заняться скриптами, обеспечивающими дополнительные функции и интерактив.
Удалите из кода ссылки на дополнения, моды и плагины, которые вы перестали использовать. Часто разработчики забывают подчистить хвосты дополнений, которые попробовали, но решили не применять. Оставляют коды счетчиков, услугами которых уже никто не пользуется. Почаще проводите проверку на наличие подобных артефактов.
Оптимизируйте использование плагинов. Если на разных страницах сайтов нужно организовать «карусель» баннеров, то нет необходимости устанавливать разные плагины. Воспользуйтесь одним и тем же.
Сети доставки контента CDN позволяют справится с расстояниями, которые приходится преодолевать файлам на просторах русскоязычного интернета. Если сервер расположен в Калининграде, а клиентский компьютер в Находке, то распределенная сеть, дублирующая контент и сохраняющая его некоторое время, будет как нельзя кстати.
Разработчики применяют сети распределенного контента двумя путями:
сторонние серверы: Google, Bootstrap и др.
собственные сети. У одной из российских CMS есть плагин для ускорения сайта с помощью CDN.
Сократите число файлов, необходимых браузеру для отображения страницы. Объедините все js-файлы в один и сожмите его. Вместо нескольких обращений браузер сделает всего одно.
Объединяйте файлы со скриптами с помощью плагинов для CMS. Некоторые движки обеспечивают автоматическое слияние программных файлов. Вкупе с кешированием и сокращением избыточных модов, объединение скриптов покажет себя особенно результативно.
Используйте один шрифт на всем сайте во всех разделах, заголовках и простых текстах. Это выглядит красиво и снижает объем загружаемых ресурсов. Ориентируйтесь на передовые технологии и загружайте шрифты только в двух форматах: woff и woff2.
Воспользуйтесь услугами сервиса Google Fonts. Он загружает оптимизированные шрифты и снимает нагрузку с вашего сервера.
Длинные текстовые страницы со множеством мультимедийных вставок, изображениями, списками, таблицами, видеороликами тоже можно сократить. Для этого у каждого движка есть свои средства. Поищите плагины по ключевому слову «Minifier».
Этот пункт будет полезен для тех, кто установил сайт на выделенный сервер. Администратор может изменять его параметры. Обратитесь к нему с просьбой проверить оперативную память, удалить модули, мешающие работе сервера.
Если сервер не выделенный, а виртуальный, подумайте о переходе на более продвинутый тариф, который обеспечивает более высокие характеристики эксплуатации.
Одна из функций системы управления контентом — генерация результирующего html-кода, который передается браузеру для чтения и последующего отображения. Возможно, что некоторые непопулярные CMS конструируют код страницы долго, выполняя избыточные запросы к ненужным файлам и базе данных, применяют отсталые алгоритмы.
На этапе технического проектирования сайта, тщательно подбирайте движок из числа тех, которые положительно зарекомендовали себя за годы службы: MODx, Wordpress, OpenCart и другие.
В ходе эксплуатации сайта, обновляйте движок до последней актуальной версии.
