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

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

• Больше половины посетителей покидают страницу, которая грузится более 3-х секунд;
• Сайт, который грузится 3 секунды, имеет на 25% меньше просмотров, на 50% больше отказов и на 25% меньше конверсии , чем сайт, который грузится 1 секунду;
• Прогресс-бар увеличивает время ожидания загрузки страницы;
• Скорость загрузки напрямую влияет на продажи и на позиции сайта;

Определить скорость загрузки сайта совсем несложно. Например, можно воспользоваться следующими популярными онлайн сервисами:

Рассмотрим способы ускорить время загрузки страниц сайта. По факту все способы очень просты и чаще всего сводятся к оптимизации "веса" страницы и грамотной загрузке кода.

В интернете довольно много материала по этой теме. Я постарался изложить все способы компактно и только по делу. Начнем.

На каждом сайте есть подключаемые файлы со стилями.css и скриптами.js. Их можно сжимать на "лету" (при загрузке страницы). Проще говоря мы уменьшаем их вес и тем самым сайт быстрее грузится. Мои файлы в среднем сжимались на 75%. Например, если файл весил 45 кбайт, то после сжатия он стал весить уже 12 кбайт. Итого, экономия 33 КБайта веса на файле с таблицей стилей.

Включить сжатие проще простого. Нужно лишь написать следующие строки кода в файл .htaccess (файл находится в корне сайта):

Проверить включено ли сжатие можно на сайтах

Если что-то не получается, то смело пишите вопрос в тех.поддержку Вашего хостинга . Зачастую бывает, что у них самих что-то не включено в настройках сервера.

Включение кэша браузера подключается добавлением пары строк кода все в тот же файл .htaccess :

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

Мое мнение, что в любом случае, срок 1-7 дней можно всегда поставить.

Это самое простое, что можно было сделать, идем дальше.

Возможно Вам будет интересно:

Использование изображений jpg - для контрастных и gif - где мало количество цветов. Это все аксиомы. Ни в коем случае не использовать лишний раз png или bmp, поскольку оба формата являются совсем не оптимизируемыми.

Уже существующие изображения jpg и png можно легко еще сжать с помощью программ и сервисов. Лично я поискал в интернете сервисы для сжатия изображения. Сравнил результаты, сделал вывод, что онлайн сервис tinypng.com нравится мне больше всех. Иногда ему удается уменьшить изображение даже на 75%, при этом качество остается почти без изменений.

Если сайт использует в качестве фона большое изображение, то его можно очень сильно сжать. Например, мне удалось сжать с 300 Кбайт до 86 Кбайт картинку с задним фоном для одного из сайтов.

У браузеров есть ограничение на количество одновременно исполняемых запросов (не более двух параллельно). Другими словами, если на сайте будет куча изображений (даже маленьких), это сильно увеличивает время его загрузки. Поэтому применяют следующую хитрость:

Создают поддомен для хранения фотографий, javascript и другое. Например, если ранее фото лежало по адресу /img/foto.jpg , то теперь адрес нужно поменять на img.site.ru/img/foto.jpg . Для браузера это будет другой домен и таким искусственным методом мы ускоряем загрузку.

Сейчас довольно модно применять "CSS-спрайт ". Смысл следующий: к примеру у нас на сайте есть куча маленьких картинок для фона (я думаю это знакомо каждому). Все эти картинки можно объединить в одно большое изображение, а с помощью CSS "вырезать" нужные куски в нужных местах.

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

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

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

Если Вы подгружаете библиотеку AJAX (от Google), то, конечно, грузить с сайта гугла напрямую ее быстрее плюс можно быть почти на 100% уверенным, что в браузере пользователя уже есть ее кэш. Но бывает, что гугл почему не доступен или тормозит загрузку, поэтому чтобы минимизировать этот риск можно прописать следующий код:

Смысл довольно прост. Сначала пытаемся загрузить библиотеку напрямую с ajax.googleapis.com, если это не удается, то грузим со своего сайта копию библиотеки.

Если у Вас уникальный случай, что сайт все равно очень тяжелый и грузится долго, то сделайте у себя на сайте "прогресс-бар". Этим вы показываете пользователю, что сайт грузится и нужно лишь чуть-чуть подождать.

