Как увеличить скорость работы сайта

ТОП-7 эффективных способов ускорения загрузки сайта

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

Поговорим мы о том, как ускорить загрузку вашего сайта, использовав при этом 7 рабочих способов. Возможно они всем известны. Но я заметил, что их используют далеко не все. А в комплексе, уж тем более, мало кто.

В общем, в содержании по пунктам распишу все способы, а далее уже читайте и применяйте все на практике.

Перед тем, как ускорить сайт, я хочу пару слов сказать о важности сего действия и о способах проверки скорости загрузки.

Уже давно известно, что скорость загрузки ресурса – один из факторов ранжирования в поисковой выдаче. Если взять абсолютно 2 одинаковых страницы, но одна будет грузиться быстрей, то и в выдаче она будет иметь более высокие позиции. Но это не значит, что первая будет на 30 позиции, а вторая на 1й. Нет, просто сайт с более быстрой загрузкой будет иметь немного лучше позиции.

Поэтому, если и имеются какие-то легкие способы обогнать наших конкурентов хоть в чем-то, то нужно это делать. Тем более, что таких способов масса. Использовав их все мы будет идти в нужном направлении в обгоне наших конкурентов.

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

По умолчанию, сервис будет проверять скорость загрузки страницы 5 раз, чтобы выявить среднее значение. Интервал между запросами будет 5 секунд. Если вы хотите изменить оба значения, то синей рамкой на изображении выше я выделил соответствующие настройки. Первая – количество проверок, вторая – интервал между запросами.

Только, что я проверил скорость загрузки одной своей статьи. По результатам 5ти проверок получил средний результат в 0,82 секунды.

Рекомендую вам ориентироваться на результат менее 1 секунды по данному сервису. Более уже будет не так хорошо, так как сейчас данному моменту уделяют слишком много внимания.

Конечно, бывает сложно добиться маленького значения и это зависит от многих факторов:

• Количество контента на странице;
• Количество подгружаемых скриптов;
• Размер графики на странице и на сайте в целом;
• Количество плагинов.

Поэтому, нужно стараться уменьшить влияние всех этих факторов. Об этом мы и начинаем говорить далее. Переходим к первому и, пожалуй самому простому способу.

Оптимизация графики

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

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

Одна фотография, сделанная на зеркальный фотоаппарат среднего качества, будет весить несколько мегабайт. Если загрузить такую фотографию на сайт, то посетитель при заходе на страницу будет ее всю скачивать. Представьте, сколько времени будет длиться загрузка страницы, если будет размещено 10 высокообъемных изображений.

Данному моменту уделяйте время, когда публикуете контент. Когда-то я писал статью о том, как уменьшить размер изображения без потери качества. Материал будет вам очень кстати.

Относительно дизайна, то старайтесь использовать в нем меньше изображений. Можно сделать вполне вменяемый и органичный дизайн, использовав при этом CSS стили. Это даже к лучшему будет. Если вы посмотрите на очень популярные ресурсы, то заметите, что у них дизайн – это по сути белый фон с разделительными линиями. Это играет на руку очень сильно и убивает 2х зайцев:

1. Уменьшает время загрузки;
2. Повышает удобность потребления контента.

Если же без красочных изображений никуда, то в помощь статья про уменьшение размера картинок (ссылка выше).

Кэширование

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

Чтобы сделать кэширование на сайте (для WordPress) нужно установить плагин Hyper Cache. Полную инструкцию читайте по данной ссылке. Все разжевал там.

Также можно добавить некоторые коды в файл .htaccess, которые также будут включать кеширование, а также gzip сжатие. Честно сказать, их действие на своем сайте я не заметил. Может потому, что мой блог уже был полностью оптимизирован. Да и не вижу в них особого смысла. И заморочка одна имеется, так как не сможем очищать кэш. Тогда не будет видно изменений на сайте. Поэтому, не буду давать эти коды, чтобы вы потом не ломали себе голову при возникновении проблем.

Я их не использую. Кэширования с помощью плагина Hyper Cache более, чем достаточно.

Оптимизация загрузки скриптов

Если ваш сайт довольно функциональный (различные социальные кнопки, слайдеры, счетчики посещаемости и т.д.), то на нем имеется много скриптов.

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

Самый простой способ ускорить загрузку сайта

Скорость загрузки сайта влияет на позиции в поисковой выдаче.

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

