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

Оставьте комментарий 6,950

Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на 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$

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

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

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

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

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

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

Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения чек-листа поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.

Этап 1. Определите "рамки" оптимизации скорости сайта

Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, медиафайлов и других файлов, которые загружаются на вашем сайте.

Определив "рамки ", мы будем знать конечную, к которой нужно идти. А поможет нам найти данные "" сервис, созданный Джонатаном Филдингом — www.performancebudget.io .

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

Этап 2. Узнаем реальную скорость сайта

Как я уже писал выше, Google PageSpeed Insights это хороший инструмент для проверки оптимизации скорости сайта, но все же он "дает" лишь поверхностные советы. Вы можете сперва проверить с помощью этого инструмента, а затем переходить к более подробной статистике, которую дают следующие сервисы:

WebPagetest
GTmetrix

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

Сервис WebPagetest позволяет выбрать сервер тестирования и браузер. Данный сервис показывает в виде диаграмм каких ресурсов (CSS, JS) больше всего в процентном соотношении на вашем сайте. Что больше всего радует, так это подробная статистика по запросам в виде графиков. Также есть информация о том, к каким файлам применяется GZIP сжатие и становится сразу понятно все ли верно указали в настройках .htaccess .

А вот сервис GTmetrix позволяет увидеть график загрузки файлов, так еще к этому все показывает подробные советы по оптимизации каждого нюанса на сайте. И здесь все разбивается на более детальные моменты оптимизации.

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

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

(Чек-лист) Самостоятельная оптимизация скорости сайта

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

Используйте изображения именно того разрешения, которое необходимо на странице.
Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании галерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.
Объедините все иконки (если SVG, то в SVG-спрайт) в одно изображение (спрайт).
Это уменьшит количество запросов к серверу. Сейчас существуют онлайн решения: css.spritegen.com , iconizr . Так и решения для сборщиков (для Gulp — gulp-svg-sprites , для Grunt — grunt-svg-sprite , для Webpack — Webpack SVG sprite loader ).
Оптимизируйте изображения: PNG, JPG, SVG.
Здесь есть как онлайн решения: TinyPNG , Kraken.io . Так и автоматизированные решения для сборщиков: Gulp — gulp-imagemin , gulp-pngquant ; Grunt — grunt-contrib-imagemin ; Webpack — imagemin-webpack-plugin .
Deferring images without lazy loading or jQuery — https://varvy.com/pagespeed/defer-images.html

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

Используйте SVG-спрайты и PNG-спрайты.
Об этом я писал в блоке "Оптимизация изображений", который находится выше.
Объедините все CSS файлы в один.
Как я говорил раннее — это уменьшит количество запросов к серверу. Плагины для сборщиков (для Gulp — gulp-concat-css , для Grunt — grunt-concat-css , для Webpack — css-concat-loader ).
Объедините все JS файлы в один по возможности.
Плагины для сборщиков (для Gulp — gulp-concat-js , для Grunt — grunt-contrib-concat , для Webpack — webpack-uglify-js-plugin ).
Максимально уменьшите количество запросов к базе данных.
Все, что можно загружать без запросов к базе данных, загружайте без ее использования — статично. Так как на запросы и ответ уходит время, то будет логичным, если мы максимально уменьшим данный показатель.

3. Оптимизируем CSS и JS

Сжимаем все CSS файлы.
Онлайн решения: CSS Compressor , CSS Minifier gulp-clean-css ; Grunt — grunt-contrib-cssmin ; Webpack — clean-css-loader .
Сжимаем все JS файлы.
Сервисы онлайн: JavaScript Compression Tool , JS Minifier . Плагины для сборщиков: Gulp — gulp-uglify ; Grunt — grunt-contrib-compress ; Webpack — плагин, который указан в прошлом пункте также сжимает JS.

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

Как Вы думаете, зачем нужна быстрая загрузка сайта? Давай-те рассудим логически. Мы пишем для людей, люди должны читать наши посты и получать знания. Наш сайт или блог, это площадка для размещения знаний! Доступ к ним должен быть открытым и быстрым. А если Ваш сайт грузится 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

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

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

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

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

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

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

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

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

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

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

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

ExpiresActive On
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"

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

FileETag MTime Size

ExpiresActive on
ExpiresDefault "access plus 1 month"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

;charset=" />

заменяем на:

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

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

или так:

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

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

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

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

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

Заменяем его на:

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