Здравствуйте, дорогие читатели! Недавно получил комментарий в котором мне задали вопрос: в чем мой секрет быстрой загрузки сайта? Я решил не отвечать комментарием (слишком много писать), а написать сразу для всех полезный пост на эту тему. То есть сегодня мы поговорим о таком немаловажном факторе, как .

Как Вы думаете, зачем нужна быстрая загрузка сайта? Давай-те рассудим логически. Мы пишем для людей, люди должны читать наши посты и получать знания. Наш сайт или блог, это площадка для размещения знаний! Доступ к ним должен быть открытым и быстрым. А если Ваш сайт грузится 15-20 секунд? Разве пользователь решит остаться на нем? Ответ однозначен — НЕТ!

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

Как я говорил уже: Нужно беречь время. Оно течет в одном направлении, и его не вернуть! Можно вернуть деньги, еще что-либо, а время никак! К чему это я? А к тому, что нужно уважать, как свое время, так и время других! Нужно всего-лишь проделать несколько элементарных шагов, и Ваш сайт/блог станет намного быстрее открываться, а с этим прибавится не один посетитель.

Скорость загрузки сайта — важный фактор при настройки сайта. Нужно стараться любыми путями, уменьшить время ожидания посетителя. Так же и поисковые системы «смотрят» на скорость, и если она низкая (сайт грузится долго), значит и уважения меньше. А если уважения меньше, значит и окажитесь далеко от ТОПа.

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

1) Page Speed Online - онлайн-сервис проверки скорости сайта от Google. Помимо проверки скорости, сервис выдают список рекомендация по ускорению и оптимизации сайта. Очень полезная штука!

2) Pingdom Tools - онлайн сервис проверки скорости, который достоин низкого поклона. Впервые, когда я решил проверить скорость своего блога, я воспользовался именно им. Так же выдает различные рекомендации и советы.

3) - третий сервис, который, по моему мнению, заслуживает внимания. Здесь посредством генерации запросов определяется средняя скорость.

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

Вот такие сервисы я предлагаю Вам для проверки скорости загрузки сайта . Проверили свой сайт? Теперь самое время перейти к главному — ускорение сайта .

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

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

1. Оптимизация изображений

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

То есть нужно изменить размер и вес изображения. Если Вам на сайте нужно изображение размеров 300×225, а у Вас оно 600×450 — измените через любой графический редактор, к примеру Adobe Photoshop ().

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

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

2. Оптимизация скриптов и кодов

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

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

Так же можно переместить скрипты в конец страницы, нежели, чтобы она была в начале. Зачем? Ну Вы сами рассудите: открывается страница, и первым делом начинает грузить различные скрипты, которые в начале совсем не нужны, а на это уходит время! Пусть лучше сначала загрузится страница, а потом начнут грузится скрипты. Так будет намного быстрее.

Сократить CSS можно по ссылке, а сократить Java Script здесь . Просто заходите по ссылкам, прописываете путь до Ваших файлов, после чего нажимаете на определенную кнопку, сохраняете полученный файл на компьютер, и загружаете на сайт, например по ftp.

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

3. Включить сжатие страниц Gzip

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

Чтобы включить сжатие Gzip необходимо в файле.htaccess прописать следующее:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0 no-gzip BrowserMatch bMSIE !no-gzip!gzip-only-text/html mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$

Еще раз повторю, после включения сжатия gzip — скорость значительно увеличивается! Поэтому пропускать этот пункт не стоит.

4. Кэш браузера

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

Так вот, кэш можно использовать для ускорения сайта. То есть для того, кто уже заходил как-то на Ваш сайт, скорость будет выше. Все будет «летать». А у тех, кто первый раз зашел, это метод не сработает. А когда он зайдет вновь, все начнет работать.

Для того, чтобы это все начало работать, нужно в.htaccess вписать следующее:

ExpiresActive On ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" Header set Cache-control: private Header set Cache-control: public BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.{2}" force-no-vary

Все не так сложно, как кажется. Не так ли? Этим я хотел сказать, что мы теперь знаем, как проверить и ускорить скорость загрузки сайта Россия, Томская обл., г. Томск, +7 952 160 36 17

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

Чем быстрее, тем лучше. Но в среднем, 2-3 секунды для загрузки основной части контента страницы - это вполне нормально.

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

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

• Медленный сервер: может банально не хватать оперативной памяти или ядер в процессоре, как у обычного компьютера.
• Медленный движок сайта (CMS): если код был написан неопытными программистами без учета его быстродействия.
• Сервер далеко от пользователя: например, сервер с файлами сайта физически находится в Москве, а на сайт заходит пользователь из Владивостока.
• Много файлов: для отображения страницы браузеру нужно загрузить много картинок, файлов, стилей, скриптов и шрифтов.
• Тяжелые файлы: плюс эти файлы много весят.

Все шаги по оптимизации скорости сайта направлены на устранение данных проблем.

Из множества онлайн-сервисов для проверки скорости сайта самый популярный, пожалуй, это инструмент Google PageSpeed . Работать с ним просто - указываем адрес сайта и жмем кнопку «Анализировать».

В результате мы увидим такие показатели (отдельно для компьютеров и для мобильных):

• Через какое время браузер получает ответ от сервера и начинает отрисовывать контент страницы (FCP - First Contentful Paint).
• Через какое время пользователь видит основной контент в браузере (DCL - DOM Content Loaded).
• Насколько сайт оптимизирован в плане скорости загрузки.
• Конкретные рекомендации по оптимизации. Нажимая на ссылки «Как исправить», видим адреса проблемных картинок и файлов, с которыми нужно что-то сделать (в основном, сжать).

Желательно попасть в зеленую зону - и в блоке «Скорость сайта» (Page Speed), и в блоке «Оптимизация».

Еще один хороший сервис для проверки скорости загрузки, правда, на английском - Pingdom . Отличительная черта - вот такие красивые графики (называются waterfall - водопад) показывают какие файлы, в каком порядке и сколько времени загружаются:

А теперь к сути:

Неоптимизированные картинки - самая «тяжелая» часть сайта. Поэтому работа с картинками может дать значительный прирост к скорости.

На что смотрим:

Размер картинок (ширина и высота)

Если вы отсняли товар и получили фотографии шириной около 5000 пикселей, можете смело уменьшать ширину до 1600, в большинстве случаев этого будет достаточно. Исключением будут те сайты (в основном, интернет-магазины), где можно рассмотреть товар с «лупой», но и там увеличенная картинка загружается не сразу, а только если человек решил воспользоваться этим инструментом.

Вес картинок (килобайты)

Изображения с фотоаппарата можно (и нужно) сжимать в объеме перед выкладкой на сайт. Делают это либо в Фотошопе (или другом редакторе изображений), либо через онлайн-сервисы, например, TinyPNG или Optimizilla .

Превью к большим картинкам

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

Например, Спортмастер использует картинки товаров в трех вариантах:

Картинка для списка товаров (весит 7 Кб)

Картинка для карточки товара (весит 18 Кб)

Картинка для просмотра товара с «лупой» (весит 942 Кб)

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

При проверке скорости сайта через Google PageSpeed вы получите готовый список картинок, которые следует оптимизировать:

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

Как включить Gzip-сжатие:

Если у вас есть доступ к файлу htaccess, добавьте в него такие строчки (в конец файла):


AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml


Если у вас не Apache, а Nginx (кто знает, тот поймет), то вам понадобится файл конфигурации nginx.conf. Дописываем код в секцию http {...} и перезапускаем сервер:

gzip on;
gzip_static on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

Если у вас нет доступа к htaccess или конфигурации сервера, напишите в техподдержку хостинга, что вам нужно включить gzip-сжатие.

Если сжатие работает, то в результатах проверки PageSpeed вы увидите (в блоке «Внедренные приемы оптимизации»):

Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, cache). Тогда на других страницах этого сайта или при повторном заходе на текущую страницу браузер не будет запрашивать эту информацию заново с сервера (что долго), а подгрузит ее из собственной памяти (что быстрее). Поэтому в настройках браузера есть кнопки «Очистить кэш», и все мы знаем сочетание клавиш CTRL+F5 (обновить страницу с очисткой кэша).

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

Через файл htaccess (кэшируем статические файлы на 10 дней):


ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType image/svg+xml "access plus 10 days"
ExpiresByType text/css "access plus 10 days"


Для Nginx добавляем в конфигурацию:

server {
...
location ~* \.(jpg|jpeg|gif|png|ico|css|js|txt)$ {
root /var/www/user/data/www/site.ru;
expires 10d;
}
...
}

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

Аналогично списку картинок, Google PageSpeed выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

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

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

Пример обычного кода:

Speedometer-wrapper {
position : relative ;
}
.speedometer-wrapper .list {
margin-top : 80px ;
margin-left : -20px ;
padding-bottom : 85px ;
}

После минимизации:

Speedometer-wrapper {position :relative }.speedometer-wrapper .list {margin-top :80px ;margin-left :-20px ;padding-bottom :85px }

Популярные плагины и библиотеки (jQuery, Bootstrap и пр.) всегда имеют минимизированные версии своих скриптов и стилей - подключайте на сайт именно их. Например, обычная версия скрипта jQuery весит 265 Кб, а ее сжатый вариант - 85 Кб. Чувствуете разницу?

Единственный минус минификации - теряется читабельность файла. Если понадобится внести изменения в сжатый файл - сделать это будет сложно, человеку работать с таким файлом неудобно (там одна сплошная строка). Поэтому для минификации своих скриптов обычно используются дополнительные плагины к CMS - они автоматически сжимают css- и js-файлы перед загрузкой на сайт. А верстальщик при этом может спокойно работать с обычными версиями файлов.

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

Браузеры имеют свои алгоритмы для наиболее быстрой загрузки страниц (никто не хочет прослыть «тормозным» браузером). Поэтому, получив код страницы, браузер пытается вычислить, какие из подключаемых файлов ему нужно начать загружать в первую очередь. Иногда бывает так, что браузер уже добрался до отрисовки какой-нибудь формы на странице, а файл со стилями для нее еще не загрузился - тогда отрисовка остановится.

Чтобы браузер мог загружать файлы сайта оптимальным образом, рекомендуется все файлы стилей (css) и шрифтов подключать в начале кода страницы (в теге ), а все файлы скриптов (js) - в конце страницы, перед закрывающим тегом .

...



...


...

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

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

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

CDN (Content Delivery Network, сеть доставки контента) - это сеть из множества серверов, распределенных географически по стране или всему миру. Каждый из серверов дублирует контент с основного сервера (контент дублируется по первому запросу пользователем и хранится в течение какого-то времени).

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

Как правило, CDN используют в двух случаях:

• Загрузка сторонних скриптов. Это все те же jQuery, Bootstrap, шрифты Web Fonts. Например, можно указать браузеру загружать их не со своего сервера, а с серверов Гугла, Bootstrap или других CDN.
• Загрузка картинок и скриптов со своих CDN. Крупные сайты (Ozon, Avito и пр.) настраивают собственные CDN, используя либо собственные же сервера, либо (чаще) сервера CDN-сетей, например, Google Cloud или StackPath . Некоторые CMS уже включили поддержку CDN в свой функционал. Например, у Битрикса есть бесплатный модуль «Ускорение сайта (CDN)».

Чтобы браузер делал меньше обращений к серверу (а это и есть http-запросы), нужно сократить число необходимых ему файлов. Например, если у вас есть три отдельных скрипта (для слайдера, для модальных окон и для всплывающих подсказок), то можно объединить их в один файл, а потом еще и минифицировать (см. шаг 4).

Так как объединять файлы вручную не совсем удобно (если в будущем понадобится заменить один из скриптов), то обычно настраивают их автоматическое слияние. У большинства CMS для этого есть свои плагины (например, Autoptimize для WordPress).

Настроенное кэширование для браузера (шаг 3) и удаление лишних скриптов (шаг 6) тоже уменьшают число http-запросов.

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

Также сократить число файлов можно, отказавшись от использования устаревших форматов. Раньше каждый шрифт загружался в форматах eot, ttf, woff, svg для корректного отображения в браузерах. Сейчас современные браузеры позволяют ограничиться только двумя форматами - woff и woff2.

Кроме того, популярные шрифты можно загружать с Google Fonts . Во-первых, это снимет нагрузку с вашего сервера. Во-вторых, файлы со шрифтами уже будут оптимизированы, это перекладывается с ваших плеч на Google (что, согласитесь, приятно).

