Как для посетителей, так и разработчиков очень важно, чтобы сайт загружался быстро и корректно отображался на всех устройствах. Даже самый интересный и полезный сайт может лишиться львиной доли трафика по причине низкой скорости загрузки и разных багов. Высокая скорость работы сайта — имидж ресурса и забота о посетителях, а также показатель профессионализма разработчиков. В этой статье вы узнаете, как увеличить скорость страницы, чтобы улучшить удобство для пользователей, повысить коэффициент конверсии и рейтинг в органическом поиске.
Почему скорость сайта важна?
По мере развития технологий и функционала вашего веб-сайта с помощью различных дополнений, плагинов, мультимедийного контента очень важно не упускать из виду его быстродействие. Если ресурс будет работать медленно — многие посетители покинут ваш веб-сайт еще до того, как он отобразится в браузере. Сегодня использование мобильного Интернета превышает трафик настольных пк, скорость страницы становится все более важным показателей и решающим фактором для посетителей.
ИНТЕРЕСНЫЕ ФАКТЫ
Исследования Google показывают, что 53% посещений, скорее всего, будут прекращены, если загрузка страниц длиться более 3 секунд, а среднее время загрузки мобильных сайтов не должно превышать 8 секунд при использовании мобильного интернета. Google оценивает скорость сайтов, как важный фактор ранжирования с 2010 года, а с июля 2018 Google определяет скорость страницы главным фактором ранжирования для мобильного поиска.
Какие требования к скорости сайта
Исходя из многочисленных исследований и требований поисковых систем оптимальное время загрузки страницы составляет 0.5 — 2.2 сек. Высокая скорость работы сайта положительно влияет на конверсию, исследования Wallmart и Mozilla показывают, что при снижении времени загрузки страницы на 1 сек — конверсия возрастает на 15%. Наоборот, если время загрузки превышает 3 сек — показатель отказов увеличивается на 30%. Ускорение сайта даже на 1 сек для высокопосещаемых сайтов в 70% случаев дает отличные результаты:
- увеличение конверсии посетителей;
- увеличение глубины просмотра страниц;
- снижение отказов и ошибок;
- общий рост прибыльности сайта;
- улучшение позиций в поисковых системах.
Как измерить скорость загрузки сайта
Сегодня в сети есть множество онлайн сервисов, которые позволяют быстро определить скорость загрузки вашего сайта или какой-то отдельной страницы, выполнить анализ её содержания, указать на ошибки и варианты оптимизации. Большинство таких сервисов абсолютно бесплатны. Поисковые системы сами заинтересованы в ускорении интернет трафика, так как это значительно экономит общие ресурсы сети и снижает нагрузку на серверы. Вот несколько сервисов, которыми вы можете воспользоваться для проверки сайта:
PageSpeed Insights — бесплатный сервиc тестирования сайтов от компании Google, который анализирует ваши веб-страницы как на мобильных, так и на настольных устройствах и предлагает способы повышения производительности. Этот инструмент оценивает скорость загрузки вашей страницы по шкале и присваивает балы от 0 до 100. Оценка формируется на базе результатов наблюдений за последние 28 дней. Это универсальный общедоступный сервис, его используют подавляющие количество разработчиков.
Pingdom Tools — полностью бесплатный инструмент для анализа скорости загрузки сайта с детальными отчетами по типам данных. С помощью Pingdom можно узнать время загрузки страницы, общее количество запросов к базе данных, выяснить какие именно файлы и процессы создают основную нагрузку на сайт.
GT Metrix — англоязычный инструмент, который используется для получения подробного отчета о производительности сайта, функционирующего на разных платформах. Инструмент позволяет проанализировать быстродействие страниц и создает итоговый отчет, показывая имеющиеся ошибки в работе и предлагая рекомендации по их устранению. Это достаточно специфический сервис с множеством отчетов и подойдет для технически подкованных пользователей.
После того, как вы определили скорость работы Вашего сайта на мобильном и десктопе, увидели ошибки и прочли рекомендации сервисов — следующим шагом нужно провести оптимизацию сайта.
Далее мы остановимся на ключевых факторах, влияющих на скорость загрузки ваших веб-страниц, и о шагах, которые вы можете предпринять, чтобы ускорить загрузку.
ШАГ 1 • Оптимизация структуры сайта
Cокращение кода, удаление лишнего
Зачастую во время развития сайта, его функционал расширяется, появляются новые инструменты и возможности для посетителей. Нередко вместо старых модулей устанавливаются более совершенные. При этом никто не подчищает код и не следит за его актуальностью.
Сайт накапливает «избыточность», многие его функции дублируются, ресурс становится громоздким, а это непременно сказывается на его скорости. Эта проблема со временем становится неизбежной, особенно если за сайтом не закреплен разработчик или контент-менеджер, который следит за правильной его работой и актуальностью всей размещенной информации.
Первым делом обратите внимание на структуру сайта. Если есть лишние или устаревшие разделы, их можно удалить. Также избавьтесь от всех модулей и плагинов, которые не используются. Следите и регулярно обновляйте платформу сайта. Хотя бы раз в полгода проводите анализ сайта и оптимизацию его структуры.
Уменьшение количества запросов к серверу
Более 90% всех сайтов имеют базу данных, которая расположена на сервере и содержит всю информацию и переменные для сайта. Чтобы отобразить информацию на странице браузер отправляет запрос на сервер. Чем больше сайт и богаче его функционал — тем больше запросов нужно отправить браузеру на прорисовки всей страницы.
Можно легко узнать, сколько запросов нужно браузеру на отображение сайта. Для этого откройте сайт, нажмите правой кнопкой мыши в произвольном месте и выберите «Просмотреть код» (1). В открывшемся окне выберите вкладку «Сеть (Network)» (2). Обновите страницу. Внизу справа ви сможете увидеть общее количество запросов к сайту (3).
Если количество запросов к сайту меньше 50 — это хороший показатель, если же превышает 150 — стоит задуматься об из минимизации. Для уменьшения кол-ва HTTP запросов к сайту рекомендуем пересмотреть код сайта, придерживаясь таких правил:
- Объединение файлов — все CSS файлы следует объединить в один большой и выполнить его сжатие. Это относиться также ко всем подключаемым JS скриптам. Эта процедура может осуществляться как вручную, так и с использованием специальных плагинов или инструментов хостинга.
- Уменьшение количества переменных. Нужно пересмотреть код сайта и во всех местах, где запрашивается переменная с базы — просто пропишите её значение непосредственно в самом коде. Например:<div class=“header“><?php echo header(); ?></div>можно заменить на<div class=“header“>Заголовок сайта</div>
- Кеширование страниц. Чтобы браузер не прорисовывал каждый раз страницы сайта заново, можно кэшировать информацию. Тогда для посетителя будет отображаться сделанный заранее точный «снимок» нужной ему страницы. Это существенно ускорит работу сайта в целом. Такое кэширование страниц можно настроить с помощью инструментов хостинга или специальных плагинов. Например, если Ваш сайт сделан на WordPress — рекомендуем использовать плагин WP Super Cache.
Чтобы выполнить эффективную минимизацию количества запросов лучше обратиться к профессионалам, так как для выполнения этих работ понадобится должный уровень квалификации и знаний.
ШАГ 2 • Минимизация JS и CSS файлов
В зависимости от структуры сайта и платформы, на которой он сделан, вес всех JS и CSS файлов составляет от 60 до 80% всех загружаемых ресурсов. Очень важно удалить с файлов стилей избыточность и минимизировать их вес. Заказав современный сайт у профессиональной студии, можно быть уверенным, что код сайта оптимален, а набор файлов правильно структурирован. Но как быть, если сайт сделан давно, непрофессионально или с применением стандартных платформ. В этом случае можно воспользоваться такими онлайн сервисами от компании Dan’s Tools (предварительно убедитесь, что у вас есть FTP доступ к корневому каталогу для замены файлов):
- CSS Beautify — отличный сервис, который красиво отформатирует CSS код и уберет дубли строк.
- CSS Minify — отформатированный код удобно сжать с помощью этого сервиса, который преобразует все стили в одну строку, удалив всё лишнее.
- Javascript Minify — аналогичный сервис для минимизации различных скриптов и JS файлов.
Алгоритм сжатия прост — достаточно скачать через FTP нужные файлы, скопировать их код и минимизировать с помощью указанных сервисов. Далее замените код в файлах и загрузите их обратно на сервер, вместо старых. Такая процедура не замет много времени.
Если ваш сайт сделан на платформе WordPress — рекомендуем воспользоваться проверенным плагином Autoptimize — это бесплатный плагин с простыми настройками на одной странице, который обнаружит все CSS и JS файлы сайта и оптимизирует их должным образом. К тому же плагин имеет инструменты для сжатия HTML кода и добавления свойства Lazyload для всех изображений сайта.
Асинхронная и отложенная загрузка JS
Асинхронный JavaScript. Атрибут async можно добавить к любому тегу скрипта, указывающему на внешний файл скрипта. Это говорит браузеру продолжать синтаксический анализ HTML-документа, пока скрипт загружается. Как только скрипт будет загружен, он будет выполнен.
Отложенный JavaScript. Атрибут defer похож на асинхронный, но он говорит браузеру не выполнять внешний скрипт, пока HTML-документ не будет проанализирован. Этот метод удобен для загрузки и выполнения скриптов, которые не обязательны для первоначального рендеринга страницы.
ШАГ 3 • Оптимизация изображений
Изображения с высоким разрешением являются одним из основных факторов медленной загрузки веб-страниц. Есть несколько способов уменьшить трение страницы с большим количеством изображений.
1. Используйте оптимальный формат для каждого типа изображения. Для растровых изображений, таких как фотографии, используйте формат JPG. Небольшое сжатие JPG может значительно снизить его вес, иногда снижение качества на 10% совсем неразличимо для глаза, но может вдвое уменьшить размер изображения. Для векторных изображений, таких как иллюстрации, значки и логотипы, используйте форматы SVG или PNG.
2. Уменьшите размер изображения до минимально необходимого значения. В силу огромного скачка в качестве и разрешении получаемых снимков, публиковать их на сайте без предварительной обработки просто кощунственно. Такие фото будут занимать много места на сервере и существенно снизят скорость загрузки сайта. Например, если область страницы имеет ограничение по ширине, имеет смысл на столько же уменьшить и саму ширину изображения. Таким образом, вы устраните излишнюю избыточность.
3. Экспериментируйте с новыми форматами. Сейчас набирает популярность использование формата WEBP для интернет графики. Этот формат по степени компрессии на 40% лучше JPG и на 250% PNG. Стоит обратить на него внимание. Поддержка изображений формата WEBP разными браузерами ограничена, не все платформы и CMS имеют инструменты для работы с этим форматом, потому следует быть осторожным и перед публикацией перепроверять, как отображается Ваш сайт на разных устройствах и браузерах.
4. Настройте ленивую загрузку изображений. Свойство loading=“lazy“ подсказывает браузеру, что загружать это изображение нужно только тогда, когда оно располагается в видимой области экрана. Таким образом, изображения не загружаются все сразу, а прорисовываются постепенно при просмотре сайта. Такой простой инструмент позволит значительно ускорить загрузку сайта. Свойство “lazy“ можно использовать как для изображений, так и для iframe вставок (например, google карты или видео с Youtube).
Используйте кеширование браузера
Когда посетитель просматривает ваш веб-сайт в первый раз, все ресурсы, включая изображения, CSS, JavaScript и HTML, должны быть загружены с веб-сервера в папку кэша на их локальном компьютере, чтобы браузер мог отображать страницы.
Когда вы реализуете кэширование браузера, в следующий раз, когда посетитель просматривает ваш веб-сайт, браузер может получить доступ к ресурсам, уже загруженным из предыдущего сеанса, вместо того, чтобы снова получать их с сервера.
ШАГ 4 • Оптимизация шрифтов
Использование оригинальных шрифтов на сайте может выделить компанию и подчеркнуть индивидуальность стиля. Некоторые шрифты настолько узнаваемы, что становятся прямым воплощением самого бренда. Внедрять разные шрифты на сайте нужно грамотно. Чтобы шрифт корректно работал на сайте и не перегружал его, нужно придерживаться двух простых правил.
1. Перенесите все шрифты на локальный сервер. Файлы шрифтов, которые физически расположены на одном сервере с сайтом, загружаются значительно быстрее. Для этого рекомендуем воспользоваться сервисом mranftl.com. Сервис позволяет скачать все файлы шрифта по его названию в разных форматах и сформировать CSS код для вставки на сайт. Остается только загрузить файлы в корневой каталог и обновить стили.
2. Используйте свойство “font-display: swap“. Значение “swap“ указывает браузеру, что изначально можно отобразить подменный стандартный шрифт, а уже после полной загрузки всех файлов — заменить на нужный. Такой алгоритм приветствуется Google Chrom, Opera, Firefox и многими мобильными браузерами.
ШАГ 5 • Настройте GZIP сжатие
Сжатие файлов необходимо для ускорения интернет страниц. Работает этот алгоритм таким образом: во время загрузки страницы она сжимается на сервере и передается в браузер пользователю уже в сжатом виде. После чего браузер распаковывает страницу и отображает посетителю.
Такое сжатие показывает хорошие результаты для текстовых html страниц, объем передаваемой информации удается уменьшить вдвое. Стоит учесть, что сжатие файлов использует значительные ресурсы сервера, поэтому рекомендовано сжимать только те файлы, которые в результате значительно уменьшат его размер. Если потребление ресурсов будет превышено, то отображения страницы вообще не произойдет, и пользователь увидит ошибку. Активировать GZIP сжатие Вы можете самостоятельно в настройках хостинга или обратившись в техническую поддержку.
ШАГ 6 • Используйте кэширование браузера
Когда посетитель просматривает ваш веб-сайт в первый раз, все ресурсы, включая изображения, CSS, JavaScript и HTML, должны быть загружены с веб-сервера в папку кэша на их локальном компьютере, чтобы браузер мог отображать страницы.
Когда вы реализуете кэширование браузера, в следующий раз, когда посетитель просматривает ваш веб-сайт, браузер может получить доступ к ресурсам, уже загруженным из предыдущего сеанса, вместо того, чтобы снова получать их с сервера.
Если Ваш сайт обновляется не часто — рекомендуем устанавливать период кэширования файлов от 180 дней. Также можно настроить автоматическую очистку кэша после каждого обновления сайта. Такое кэширование можно включить в настройках сервера и задать все необходимые параметры.
Выводы
Быстрая работа сайта — очень важна. Есть много способов ускорить загрузку, независимо от его платформы и структуры. Такую работу лучше доверить профессиональной компании. Если у вас есть сайт, вы хотите обновить дизайн, доработать функционал и максимально ускорить его работу — обратитесь в Студию WEB24 (см. контакты). Мы бесплатно выполним анализ вашего сайта, определим что можно улучшить и оптимизировать и максимально качественно выполним все работы.
