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

«Распределили часть контента (изображения, jQuery) на поддомены, а часть на CDN (cloudflare.com) для сокращения расстояния между сервером и пользователем.» Для сайта плохо - картинки будут привязаны не к сайту, а к CDN. В Яндексе в статистике будете видеть "картинок в индексе - 0".© инфа от яндекса.

То есть включили все галочки в настройках оптимизации сайта на хостинге. С заказчика содрали пару сотен баксов. При этом убили такой параметр в заголовке как lastmodified, ибо при включении этих опций он не передается - такова его специфика. Ощущение, что и сайта нету никакого, просто придумали статью и переписали название чекбоксов с хостинга, думая что справит неизгладимое впечатление.
Браво, примитивнее статьи не читал, кейс на премию Дарвина!

Александр Поречников

Java - это даже и не близко Java Script

Александр Поречников

Вот Вы пишите, Геннадий, что включили http2 и при этом зачем-то обьединяете ресурсы в один файл, Противоречите сами себе? Или просто не знаете как работает http2. И судя по чеклисту, то меряли ли Вы скорость загрузки после простого включения ганзипа, все остальное это такие тонкости и дебри в которые лезут, когда нужно с 500мс сделать 400мс или от нагрузки сервер подвисает (504 ошибки проскакивают). И выкиньте Апач из связки Апач + Нжиникс (если Вы, конечно, не используете специфические плагины Апача) + совет, держите всю статику на СДН, это очень недорого, а толк от этого огромный, как минимум в снижении нагрузки на процессор

Александр Поречников

а для чего созданы зеркала - слейте СДН с основным доменом и все

Александр Поречников

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

Настроили OpCashe, исправьте на OPcache

Александр, несомненно, эти опции модуля pagespeed ускоряют сайт, но при выборе хотя бы одной из них на хостинге last-modified не передается, ответ сервера 304 на запрос if-modified-since не отдается, cache conrol -> max-age становится 0.
Возмутило не это в статье, возмутило то, что автор пишет такие заумные вещи как они план составляли, как воплощали в жизнь мега СЕО технологии и как потратили на это 60 человекочасов, 60 КАРЛ! То есть с заказчика содрали минимум 500 баксов за то, что поставили галки на хостинге. Не жалко, на здоровье! Ну развел и молчи, но не лезь со своими псевдознаниями на нормальные сайты и не отбирай у людей время! Почему уверен что рулили на хостинге -- вот скрин украинского продвинутого хостера, где порядок этих галок практически на 100% совпадает с гениальным планом автора и ко по ускорению сайта.
https://uploads.disquscdn.c...

Александр Поречников

на этом хостинге у нас даже один из старых полустатичных проектов крутится, отличнаый хостинг. По поводу чего Вы высказалась я знаю, но многие не понимают, что на самом деле есть всего несколько способов действительно уменьшить время загрузки, а не "экономия на спичках" - это:
0) включение сжатия на веб-сервере (gzip),
1) установка правильных заголовков на сайте
2) использование не шаред-хостинга, а пусть даже минимальной ВПСки
3) использование более-менее быстрого движка (желательно не Вордпресс, а на фреймворке)
4) минификация статичных файлов (то что редко меняется - стили, картинки, скрипты, шрифты)
5) кеширование страниц/статики

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

Согласен с Вами на 100%, благодарю за лаконизм и точность!

Ляпушкин Никита

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

Филандер

а что за хостинг?)

Филандер

Alexey Tyazhelnikov

Что значит "Расширили время кэш для JavaScript и CSS" ?

Включили последнюю и предпоследнюю галочку на хостинге (пост со скрином выше))))

Геннадий Федоров

Да, так и сделали!
Извините, Вы не компетентны в этом вопросе.

Геннадий Федоров

Спасибо!
Комплекс работ - дает результат.

Геннадий Федоров

Такая и была задача, дать толчок к действиям, а не расписать как необходимо делать

Геннадий Федоров

Спасибо за комментарий!
Признаю, все объединили до перехода на https/http2))
Да, скорость после gzip мерили, не тот результат (не всем угодишь)...

Геннадий Федоров

Вот Вы как спецы судите... посмотрите это со стороны пользователя))

Геннадий Федоров

Ваш комментарий вообще непонятен

Александр Поречников

пользователи обычно не настраивают сервер, не программируют и не создают продукты, то что можно создать "бложик/сайт" на вордпрессе человеку без знаний - это несомненно хорошо, но если у такого человека возникнут вопросы, то ему все равно придется столкнутся с PHP, JavaScript, Nginx, Apache и прочими ранее незнакомыми словами и в этом обычно помогает гугл, поэтому "легкая безграмотность" в терминах приведет к тому, что человек будет искать что-то похожее на "слайдер на Java" и удивлятся что ему какой-то JavaScript подсовывают в результатах. Поэтому взывать к стороне пользователя не стоит

Александр Поречников

часто проблема не в том что скорость повышается от всех манипуляций (пусть даже если и на 0,1%), а в том, что мы не видим других путей оптимизации (CDN, nginx) и не понимаем как это работает (http2) и в результате оптимизируем то что нет смысла оптимизировать и забываем о том что следовало бы оптимизировать или как добится максимального результата при своей оптимизации.

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

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

Итак, поехали:

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.

Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?

2. Помещайте CSS файлы в начале страницы

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

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

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

Кроме того, внешние.js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте css и javascript

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

Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

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

Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.

Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл.htaccess, находящийся в корневой папке сайта, следующие строки:
Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"
Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

8. Оптимизируйте ваши изображения

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

  • GIF – идеально подходят для изображений с несколькими цветами, например логотип.
  • JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
  • PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
Оптимизировать изображение можно двумя способами: используя программы или онлайн сервисы в Интеренете для сжатия изображений. В первом случае от Вас потребуются определенные знания для работы с той или иной программой, а вот воспользоваться онлайн сервисами может каждый. От Вас лишь требуется загрузить нужные изображения, а сервис сам оптимизирует их и выдаст ссылку на скачивание уже сжатиых файлов.

Вот несколько онлайн сервисов для оптимизации изображений:

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега, либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

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

Content-Encoding: gzip

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

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле.htaccess прописать следующие строки кода:
AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

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$

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

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

Если что-то упустил или у Вас есть, что добавить – пишите свое мнение в комментариях ниже к этому посту. Спасибо за внимание!

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

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

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

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

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

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

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

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

mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

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

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

2. Включить кэш браузера

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

Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType image/ico "access plus 1 years" ExpiresByType text/css "access plus 1 years" ExpiresByType text/javascript "access plus 1 years" ExpiresByType image/gif "access plus 1 years" ExpiresByType image/jpg "access plus 1 years" ExpiresByType image/jpeg "access plus 1 years" ExpiresByType image/bmp "access plus 1 years" ExpiresByType image/png "access plus 1 years"

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

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

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

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

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

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

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

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

4. Подгружать файлы с другого домена

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

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

Примечание

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

5. Оптимизация CSS и JS

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

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

6. Правильное расположение CSS и JS

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

Примечание

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

window.jQuery || document.write("");

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

Примечание

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

Скорость загрузки сайта один из важнейших параметров 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. При вещании на определённый регион выбирайте сервер в центре региона, или как можно ближе к региону.

Время отклика DNS-сервера

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

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

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

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

Настройки wp-config.php

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

Оптимизация базы данных WordPress

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

Уменьшение количества запросов к БД или редактирование шаблона

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

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

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

Ищем код, отвечающий за кодировку контента:
" type="text/css" media="screen, projection" />

или так:

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то