Помимо сжатия файлов стилей и скриптов (шаг 4), можно настроить минимизацию и для HTML-кода самой страницы. Думаю, это актуально для длинных страниц - статей в блогах, больших списков товаров и т.п. Для настройки стоит поискать подходящий плагин для своей CMS (например, Html Minifier для Joomla).

Если у вас выделенный сервер (ваш системный администратор может управлять его настройками), можно попробовать проапгрейдить его параметры. Например, добавить оперативной памяти или заменить процессор. Также сисадмин может провести «уборку» на самом сервере - удалить неиспользуемые и обновить текущие модули.

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

Один из этапов загрузки сайта - это генерация сервером итогового HTML-кода, который он отдаст браузеру. Этот код генерируется движком сайта (CMS). Если движок написан неграмотно, то он может «собирать» страницу весьма долго, делая лишние запросы к файлам и базам данных, используя «медленные» алгоритмы программирования и т.д.

Поэтому при выборе CMS для сайта рекомендуется смотреть в сторону популярных движков (Битрикс, Open Cart, WordPress, MODx и т.д.), которые зарекомендовали свое быстродействие и надежность. А так как эти системы постоянно дорабатываются (в том числе, и в плане скорости работы), то следует регулярно обновлять CMS на своем сайте.

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

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

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

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

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

После принятых мер, скорость загрузки моего сайта выросла в 3 - 7 раз. Замеры времени проводились уже после оптимизации изображений. А учитывая оптимизацию изображений, скорость загрузки сайта возрастает намного больше. Разброс в цифрах говорит о том, что скорость загрузки сайта величина вообще не постоянная. Более того она зависит от очень большого количества факторов, которые постоянно меняются. Давайте разберёмся, что же влияет на формирование этой величины.

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

Как вы уже знаете, сайт расположен на сервере. Сервер это специальный компьютер, предназначенный для раздачи информации всем пользователям сети. И как всякий компьютер, он должен быть мощным. А для обслуживания большого количества пользователей он должен быть очень мощным. Как правило, нормальные хостеры описывают оборудование своих серверов: тип процессора, объём памяти, тип жесткого диска (SATA, SCSI,...), операционная система сервера (Unix, Linux, Windows). И вы по своему кошельку или по требованиям к сайту, точнее к его посещаемости и объёмам хранимой информации, выбираете тариф и оборудование. Отсюда вывод:

1. Чем мощнее сервер, тем меньше время ответа сервера, тем быстрее работает сайт.

Если с оборудованием всё понятно, то какое отношение к мощности сервера имеет операционная система? Самое непосредственное. Unix изначально разрабатывалась как сетевая, многозадачная и многопользовательская серверная операционная система. Она получилась более производительной, чем Windows. Были случаи, кода простая замена операционной системы сервера Windows на Unix приводила к двукратному увеличению скорости работы сети. Linux это производные ОС от Unix и в силу своей комплектации могут незначительно отличаться. Поэтому обращайте внимание и на ОС. Вывод:

2. Лучшая ОС - Unix, значительно улучшает время ответа сервера.

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

3. Чем меньше сайтов расположено на одном сервере, тем меньше запросов обрабатывает сервер, тем быстрее время ответа сервера, тем быстрее работает ваш сайт.

Развивая дальше тему, что плохого, когда много сайтов на одном сервере, должен сказать, что сервер подключен к интернету, как правило, только одним сетевым кабелем. Это значит, все сайты передают информацию в интернет поочерёдно, используя только один общий IP-адрес. В случае сильной нагрузки (огромное количество запросов) на любой сайт этого сервера, будет тормозить весь сервер. И ваш сайт будет загружаться медленно. В случает блокировки IP-адреса по решению суда, будут заблокированы все сайты, расположенные на этом сервере и ваш сайт станет недоступным для посетителей. Отсюда ещё один важный вывод:

4. Лучше иметь свой выделенный IP-адрес. Это повышает безопасность и скорость обработки запросов именно к вашему сайту, а следовательно и время ответа сервера.

Суммируя два последних вывода, получаем новый вывод ещё более важный:

5. Лучше под сайт заказать Выделенный сервер с выделенным IP-адресом. Это много-кратно повышает безопасность и время ответа сервера, а следовательно и быстродействие вашего сайта.

Да это дорого, но в плане максимальной безопасности и максимальной производительности сайта это того стоит. (Имеет особую важность для высоко-посещаемых сайтов).

