Скорость загрузки — это один из факторов ранжирования сайта поисковыми системами. Некоторые медленные площадки попадают в топ по низкочастотным запросам с нулевой конкуренцией. Но это, скорее, исключение, чем правило. По средне- и высокочастотным фразам медленным сайтам продвинуться на первые строчки не получится — слишком высоки ставки.
Скорость работы страницы является параметром ее субъективной оценки посетителями. Если на загрузку уходит больше 2 секунд, клиент начинает раздражаться и возвращается в поисковую выдачу. Такое поведение рассматривается поисковиками, как негативное.
При медленной работе не всегда успевают загрузиться скрипты счетчиков, обычно расположенные внизу страницы. Очередь до них доходит в последнюю очередь. Это значит, что метрики не фиксируют факт неполной загрузки и отказа читателя от просмотра. Вебмастер остается в неведении о проблеме, а поисковые системы знают о ней и пессимизируют сайт.
При низкой скорости загрузки страницы:
Она понижается в поисковой выдаче.
Возникают негативные поведенческие факторы.
Пользователи остаются недовольными.
Сайт — это массив файлов, выполняющих разную работу, связанных между собой ссылками, — тексты, изображения, html, php, видео и др. Эти файлы располагаются на хостинге, находящемся от пользователей в сотнях и тысячах километров. Для того, чтобы отобразить одну веб-страницу, требуется загрузить и десятки файлов. Чем меньше их объем — тем выше скорость работы системы. На счету находится каждый байт информации.
В момент клика по ссылке, браузер связывается с сервером, на котором хранятся файлы сайта. Происходит передача кода страницы со всеми данными, на которые в коде имеются ссылки: картинки, видео, скрипты и пр. Программа интернет-обозреватель — браузер — интерпретирует полученную информацию в понятную пользователю картинку. Страница отображается в виде, задуманном разработчиками.
Страница аквапарка “Calipso” изобилует анимацией, большими изображениями, интерактивом, но загружается быстро.
Время, которое тратится на процесс от нажатия на ссылку, до полного отображения, называется скоростью загрузки.
Для пользователя остается тайной объем данных, передаваемых на его компьютер, количество и очередность выполнения процессов их преобразования. Он оценивает картину субъективно: если окно браузера остается пустым дольше двух секунд, значит с сайтом что-то не так. Надо поискать другой или попробовать перезагрузить страницу.
Разберем детально, что оказывает влияние на скорость.
1. Объем сайта
Логика проста. Чем меньше объем, тем выше скорость. Задача по ускорению работы площадки обычно сводится к уменьшению каждого ее элемента.
Львиная доля всего объема — 96% — приходится на изображения. Именно они являются визуальной основой современных веб-страниц. Самая «тяжелая» картинка загружается в последнюю очередь. Окончание ее загрузки является финишем отображения всей страницы.
Оптимизируйте фотографии вашего сайта. Сделать это можно разными способами
Уменьшение физического размера фото. Предположим, вы загрузили на сайт картинку размером 8000Х5600 px. На сайте она отображается в видимых границах 600Х400 пикселей. Разумно привести размер исходного изображения к тому, которое необходимо для показа, чтобы не тратить время на закачку огромной картинки и последующее ее уменьшение. Разница в объемах будет разительная: 8000Х5600 px — 5 мегабайт; 600Х400 px — 0,04 мегабайт. Отличие больше, чем в 100 раз.
Занижение качества изображения. Снижение качества изображения, незаметное для человеческого глаза, уменьшает объем файла в 4 раза.
С помощью программы просмотра и обработки фотографий “FastStone Image Viewer” удалось незаметно уменьшить качество изображения и понизить объем файла в 3.5 раза.
Уменьшение физического размера с оптимизацией качества. Это симбиоз двух первых методов. Улучшите изображения на сайте. Как это сделать мы расскажем ниже. Это дает существенный прирост в скорости загрузки.
2. Скорость пользовательского интернета
На скорость интернета у конечного пользователя веб-мастер может влиять опосредованно — с помощью нескольких версий сайта, рассчитанных на разные условия работы. Скорость работы мобильного интернета очевидно меньше, чем проводного.
Создайте разные версии сайта для отображения на мобильниках. Здесь есть три метода:
Используйте турбо-страницы от Яндекс — текстовые версии ваших страниц, расположенные на сервере компании.
3. Качество хостинга
Выберите для вашего сайта такого хостинг-провайдера, который обеспечивает оптимальный баланс между величиной абонентской платы и скоростью передачи данных на сервере.
Многие хостеры уменьшают скорость на младших тарифах. Внимательно читайте условия ваших пакетов.
Можно потратить много времени и сил, для того чтобы найти «своего» хостера, который устраивает вас по всем параметрам.
Экспериментируйте, меняйте тарифы и поставщиков услуг. Общайтесь со службой поддержки, пытайтесь договориться. Если не получается найти компромисс — уходите к конкурентам. Выбор велик.
Это полностью автоматический способ. На некоторых системах обработки контента такой функционал идет «в коробочной версии». Другие CMS можно дополнить с помощью плагинов. С пользовательской точки зрения это выглядит привлекательно. Вы загружаете на сайт любые изображения, не задумываясь об их качестве, размере и объеме. Встроенные программные средства приводят картинку к заданным параметрам автоматически без вашего участия.
С помощью плагина для “Wordpress” “TinyPNG / TinyJPG” бесплатно сжимайте любые изображения до заданного размера.
2. Ручное уменьшение фото
С помощью FTP-клиента загрузите каталоги вашего сайта, содержащие изображения. Уменьшите их с помощью онлайн-сервисов или специальных приложений. Загрузите оптимизированные файлы обратно на сайт. Впоследствии, перед публикацией статьи, баннера или галереи, заранее приводите картинки в норму.
Считается, что изображение любого физического размера, загруженное на веб-сайт, не должно быть «тяжелее» 100 килобайт.
Используйте для преобразования фото известные программные продукты:
«Adobe Photoshop» — платный продукт с безграничными возможностями по оптимизацию и редактированию фотографий любых форматов.
«FastStone Image Viewer» — бесплатный просмотрщик медиафайлов с функцией пакетного редактирования и переименования графических файлов. Установите настройки пакетной обработки один раз и пользуйтесь ими повседневно.
«XnView» — бесплатный пакет для просмотра и редактирования файлов. Читает, отображает и редактирует 500 различных графических, видео, аудио расширений. Дополняйте программу бесплатными плагинами, пользуйтесь пакетным режимом, конвертируйте файлы из одного формата в другой.
«IrfanView» — оригинальная бесплатная графическая программа, в которой оперативно применяются любые новые методы обработки графики. Приложение не имеет проводника файлов и предустановленного русского языка, но с остальными функциями справляется на отлично. Русскую локализацию скачайте и установите с официального сайта.
Обратитесь к онлайн сервисам:
«ILoveImg» — бесплатный онлайн сервис обработки графических файлов. Пользуйтесь пакетной обработкой изображений. В отличие от настольных программ, где это делается в один клик, для того чтобы изменить размер и сжать файл, надо дважды загружать все файлы в разные разделы сервиса. Поддерживает загрузку файлов с локального компьютера, Google Диска и сервиса «DropBox». Сервис предоставляет следующие услуги: сжатие изображений, изменение размеров, обрезка картинок, преобразование форматов, простой редактор, наложение водяного знака, генератор мемов, поворот.
«CompressJpeg» — с помощью этого бесплатного инструмента сжимайте графические файлы. После загрузки картинок в интерфейс сервиса, он показывает на сколько процентов можно уменьшить файл без видимой потери качества.
Попросите разработчика настроить «ленивую» загрузку страниц: загружается только видимая часть страницы, а остальные элементы закачиваются по мере прокрутки сайта вниз. Во время загрузки модулей применяются разные визуальные эффекты. Выглядит все фантасмагорично, лениво и неповоротливо. Хотя, общаться с таким сайтом приятно и интересно.
Как проверить скорость сайта?
Проверяйте скорость загрузки веб-страницы с помощью онлайн-сервисов.
Проверка скорости от Google. Просканируйте ваш сайт бесплатно с помощью эмулятора интернет-браузера. Отчет подразделяется на два раздела: десктоп и мобильный. Оценочные данные дополняются рекомендациями по улучшению показателей и готовыми оптимизированными ресурсами, которые можно загрузить на сайт мгновенно.
«Pingdom». Вместе с отчетом по скорости, сервис выдает много полезной рекомендательной и справочной информации по улучшению работы конкретно вашего сайта. Для проверки загружаются несколько страниц, а не одна, как в случае с сервисом от Google. Результаты и рекомендации после каждого теста сохраняются на отдельной странице с уникальным адресом. Полная версия инструмента платная.
«Gtmetrix». Бесплатный инструмент для проверки скорости загрузки страницы. В отчете приводится графическая оценка всех составляющих веб-сайта: JavaScript, html, css, большие файлы, изображения, «тяжелые» запросы к сторонним сервисам.
Как уменьшить время загрузки сайта?
Ответ на этот вопрос дадут сервисы по измерению скорости загрузки, описанные в предыдущем разделе:
