Медленные сайты неудобны для пользователей, плохо ранжируются поисковыми алгоритмами и портят репутацию бренда. На скорость загрузки сайта влияет много факторов: от качества изображений в лендинге до кэширования и HTTPS-запросов.
В статье разберем 8 проблем, почему ресурс медленно грузится, расскажем, как их исправить, и при помощи каких сервисов проверять скорость загрузки.
Навигация по статье
Зачем увеличивать скорость загрузки сайта
Почему сайт работает медленно и как это исправить
Проблема №1: слишком много HTTP-запросов
Проблема №2: CSS-файлы в конце страницы
Проблема №3: изображения слишком высокого качества
Проблема №4: изображения в тяжелых форматах
Проблема №5: не подключено CDN-распределение
Проблема №6: в файлах много ненужного
Проблема №8: не настроено Gzip-сжатие
Зачем увеличивать скорость загрузки сайта
Потому что пользователи скорее уйдут к конкурентам, чем будут ждать загрузку сайта дольше 3 секунд. Сайтов с полезной информацией слишком много, поэтому нужно сразу завладеть вниманием читателя, показать юзабилити и скорость загрузки.
Вторая причина — медленные сайты хуже индексируются в поисковой выдаче, а значит собирают меньше трафика.
И последнее — скорость загрузки влияет на восприятие сайта. Компания или бренд, который при первом онлайн-знакомстве медленно работает, выглядит непрофессионально, к ней не хочется возвращаться и строить долгосрочные отношения.
Почему сайт работает медленно и как это исправить
Разберем причины, по которым сайт может грузиться плохо, и способы их устранения.
Проблема №1: слишком много HTTP-запросов
Чтобы отобразить любой элемент на сайте (картинку, текст, видео или анимацию), браузер по каждому из них отправляет запрос через HTTP-протокол. Спецификация HTTP/1.1 советует, чтобы с одного браузера одновременно грузилось не больше 2-х блоков веб-страницы с одного хоста. Если запросов много, сайт грузится медленно.
Решение: уменьшить количество http-запросов. Для этого можно:
- объединить несколько css- или js-файлов в один;
- использовать Inline-картинки в таблицах стилей — количество запросов к серверу уменьшается, а размер HTML остается прежним;
- использовать css-спрайты — изображение, содержащее в себе несколько маленьких изображений, которые вырезаются для определенного элемента страницы через свойства background-image и background-position.
Проблема №2: CSS-файлы в конце страницы
Когда CSS-файлы располагаются в конце, страница в браузере отображается не постепенно, а отрывочно. Причина в том, что браузеры редко перерисовывают элементы, у которых после загрузки меняется стиль.
Решение: разместить CSS-файлы в разделе HEAD. Тогда блоки будут отображаться последовательно и логично: сначала лого, заголовок, потом описание, потом навигация и основная информация.
Проблема №3: изображения слишком высокого качества
Изображения Full HD могут грузиться в 2-3 раза дольше картинок в качестве 1280*960 ppx. При этом ни на десктопах, ни на мобилках разница между двумя иллюстрациями будет не видна, а многие сайты вовсе не требуют такого уровня детализации. Непрогрузившиеся картинки выглядят «дырками» на сайте и сильно раздражают.
Решение: протестировать разные форматы качества и сжать изображения.
Проблема №4: изображения в тяжелых форматах
PNG-формат весит существенно меньше, чем GIF или JPEG, поэтому их используют, чтобы сайт грузился быстрее. Мелкие детали, например, иконки можно отрисовать прямо в браузере в формате SVG и это сделает страницу еще легче. Плюс SVG также в том, что даже с весом 1 КБ он хорошо отображается на экране, и не размазывается в Full HD.
Решение: проверить, какие форматы изображений поддерживаются разными браузерами, пересмотреть изображения, лого, гифки на сайте и выбрать более легкие варианты.
Проблема №5: не подключено CDN-распределение
С CDN-технологией пользователи адресуются к географически ближайшему кэширующему сервису в составе СDN, поэтому изображения, JavaScript и CSS-файлы грузятся быстрее. Пример: запрос пользователя из Владивостока отправляется не в Петербург, а на владивостокский сервер, поэтому загрузка страницы сокращается с нескольких минут до пары секунд.
Решение: подключить CDN передачу данных.
Проблема №6: в файлах много ненужного
В коде может быть много ненужных знаков: комментарии, пробелы, строки, переносы, символы табуляции. Они увеличивают объем файла и тормозят загрузку сайта.
Решение: сжать и удалить все ненужное из CSS-кода, файлов стилей и HTML-страниц. Вот сервисы, которые могут в этом помочь:
- CSS Compressor — позволяет сжать CSS, найти и удалить неиспользуемые классов и ID в CSS;
- CSS Optimizer — можно оптимизировать код, если ввести его в окно на сайте или указать URL-ссылку страницы;
- PhpInsider — простой сервис, который работает по модели Monte Ohrt.
Проблема №7: не настроен кэш
В первое посещение пользователя браузер скачивает все CSS и JavaScript, графику и флэш-элементы. При повторном заходе на сайт браузер может не обращаться опять на сайт, а достать информацию из собственного кэша — тогда скорость загрузки будет меньше.
Решение: правильно выставить HTTP-заголовок Expires и добавить в файл .htaccess в корневой папке сайта модуль mod_expires. Там в строках years, months, weeks, days, hours, minutes и seconds задается время хранения кэша, его лучше задать на несколько месяцев вперед.
Проблема №8: не настроено Gzip-сжатие
Технология Gzip так сжимает файлы, что их можно полностью восстановить при распаковке без потерь. Есть много разных форматов сжатия данных, но этот вариант предлагает оптимальный вариант между скоростью и степенью сжатия. Также он поддерживается во многих браузерах и легко имплементируется.
Решение: прописать Gzip-сжатие в файле .htaccess.
Проблема №9: используются редиректы
Когда сайт переехал с одной адреса на другой, пользователю сначала показывается 301-й или 302-й редирект, а только потом нужная страница. Так скорость загрузки может достигать 20-40 секунд, чтоб точно не нужно вебмастеру.
Решение: просканировать сайт краулером, найти сайты, на которых остался старый URL, и заменить его на нужный адрес. Чаще всего редиректы находятся в футере, хедере, в сайтбаре-меню и в самом контенте.
Полезные сервисы для проверки скорости загрузки сайта
Можно узнать фактическую производительность сайта, найти проблемы с производительностью на десктопных и мобильных устройствах, узнать рекомендации в отношении контента, метатегов и оптимизации под смартфоны.
Сервис с не самым удобным пользовательским интерфейсом, но с большим техническим функционалом. Можно сравнить скорость загрузки сразу нескольких сайтов, посмотреть видеоотчет по загрузке с секундомером, узнать детали протоколов передачи данных DNS, TCP, TLS.
В программе можно понять, как будет меняться скорость загрузки страниц при растущем трафике или в разных странах. Доступны разные виды тестирования: регрессионное, сквозное, нагрузочное, тестирование инфраструктуры.
Быстрый сайт решает сразу две проблемы: становится полезным и удобным для аудитории и больше нравится поисковым алгоритмам. Благодаря этому можно получать больше трафика на сайт и больше дохода от монетизации сайта, например push-уведомлениями.
BroPush — партнерская программа, с которой вебмастера могут зарабатывать по всему миру. С ПП можно монетизировать сайты любой тематики и посещаемостью, получать доход даже от пользователей, которые не подписались на рассылку. Партнеры программы получают процент от прибыли по модели RevShare вплоть до 95%, оперативно решают проблемы с технической поддержкой и заранее знают свою прибыль благодаря калькулятору доходов.
No Comment! Be the first one.