Так потихоньку мы вышли за пределы самого сервера, но факторы, влияющие на время ответа сервера, этим не заканчиваются. Есть ещё как минимум два.

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

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

6. При вещании на определённый регион выбирайте сервер в центре региона, или как можно ближе к региону.

Доступ к сайтам осуществляется через доменные имена, которые сопоставляются с IP-адресами на DNS-серверах. DNS-серверы имеют своё время отклика, которое может сильно меняться в конкретный момент времени, в зависимости от загруженности каналов связи. DNS-серверы при прокладывании пути к нужному IP-адресу общаются между собой. Они отправляют запрос тому серверу, который в зависимости от загруженности отвечает раньше. Поэтому, в конкретный момент времени, заранее нельзя знать по какому пути пойдет запрос и насколько быстро, и по какому пути вернётся ответ. Естественно Время отклика DNS-сервера оказывает огромное влияние на общую скорость ответа сервера.

Чем дольше обрабатывает запрос DNS-сервер, тем больше становится общее время ответа сервера. Иногда это время меняется в десятки раз. Повлиять на DNS-серверы мы ни как не можем. Но учитывая что NS расположены на серверах хостинга выбор хорошего местного хостера значительно может снизить это влияние. Поэтому ещё один вывод:

7. Время отклика DNS-сервера сильно влияет на время ответа сервера. Проблема решается выбором сервера от местного хостера.

Теперь снова возвращаемся на сервер к сайту. И будем рассматривать, что еще влияет на скорость загрузки сайта, но уже с точки зрения программного обеспечения и объёмов информации.

Небольшой способ улучшить скорость загрузки сайта - немного изменить настройки файла wp-config.php, который находится в корневой директории вашего вордпресса.

Находим в файле wp-config.php строку:

define ("WPLANG", "ru_RU");

Заменяем её на:

if (strpos($_SERVER["REQUEST_URI"], "wp-admin")) define ("WPLANG", "ru_RU"); else define ("WPLANG", "ru_RU_lite");

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

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

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

Отключение этих функций не только ни как не навредит вашему сайту, а ещё и снизит нагрузку на сайт и уменьшит количество спама по этим каналам.

Шаблоны реализуются по совершенно разным алгоритмам и имеют разные настройки и возможности. Одни темы могут быть малого объёма, другие большого. Одни темы WordPress могут быть очень быстрыми, с хорошо оптимизированным кодом, а другие совсем наоборот. При выборе темы шаблона обращайте внимание на скорость загрузки демонстрационной страницы. Это даст вам представление о том, как данная тема повлияет на общую скорость загрузки вашего сайта. Бесплатные темы можно проверять на своём сайте или на локальном сервере.

1. Максимально уменьшаем количество виджетов . Удаляем, виджеты "Архивы", "Свежие записи", "Свежие комментарии", "Популярные сообщения", "Мета". Если у вас уже есть хорошее меню, то виджет "Рубрики" тоже удаляем. Можно оставить виджет "Облако меток" и то если очень нужно. Эта процедура уменьшает количество запросов к БД, сокращает объём кода для всех ваших страниц и резко уменьшает количество ссылок на всех страницах вообще, а так же уменьшает количество ссылок дублей ваших страниц. Что очень полезно. Дело в том что архивы, рубрики и метки формируют для ваших сообщений новые URL, но с тем же содержанием. Об этом достаточно подробно написано в настройках SEO плагинов, в частности .

3. Облегчаем размеры выводимых страниц . Очень большие статьи разделяем на страницы с помощью тега .

4. Уменьшаем количество выводимых комментариев . Если ваши статьи активно комментируются, не следует выводить под статьёй больше 50 комментариев. Используйте переключение страниц между комментариями. Настройки устанавливайте в "Настройках обсуждений".

Уменьшаем в объёмах все картинки, имеющиеся на сайте. Если у вас есть изображения в формате PNG, переформатируем их в JPG. Файлы JPG формата значительно меньше по размерам. Но и JPG тоже можно ужать. Сжатие изображений может достигать 30-70%, что позволяет уменьшить объём страницы в 2-3 раза. Соответственно во столько же раз вырастит скорость загрузки страницы. Самый простой и лучший способ выполнить эту операцию, это проверить скорость загрузки сайта на developers.google.com/speed/pagespeed/insights/ .

