Почему скорость сайта важна?
Нет ничего неприятнее, чем медленный сайт. Это плохо не только для конечных пользователей, но и для владельцев бизнеса. Опросы показывают, что 25% посетителей готовы покинуть веб-сайт, который грузится более 4 секунд. При этом 47% покупателей ждут, что интернет-магазин загрузится за 2 секунды.
Независимо от того, являетесь ли вы фриланс фотографом, демонстрирующим миру свои шедевры, начинающим блогером, который хочет донести свой голос до людей, или домохозяйкой, продающей самоделки онлайн — жизненно важно оптимизировать веб-сайт.
Один из ключевых факторов, которые делают сайт эффективным — скорость загрузки.
Ускорение загрузки — это «волшебная таблетка», которая благотворно повлияет на трафик, просмотры страниц, конверсии, продажи и репутацию. Ускоряя свой веб-сайт, вы дарите пользователям позитивный опыт, превращая их в благодарных и лояльных клиентов. А зачем еще мы работаем?
Скорость загрузки сайта важна для SEO. Поисковые системы не любят тратить ресурсы и драгоценное время своих роботов на открытие тормозящих страниц, поэтому быстрые веб-сайты ранжируются выше. Достоверно известно, что и скорость, и вытекающий отсюда пользовательский опыт являются существенными факторами ранжирования Яндекс и Google.
Как проверить скорость загрузки сайта?
В Интернете предлагается масса инструментов для проверки скорости сайта:
- Стандартный инструмент Google PageSpeed Insights, который отличается простотой использования и надежностью результатов. Все, что нужно сделать – это ввести URL вашего веб-сайта и получить результат с подробными рекомендациями по улучшению производительности.
- Pingdom — также полезный онлайн-инструмент, который проверяет скорость сайта, оценивает производительность и выдает полезные советы. Pingdom отслеживает историю работы, поэтому вебмастер может ознакомиться с любыми изменениями производительности.
- YSlow — это возможность отслеживать проблемы с помощью бесплатного расширения для браузера. YSlow содержит богатый функционал и доступен на всех популярных браузерах.
15 советов по ускорению загрузки сайта
Существует десятки способов оптимизации сайта, но сегодня мы решили сосредоточить внимание на самых простых, доступных для новичков и эффективных в долгосрочной перспективе.
Перейдите на выделенный хостинг
Многие вебмастера, создающие первый веб-сайт, выбирают дешевый виртуальный хостинг, при котором несколько сайтов соседствуют на одной физической машине. С течением временем они предоставляют все больше контента, проекты расширяются, а работа в конечном итоге замедляется.
Если это ваш случай, лучшим вариантом будет переход на полноценный выделенный хостинг.
Конечно, предоставление отдельной машины потребует дополнительных расходов, но взамен вы получите скорость и стабильность работы вашего веб-сайта. Больше не нужно делиться ОЗУ, процессором, пропускной способностью или чем-то еще, поскольку все ресурсы выделяются для вас.
Настройте браузерное кеширование
Компьютерный гений и по совместительству специалист по скорости Microsoft Гарри Шам утверждает, что 0,25 секунды разницы в загрузке страницы — быстрее или медленнее — это магическое число, определяющее конкурентные преимущества в электронной коммерции.
Включение браузерного кеширования может значительно увеличить скорость сайта и подарить клиентам положительный пользовательский опыт. Кеширование относится к процессу хранения статических файлов, таких как HTML-документы, мультимедийные файлы, изображения, CSS и JavaScript.
Суть кеширования состоит в том, что при первом посещении веб-сайта объемные файлы автоматически загружаются и хранятся на жестком диске в кеше (временное хранилище). Таким образом, при следующем визите браузер загрузит веб-страницу быстро, без отправки многочисленных HTTP-запросов.
Однако кеширование работает только при повторных визитах, поскольку у новых посетителей нет кешированной и сохраненной на диске версии страниц. Но при повторных посещениях включение кеширования может дать ускорение загрузки сайта примерно с 2,5 до 1 секунды.
В зависимости от движка (системы управления контентом) существуют разные способы включения кеширования. Для CMS 1С-Битрикс: Управление сайтом вебмастер может включить автокеширование ресурсоемких элементов буквально нажатием одной кнопки в админке.
Включите Gzip компрессию
Если вы когда-либо сжимали файлы на компьютере в виде ZIP-архивов, то понимаете принцип действия Gzip компрессии. Это лучший метод сжатия, который позволяет существенно минимизировать HTTP-запросы и сократить время отклика – иногда на целых 70%!
Включив Gzip компрессию, вы автоматически сожмете файлы в ZIP-архив. Высокая пропускная способность будет сохранена, а скорость загрузки сайта резко возрастет. Теперь, когда пользователь переходит на веб-страницу, сжатые файлы распаковываются, открывая доступ к контенту.
Gzip компрессия включается с помощью плагина для CMS, но можно реализовать сжатие вручную. Это делается добавлением специального кода сжатия JavaScript, HTML, CSS или XML в файл .htaccess:
Аналогичным образом через .htaccess можно сжимать файлы с другими расширениями.
Удалите ненужные плагины
Каждый плагин требует ресурсов. Чем больше ресурсов потребляется, тем медленнее работает веб-сайт. Если вы не уверены, что польза от дополнительных функций перекрывает убытки от снижения скорости, технических сбоев и уязвимости сайта, отключайте ненужные плагины как можно скорее.
Определить влияние каждого плагина на скорость можно экспериментально: выборочно отключайте все лишнее, оценивая производительность. Существуют также диагностические плагины, такие как P3 (Plugin Performance Profiler) для WordPress — они сами подскажут вам решение.
Удаляя ненужные плагины, вы можете значительно сократить время загрузки страницы и ускорить работу. Однако вы должны понимать, что это не просто вопрос количества. У вас может быть 50 плагинов и все еще более быстрый веб-сайт, чем тот, где установлено 10 плагинов. Вопрос в ресурсоемкости.
Следует избегать лишних «примочек», которые используют кучу скриптов и стилей, выполняют множество удаленных запросов и активно обращаются к базе данных. Конечно, плагины способствуют функциональности вашего сайта, однако важно соблюдать хрупкий баланс.
Сведите к минимуму HTTP-запросы
Скорость сайта может упасть из-за слишком большого количества HTTP-запросов. Когда пользователи заходят на ваш сайт, они запрашивают определенные файлы, в том числе HTML, файлы CSS и JavaScript. Чем больше запрашиваемых файлов, тем больше HTTP-запросов.
Есть несколько отличных способов минимизировать HTTP-запросы:
- Объединяйте CSS, JS-скрипты и файлы HTML
- Используйте CSS вместо изображений, где это возможно
- Урежьте количество элементов на каждой веб-странице
- Установите плагин для кеширования файлов
- Сократите перенаправления
Используйте постоянное HTTP-соединение
Когда веб-сервер получает HTTP-запрос от посетителя, браузер запрашивает у сервера разрешение на загрузку файла. Это делается для каждого файла отдельно. Соответственно для быстрой загрузки сайта нужна высокая пропускная способность, много памяти и вычислительных мощностей.
Вы можете сделать свой сайт быстрее, включив постоянное HTTP-соединение (HTTP Keep-Alive). Технология оставляет одно ТСР-соединение для отправки множества запросов вместо установки повторных соединений при запросе каждого файла. Это простой и очень эффективный способ ускорить загрузку сайта.
Минимизируйте файлы JavaScript и CSS
Минимизация кода, в том числе файлов JavaScript и CSS — важный пункт оптимизации сайта. Если поместить все файлы JavaScript в один JS-файл, а все файлы CSS в один CSS-файл, вы сокращаете число запрашиваемых объектов и количество HTTP-запросов в целом.
Есть много инструментов для минимизации, в том числе бесплатное РНР-приложение Minify или чрезвычайно простой и быстрый плагин WillPeavy для минимизации HTML, CSS и JavaScript.
В отличие от бесплатных движков вроде WordPress, система управления контентом 1С-Битрикс: Управление сайтом не требует установки плагина — она уже снабжена функцией сжатия и объединения JavaScript и CSS (ищите «Настройки главного модуля» в админке).
Оптимизируйте изображения на сайте
Если изображения на сайте не оптимизированы, они будут поедать много ресурсов и загружаться непростительно долго. Если вы новичок в индустрии и недавно запустили свой первый проект, обратите внимание на формат и размер изображений — здесь кроются большие возможности по ускорению сайта.
Не переживайте — современные CMS предлагают широкий выбор инструментов для оптимизации изображений формата PNG, JPG без потери качества. Так, для 1С-Битрикс: Управление сайтом можно загрузить специальный модуль сжатия растровых картинок без снижения качества.
Для WordPress попробуйте WP Smush, для других CMS существуют свои проверенные плагины (пользователи Drupal или Joomla рекомендуют Kraken). Какой бы вариант оптимизации вы ни выбрали, сжатие изображений приведет к уменьшению веса страниц, ускорению загрузки и улучшению поведенческих факторов и конверсий.
Кроме того, рассмотрите использование CSS-спрайтов — это файлы, которые вмещают все ваши изображения. Спрайты существенно ускорят загрузку, ведь теперь вместо нескольких обращений за каждой картинкой достаточно передать единственный файл. Более того, если помещенные в CSS-спрайт изображения имеют близкую палитру, удастся немного сэкономить на размере.
Когда оптимизируете изображения, помимо их размера обращайте внимание на формат, указанный в атрибуте src. Рекомендуется придерживаться формата JPEG. Хотя PNG также хорош, он не полностью поддерживается некоторыми устаревшими браузерами.
Измените шаблон веб-сайта
Шаблон веб-сайта может повлиять на скорость работы. Независимо от того, насколько хороша конфигурация сервера, если шаблон слишком сложный и тяжелый, сайт будет загружаться медленно. Это далеко не редкость, особенно для пользователей WordPress. Подумайте над тем, чтобы изменить шаблон с оглядкой на производительность, а не только на эстетику.
Используйте CDN для ускорения загрузки
CDN (сеть распределения контента) представляет собой сеть из нескольких серверов по всему миру, которые доставляют веб-контент пользователям в соответствии с географическим положением.
Принцип действия заключается в том, что при запросе на загрузку статических файлов CDN будет использовать сервер, расположенный ближе всего к пользователю.
CDN обеспечивает эффективное распределение нагрузки и ускоряет сайт за счет CSS и JavaScript, изображений, видео, PDF-файлов и другие типов неизменяемого (статического) контента.
Использование CDN может быть очень дорогостоящим, но дает коммерческим сайтам неоспоримые преимущества. Если у вас большой веб-сайт и много посетителей, CDN — это ваш путь.
Кстати, система 1С-Битрикс: Управление сайтом стала первой в России CMS, получившей собственную интегрированную на уровне движка CDN. Для активации пользователю достаточно установить нужную галочку в настойках облачных сервисов Битрикс и сохранить изменения.
Ограничьте внешние скрипты
Любые внешние скрипты, которые вы добавляете на веб-сайт в виде кодов JavaScript, каждый раз инициируют HTTP-запросы при загрузке страниц. Как вы уже знаете, это замедляет сайт.
Среди внешних скриптов могут быть всплывающие окна, комментарии, внешние шрифты, сервисы веб-аналитики, кнопки социальных сетей и так далее. Безусловно, большинство из них выполняют серьезную работу, и их нельзя просто отключить. Чтобы ускорить сайт, уберите самые «тяжелые».
Отфильтровать прожорливые скрипты поможет онлайн-сервис Pingdom.
Такой же негативный эффект на загрузку оказывают видео и мультимедийные файлы со сторонних ресурсов. Убедитесь, что вы запрашиваете файлы только из быстрых и надежных источников!
Почините битые ссылки
Битые ссылки в контенте не могут замедлить работу, зато могут негативной повлиять на пользовательский интерфейс. А вот неработающие ссылки в JavaScript, CSS и URL изображений способны замедлить загрузку. Периодически ищите их и исправляйте все, что обнаружили.
Битые ссылки чаще всего встречаются в исходных файлах изображений. Эти проблемы легко упускать из виду, особенно когда вы начинающий вебмастер и имеете кучу других забот.
Когда на изображение ведет некорректная ссылка, появляется ошибка 404 — отсутствие ответа на HTTP-запрос. Браузер пытается загрузить недоступный объект, поэтому веб-страница грузится дольше.
Неработающие ссылки можно найти тегах добавления CSS в заголовке HTML-документов. Как и в случае с файлами изображений, если CSS-файл недоступен, запрос останется без ответа и вернется с кодом 404. Если вы используете множество внешних CSS-файлов, почаще проверяйте сайт на битые ссылки!
Аналогичная ситуация с JavaScript. Но тут браузер может попытаться интерпретировать JavaScript — это оборачивается не только замедлением загрузки, но и неверным взаимодействием скриптов. Когда браузер пытается загрузить страницу 404 вместо JavaScript, все остальные загрузки останавливаются.
Кстати, вот почему рекомендуется размещать JavaScript в нижней части HTML-документов (непосредственно перед закрывающим тегом </body>).
Наконец, как найти битые ссылки? Иногда их не удается отловить автоматически, поэтому вебмастера прибегают к отдельным программам. Один из лучших вариантов — Screaming Frog SEO. В нем есть так называемый Log File Analyzer, с которым легко вычислить и исправить неработающие ссылки.
Запретите хотлинкинг
Противоречивая практика хотлинкинг означает, что вы разрешаете другим вебмастерам использовать контент с вашего сервера для собственных веб-сайтов. Разрешая им фактически пользоваться вашими мощностями, вы получите дополнительную нагрузку и, вполне возможно, замедление работы.
Как ускорить сайт за пять минут? Запрет хотлинкинга не позволит другим использовать ваши серверные ресурсы, и в ряде случаев заметно прибавит скорости. Делается путем добавления нескольких строк кода в файл конфигурации сервера (например, для nginx это файл nginx.conf).
Почему прирост может быть существенным? Потому что хотлинкинг затрагивает объемные изображения и другие мультимедийные файлы, требующие большой пропускной способности. Если ваш сайт не содержит объемных мультимедийных элементов, запрет хотлинкинга вряд ли поможет.
Перейдите на более надежную CMS
Система управления контентом имеет решающее значение для функциональности и производительности вашего веб-сайта. Самая надежная из платных CMS на российском рынке — это, без преувеличения, 1С-Битрикс: Управление сайтом. Есть и другие хорошие системы, включая Drupal и Joomla, но при использовании CMS с открытым кодом существует ряд серьезных рисков.
Мы неоднократно рассказывали о плюсах и минусах различных движков. Начинающим вебмастерам необходимо помнить две вещи. Во-первых, бесплатная CMS означает условную техническую поддержку и повышенную уязвимость. Во-вторых, редкие и студийные CMS могут оказаться причиной низкой производительности сайта, а в качестве бонуса вы получите проблемы с обслуживанием.
Оптимизируйте базу данных
Оптимизация базы данных — еще один простой способ ускорить сайт.
Правда, это действие должно выполняться регулярно, а не только в авральных ситуациях.
Для обладателей CMS 1С-Битрикс: Управление сайтом в «Инструментах» есть отдельный пункт меню «Оптимизация БД», запускающий анализ и оптимизацию таблиц базы данных. В результате автоматической оптимизации сервер начнет более эффективно обрабатывать БД, и производительность возрастет.
Если же вы пользуетесь WordPress, придется устанавливать специальные плагины для автоматизации очистки БД. Например, WP-Optimize или DBManager. Для Drupal рекомендуется модуль OptimizeDB, в Joomla аналогичные функции выполняет расширение Optimize Your Tables.
Последний совет
Быстрая загрузка сайта никогда не была так важна, как в нынешних реалиях.
Потенциальные клиенты ожидают молниеносной загрузки страниц. Не уважая их время, вы рискуете потерять трафик и конверсии, а вместе с ними — значительную часть доходов.
Существует, конечно, гораздо больше способов повысить скорость сайта, но вышеупомянутые рекомендации являются самыми важными и самыми эффективными.
Если у вас возникли вопросы по оптимизации сайта — обращайтесь к профессионалам!