Далее рассмотрим что делать и принцип действия.

Как ускорить загрузку сайта быстро и просто?

На большинстве сайтов используется код JavasScript. По умолчанию робот использует последовательную загрузку скриптов.

На практике наиболее распространенные сценарии применения скриптов следующие:

• Подключение систем аналитики, таких как Google Analytics и/или Yandex Метрика;
• Использование скриптов JavaScript при решении задач по user interface или user experience.

Поисковая система оценивает скорость загрузки сайта через имитацию браузера пользователя.

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

Критическим путем рендеринга (Critical Rendering Path) называется последовательность шагов, необходимых для первого отображения страницы.

Если нет желания разбираться в технических деталях (все-таки уже потеплело на улице), то для ускорения загрузки страниц сайта просто прочитайте и внедрите следующие правила:

• Код JavaScript должен быть вынесен во внешний файл;
• К тегу script должен быть добавлен атрибут defer.

Далее рассмотрим технические детали, полезные для понимания того, за счет чего происходит улучшение производительности сайта.

До вывода страницы на экран проходит 6 этапов критического пути рендеринга:

1. Построение DOM-дерева;
2. Построение CSSOM-дерева;
3. Запуск JavaScript;
4. Создание Render-дерева;
5. Генерация расположения;
6. Визуализация.

Под термином DOM (Document Object Model) подразумевается объектная модель страницы.

Структура DOM выстраивается из узлов, так называемых нодов (от nodes).

HTML может быть исполнен по частям, но другие ресурсы, такие как CSS и JavaScript, зачастую блокируют отрисовку страницы.

Под термином CSSOM (CSS Object Model) подразумевается объектная модель стилей страницы сайта.

Не имеет значения то, как стили были заданы: объявлены явно или наследуются.

CSS является блокирующим обработку ресурсом, а значит Render-дерево не может быть построено без полного первоначального разбора CSS.

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

Render-дерево представляет собой объединение из DOM и CSSOM, и включает только видимые элементы. Например, исключаются элементы, которые были скрыты с использованием display none.

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

Поисковая оптимизация критического пути рендеринга

Модели DOM и CSSOM связаны с JavaScript.

JavaScript является блокирующим ресурсом для роботов, то есть JavaScript блокирует разбор HTML-документа.

Когда робот видит тег script, то происходит остановка процесса, робот начинает выполнять JavaScript. Если скрипт размещен на внешнем ресурсе, то робот еще идет забирать код с другого ресурса. Начинаются лаги и, как следствие, страница сайта открывается не очень быстро.

Но блокировки робота можно избежать!

JavaScript можно загружать асинхронно. В отдельных случаях, загрузку скрипта и вовсе можно отложить.

Есть 2 важных директивы:

• async;
• defer.

При не использовании директив код выглядит так:

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

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

Зачем увеличивать скорость загрузки сайта

Представьте, что ищете какой-либо товар. Например, шуруповёрт. Пытаетесь зайти на сайт, но он не открывается 1, 2, 3, 4 секунды, вот уже 5-я пошла… Будете ждать? Вряд ли, ведь можно зайти к конкуренту в выдаче, у которого сайт загрузится за полторы секунды. Это самый простой пример, почему нужно оптимизировать скорость загрузки сайта.

Какой должна быть скорость загрузки сайта в секундах

1–3 секунды. Отличный результат. При такой загрузке ресурс будет собирать новых пользователей из органической выдачи, а количество отказов станет минимальным.

4–7 секунд. Нормальный результат, но лучше добиться показателей, указанных выше.

Более 10 секунд. Ваш сайт — это огромная дыра в кармане, через которую постепенно утекают ваши деньги, при этом прибыли с этой стороны ждать точно не придётся.

Порядок загрузки сайта

В загрузке данных участвуют:

1. Пользователь со своим браузером.
2. Веб-сервер, на котором располагаются все данные сайта.

Очень часто проблема появляется на стороне сервера. Смотрите, как это работает. Пользователь нажимает на ссылку, и процесс начинается:

• посетитель переходит по ссылке, запрашивая у сервера данные, который в ответ отправляет сформированный HTML-документ;
• далее подгружаются стили. CSS отвечает за внешний вид сайта: расположение блоков, цветовое оформление, отображение контента, базовую анимацию и т. д.;
• затем поступает запрос к JS-файлам. JavaScript частично отвечает за логику работы сайта и интерактивность (обрабатывает, корректно ли заполнены HTML-формы без отправки данных на сервер, взаимодействует с пользователем, добавляет анимацию и проч.);
• подключение шрифтов. Преображается контент, текст приобретает оригинальное начертание. Если они не подгружаются, тогда браузер подключает шрифты по умолчанию (у каждого веб-обозревателя свой стандартный набор);
• загрузка изображений. Если путь к картинкам прописан правильно, они загружаются без всяких проблем.

Трудности могут возникнуть при загрузке данных на любом этапе.

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

Итак, рассмотрим первичный список, где могут скрываться ошибки:

1. Сервер. Что это такое? По сути, тот же компьютер, только более мощный. У сервера, как и у ПК, может не хватать оперативной памяти, ядер или мощности процессора для обработки входящих данных. Как решается? Если есть проблемы с сервером, нужно просто сменить поставщика услуг, то есть ваш хостинг.
2. Тяжёлые файлы. Сюда входит всё: от JS и CSS до шрифтов и картинок. Всегда помните о размере файлов, размещаемых на сайте. Их небольшой размер — залог быстрой загрузки страниц.
3. Медленная CMS. Этот фактор актуален только в том случае, если вы используете малоизвестный движок. Если у вас сайт на WP, Joomla, Drupal, MoDX и так далее, можете не беспокоиться об их качестве, причина медленной загрузки скрывается в других факторах.

С основными проблемами разобрались, осталось понять, как проверить и как увеличить скорость загрузки страниц сайта.

Инструмент для проверки

Для выявления скорости ответа сервера и подгрузки данных используется специальный сервис — Google PageSpeed. Используя это приложение, вы получите сведения о времени ответа сервера и отображения контента, а также об основных ошибках, которые мешают быстрой загрузке.

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

Как увеличить скорость загрузки страницы

Google PageSpeed даст полезную информацию, пользуясь которой можно самостоятельно устранить недостатки. Вы можете:

1. Сжать изображения

• размер. Для обычных целей достаточно картинок размером до 1600 px, исключение — лупа в интернет-магазинах, там нужно более высокое качество;
• «вес» картинок. Любое изображение можно сжать без видимых потерь качества. Это делается с помощью «Фотошопа» или специальных онлайн-сервисов.

Оптимальные размеры для изображений:

• в каталог — до 7 КБ;
• для карточек товаров — до 18 КБ;
• для просмотра в увеличенном виде — 920 КБ.

Представьте, какой будет загрузка, если в превью товаров в каталоге добавить исходные изображения по 920 КБ.

2. Включить gzip-сжатие

Скорость передачи файлов обычно медленнее, нежели распаковка, поэтому с помощью gzip-сжатия можно ускорить работу сайта. Данные архивируются на сервере и передаются затем браузеру, который распаковывает их и показывает пользователю веб-страницу. Однако есть небольшое «но». Этот процесс может перегружать сервер, поэтому рекомендуется проверить скорость загрузки ресурса до и после включения gzip. Проверить, включено ли сжатие, можно всё тем же PageSpeed. Если gzip активно, программа напишет: «Внедрены приёмы оптимизации скорости загрузки сайта».

Как подключить сжатие?

Нужно добавить в конец файла .htaccess строки кода:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

После этого ещё раз проверьте сжатие в PageSpeed.

3. Настроить кэширование

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

ExpiresActive On
ExpiresDefault “access plus 1 month”

ExpiresByType image/gif “access plus 2 months”
ExpiresByType image/jpeg “access plus 2 months”

Можно добавлять для кэширования любые расширения файлов.

4. Сжатие CSS и JS

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

Как добиться положительных результатов в оптимизации скорости загрузки сайта

Обращайтесь в Wezom. Мы решим любую задачу, связанную с оптимизацией скорости загрузки и общим продвижением ресурсов в поиске. Обращайтесь к консультантам — они расскажут, как мы сделаем ваш сайт успешным.

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

Наш менеджер свяжется с Вами в ближайшее время

Источники:

http://kostyakhmelev.ru/texnicheskaya-chast/kak-uskorit-zagruzku-sajta.html

http://ru.megaindex.com/blog/seo-rendering-speed

http://wezom.com.ua/blog/kak-uvelichit-skorost-zagruzki-sajta