Скорость сайта и его ускорение

Редактор: Евгений Буровинский 2029 4 мин

Как ускорить скорость загрузки сайта

На что влияет скорость загрузки сайта?

Скорость загрузки сайта влияет на удобство просмотра для пользователей. Современные юзеры не любят долго ждать, пока страница сайта или отдельные ее элементы полностью загрузятся. Соответственно люди покидают такие сайты, а это сказывается на поведенческом факторе, что в свою очередь ведет к падению прибыли или понижению позиций сайта в поисковых системах. К тому же, сами поисковики учитывают скорость загрузки страниц и это в маленькой мере, но все же влияет на ранжирование.

Как узнать скорость сайта?

Скорость сайта определяется как Page Speed, и есть несколько способов ее узнать данный показатель. Детальнее об этом читайте в нашей статье.

Как ускорить сайт без вреда?

Красный - очень важно, Оранжевый - желательно, Зеленый - обратите внимание.

1. Оптимизируйте картинки

Как вы сами понимаете, картинки могут быть слишком большие и слишком долго загружаться.

Лучше всего оптимизацию картинок проводить через сервис, который предоставляет Yahoo. Этот сервис уменьшает вес картинки без потери качества и сохраняя ее расширение. Если вас это не устраивает, то можете вручную оптимизировать изображения Фотошопом или любой другой графической программой. Также хотим дать совет на случай если решите сами оптимизировать картинки - не ухудшайте качество на столько сильно, что пользователю будет противно смотреть на сайт.И если оптимизация графики приводит к таким результатам, то лучше оставьте все как есть.

Какой формат использовать? Лучше всего используются jpg и png, у первого лучше степень сжатия, зато у второго поддерживается прозрачный фон.

2. Используйте кэш браузера

Когда пользователь заходит на страницу Вашего сайта, все элементы (графика, текст, CSS-стили и т.д.) загружаются к нему в браузер. Если сайт сообщит браузеру, что все эти элементы нужно какое-то время хранить на компьютере пользователя, то  при следующем посещении этой же страницы (или других страниц вашего сайта) загрузка сайта пройдет на много быстрее. Т.к. браузер загрузит лишь те данные, которые изменились, а все остальные возьмет из памяти браузера (кэша). Чтобы включить кэширование, нужно в файл .htaccess записать такой код:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
</IfModule>

Здесь срок хранения указан 1 месяц, т.к. мы считаем его оптимальным. Но можно ставить значения "7 days" или "1 year" и т.д. Также стоит обратить внимание, что для исполнения этого кода на хостинге должна быть включена работа модуля mod_expires.c. И хотя этот модуль включен на большинстве хостингов, все же редко встречаются такие компании, которых он выключен. Также для правильного кэширования скриптов, рекомендуют добавить такой код:

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</filesmatch>
</ifmodule>

3. Включите gzip-архивацию

Суть ее проста: когда клиент пытается посмотреть страницу браузера, то сервер на котором расположен ваш сайт фактически на лету архивирует информацию, и передает пользователю меньше данных, чем в том случае, если бы он передавал полные файлы без архивации. Эти данные распаковываются в браузере пользователя, и тот видит страницу вашего сайта.

У этого метода есть один минус - объем передаваемых данных уменьшается, но увеличивается нагрузка на сервер хостиинга, что может привести к недоступности вашего сайта. Детальнее о том, как включить gzip-архивацию и стоит ли вообще это делать, читайте в отдельной статье.

4. Оптимизируйте CSS

Как правило это не дает значимого результата для ощутимого пользователю ускорения сайта, но все же для увеличения Page Speed стоит оптимизировать CSS файлы. Сегодня существует множество сервисов, которые делают это онлайн. Не бойтесь, ваши стили будут все также работать, просто в них уберутся лишние пробелы, а также та информация, которую можно сократить - будет сокращена.

Мы рекомендуем cleancss.com, если он вам не нравится, то можно пользоваться этим онлайн-сервисом (уберите галочку с "Output using smallest size" иначе у вас будет каша вместо структуры CSS) и этим (он сохраняет структуру CSS и является информативным). Google рекомендует использовать YUI Compressor но нам он не очень понравился.

5. Оптимизируйте JavaScript

Здесь эффект схож с предыдущим пунктом. Берем код js вставляем его в специальный онлайн-сервис (рекомендуемый Google) и на выходе получаем скрипт, который весит меньше и загружается быстрее. Альтернативой этому сервису можно считать сайт jslint.com от Yahoo.

6. Старайтесь не использовать редирект

Редирект - это перенаправления с одной станицы на другую. Хотя на него не уходит много времени, но все же оно тратится и может быть заметно для пользователей и поисковых машин. Поэтому используйте его только там, где очень нужно (например, при переезде с одного домена другой).

7. Асихронная загрузка JavaScript и CSS

Обычно страница загружается так - сначала стили и скрипты, а потом ее основной контент. Причем все загружается последовательно (синхронно), и пока CSS или JS не загрузится, пользователь не увидит основной контент страницы. Так вот, многие рекомендуют делать асинхронную загрузку CSS, JS и основного содержимого страницы (текста, картинок и т.д.).

Мы не рекомендуем это включать, т.к. если какой-то скрипт или CSS-файл у Вас грузится долго, то он также долго будет грузиться и при асинхронной загрузке. Просто в таком случае пользователь чуть раньше увидит текст страницы, но в то же время, если он поспешит нажать куда-то, что использует JavaScript, который еще находится в стадии загрузки, то пользователь скорее всего увидит ошибку.

Чтобы этого избежать, лучше проверьте и оптимизируйте свои скрипты и стили, чтобы они быстрее загружались.

8. Верхняя часть страницы - вверху кода

Старайтесь чтобы элементы которые находятся в верхней части реальной страницы сайта, находились в верхней части кода. Это будет эффективным, когда у Вас длинная страница, и пользователь сразу увидит ее верх, а нижняя часть уже догрузится в то время, пока пользователь смотрит на верхнюю часть страницы.

9. Используйте инструмент от Google

Он называется Page Speed - там будут найдены и основные проблемы сайта со скоростью, и будут даны советы по их исправлению.

Если у вас есть советы по улучшению скорости сайта - оставляйте их в комментариях, и мы с радостью добавим их в статью. А если есть вопросы - смело их задавайте, т.к. наши эксперты очень быстро на них отвечают.

Евгений Буровинский
Редактор материала • Евгений Буровинский Хостинг-эксперт (опыт работы 3 года) Основная специализация - составление обзоров хостинг-провайдеров, формирование рейтингов, маркетинговые исследования рынка хостинга. Очень дотошный человек, скрупулезно тестирующий каждый хостинг.
Только эксперты отвечают на ваши вопросы
Не нашли ответ на свой вопрос?
Задайте его экспертам! Ответ приходит очень быстро и прямо на ваш email.
Мы старались для Вас!
Оцените статью
или
Расскажите о ней

Юзеры (1) оценили на 5.0 из 5

Рейтинги хостинг-провайдеров по задачам сайта
Июля
Бесплатный тест
Установленное ПО
Технологии
Региональные