После тестирования страницы, ниже результатов тестирования и ниже пункта «Внедренные приемы оптимизации», находите строку «Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы». Нажимаете на ссылку и скачиваете архив, с уже сжатыми изображениями, JavaScript и CSS файлами. Распаковываете его. Смотрите в результатах тестирования, что где находится и копируете файлы на свои места на сайте. Так вы разом убиваете трёх зайцев. Но правда не всех сразу. Такую процедуру придётся выполнить для каждой страницы отдельно.

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

Массовую оптимизацию всех изображений на сайте можно выполнить с помощью плагина для оптимизации WordPress Webcraftic Clearfy.

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

Описанная выше операция оптимизации JavaScript и CSS даёт некоторую усадку объёма, за счет уменьшения количества пробелов и комментариев, но не решает всех проблем, которые они создают. JavaScript и CSS, расположенные в шапке сайта, сильно тормозят загрузку содержимого сайта. Происходит это потому, что при запросе JavaScript или CSS, файлы не только их загружаются, но ещё и выполняются. На это время загрузка страницы приостанавливается. И чем файлов больше, чем больше их объём, тем больше они тормозят загрузку сайта. Чтобы ускорить загрузку сайта необходимо все файлы JavaScript и CSS объединить в один файл и перенести в конец страницы. С такой задачей великолепно справится плагин Autoptimize. Кроме этого он ещё оптимизирует HTML-код вашего сайта (извлекает из кода тексты комментариев).

Основой WordPress является база данных, в которой записано всё о вашем сайте: доменное имя, URL, название сайта, название статей, их содержание, адреса расположений картинок, комментарии и всё, всё, всё… При написании статей сохраняются промежуточные копии (ревизии), которых может быть очень много. Большинство плагинов, при активации и работе, в базу добавляют свои таблицы. А после их отключения, эти таблицы остаются брошенными. В результате база раздувается и скорость обработки запросов к ней естественно снижается. Поэтому периодически необходимо чистить базу данных и оптимизировать. Быстро и качественно выполнит эту работу один из плагинов WP-Optimize, Wp-DBManager, Optimize Database after Deleting Revisions, WPDBSpringClean.

Код отображаемой страницы формируется из результатов запросов к базе данных. Чем их больше, тем медленнее формируется страница. Уменьшить количество запросов к базе данных и соответственно увеличить скорость загрузки сайта можно заменой PHP-кода на уже готовый HTML-код, там где это возможно. Как правило это возможно сделать в тех местах где имеется постоянный неизменяемый материал. Для этого необходимо внести некоторые изменения в файлы вашего рабочего шаблона.

Открываем файл header.php вашего шаблона в текстовом редакторе, желательно Notepad++ (можно в AkelPad или phpDesigner).

1. Указываем кодировку . Если вы используете на сайте UTF-8, то делаем так.

Ищем код, отвечающий за кодировку контента:



Так мы избавились сразу от 3 запросов.

2. Указываем прямые адреса местоположения файлов стилей . Ищем код, отвечающий за стили:
/css/defaults.css" type="text/css" media="screen, projection" />

Реально у вас может быть несколько файлов стилей. Определить какие у них адреса можно в браузере, например в Гугл Хроме открываете сайт и нажимаете комбинацию клавиш «Ctrl+U». Копируете часть кода:
rel="stylesheet"

и вставляете его в окно поиска на открывшейся странице. Между треугольными скобками и будут расположены коды необходимых адресов.
Их и будете целиком вставлять header.php.

Строка с кодом может выглядеть примерно так:

или так, если файл находится не в корневой папке WordPress:

3. Ищем код пинбеков. Ещё 1 запрос. Наиболее вероятный файл нахождения Themater.php:

4. Ищем код RSS ленты. Ещё 2 запроса. Наиболее вероятный файл нахождения Themater.php:

5. Если там же присутствует запрос для вывода адреса фавикона , так же точно исправляем на адрес фавикона. Минус ещё 1 запрос.

6. Частенько в подвале сайта (footer.php), разработчики шаблонов вставляют запросы к Базе данных выводящие
название сайта (1 запрос):

адрес сайта и название сайта (2 запроса):