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

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

• Больше половины посетителей покидают страницу, которая грузится более 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, если это не удается, то грузим со своего сайта копию библиотеки.

Примечание

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

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

Зачем браузеры создают кэш?

В одной из статей Александр Шихов описал, . Пересказывать всю статью не буду, лишь расскажу главную суть. Кэш нужен как раз для того, чтобы сайты открывались очень быстро. Если каждый день удалять его, то при последующем запуске браузера и попытке открыть любимые сайты браузеру придется снова загружать те же данные, которые он мог бы открыть c локального диска (кэша) за доли секунды.

Почему нас приучили чистить кэш?

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

Связано это с тем, что большинство оценивает количество найденного мусора, а не его качество. Если какая-то программа находит 700 мегабайт мусора в системе, а другая 900 мегабайт, то лучше определенно выглядит вторая программа. И плевать, что 200 мегабайт сверху были добавлены за счет прибавления кэша браузеров, который через день восполнит те самые 200 мегабайт. Это отличный повод предложить почистить систему еще раз, не так ли?

Удаляйте историю браузеров и временные файлы без очистки кэша

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

Используйте приватный режим (режим «инкогнито»)

Если вы не хотите, чтобы какие-то сайты оставляли следы на вашем ПК, то просто активируйте приватный режим просмотра страниц (в он активируется сочетанием Ctrl+Shift+N), после закрытия которого вся история и данные о просмотренных страницах будут удалены из браузера и никто о них никогда не узнает.

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

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

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

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

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

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

Но кроме Page Speed очень наглядно оценить скорость загрузки сайта и посмотреть все загружаемые объекты можно в — Pingdom и ему подобных.

По началу происходила подгрузка почти 90 объектов (ccs, js, изображения) и на каждый из них нужен был отдельный http запрос. Но, проанализировав с помощью указанных выше онлайн сервисов все загружаемые объекты, а также следуя советам Page Speed, мне удалось сократить их количество до трех десятков, что не могло не сказаться на общей скорости:

Ну, а теперь вспомним обо всех методах по порядку. И начинать оптимизацию следует, наверное, в порядке отображения проблемных мест в окне Page Speed, ибо это будут самые эффективные и самые не сложные в реализации шаги — что называется «дешево и сердито».

Поэтому я и занялся первым делом (ccs, js, изображения) в браузерах посетителей (т.е. вас, мои уважаемые читатели).

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

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

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

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

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

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

Сжать CSS и Js файлы с помощью Gzip можно в несколько раз, но еще больше уменьшить размер этих файлов можно за счет предварительной оптимизации их кода.

Итак, вам нужно будет скачать на свой компьютер все внешние Css и Js файлы, участвующие в загрузке страниц (после того, как вы осуществили их объединение это будет не сложно) и создать из каждого из них его архивную копию с расширением.gz. Сделать это можно с помощью бесплатной программы 7zip . Дальше давайте покажу на примере, ибо теоретизировать здесь бесполезно.

Возьмем для примера основной файл стилей моего блога style.css. После того, как я его упакую в Gzip с помощью программы 7zip, у меня появится архив style.css.gz.

Но т.к. некоторые браузеры не захотят подключать стилевой файл с расширением.gz, то мы удаляем у него окончание.gz и получаем опять в итоге style.css, но который уже фактически представляет из себя архив (пока еще не запутались?).

Но просто заменить оригинальный файл style.css на сервере (еще не сжатый в Gzip) только что нами созданным архивом, но имеющим по-прежнему название style.css, будет не достаточно.

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

Но назвать мы его должны будем уже иначе, чем style.css. Для этого можно его переименовать, например, таким образом: style.nogzip.css. Теперь на сервере в папке с темой оформления WordPress у меня будет лежать два файла стилевого оформления:

style.css — архив с отрезанным расширением.gz

style.nogzip.css — обычный не сжатый файл стилей, который нужно будет отдавать браузерам, которые не поддерживают сжатие

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

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

RewriteEngine On RewriteCond %{HTTP:Accept-encoding} !gzip RewriteCond %{HTTP_USER_AGENT} Konqueror RewriteRule ^(.*)\.(css|js)$ $1.nogzip.$2 Header append Vary User-Agent Header set Content-Encoding: gzip Header set Cache-control: private Header unset Content-Encoding

Если вы при переименовании оригинальных файлов стилей и скриптов использовали их названия, отличные от style.nogzip.css, то и в соответствующей строке кода вам нужно будет заменить маску $1.nogzip.$2 на свою. В общем-то, вот и все.

Теперь сервер не будет каждый раз на лету сжимать Css и Js, а будет сразу же отправлять браузерам заранее сжатую вами копию, а в случае браузера, который не понимает Gzip — оригинальную версию файла вида подобного style.nogzip.css.

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

Но проблема довольно быстро решилась проведением описанных выше манипуляций с используемым в админке файлом стилей. В моем случае это был colors-classic.css из папки:

/wp-admin/css

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

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

Но вот немного поискав информацию на тему Gzip сжатия Html страниц, я изменил свое мнение об этих настройках компрессии в плагине Hyper Cache.

Похоже, что поставив галочку в этом поле «Enable compression», мы тем самым активируем предварительное сжатие кэшированных страниц блога по алгоритму Gzip.

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

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

Сам я эти компоненты еще не тестировал, но как только соберусь, то обязательно о них напишу. Пока же лишь приведу ссылки на эти компоненты для Джумлы: jFinalizer и WEBO Site SpeedUp .

Оптимизация графики и уменьшение количества запросов

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

Лично я для пакетной оптимизации использовал , о котором уже довольно подробно писал. Можно также воспользоваться и другим очень популярным онлайн сервисом для сжатия фото без потери качества от — Smush.it. Но степень сжатия фото в PunyPNG мне показалась выше, возможно за счет использования более удачных скриптов.

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

В общем, потратив полчаса мне удалось сжать PNG изображения примерно на 7 процентов в среднем, а процентов на 5.

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

Ну и последним, а также одним из самых действенных способов ускорения, может быть уменьшение количества http запросов, которое будет формироваться при загрузке страниц вашего ресурса. Уменьшить их можно, снизив число объектов загружаемых вместе с веб страницей. Мы уже говорили в начале статьи об объединении внешних Css и Js файлов как раз для этой цели.

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

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

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

Я уже стал задумываться о таком радикальном шаге, как сделать свой блог практически статическим, в корневой папке которого будут лежать обычные файлы Html, а весь движок WordPress будет работать в отдельной папке. Таким образом нагрузка будет сведена к минимуму.

Реализовать это в WordPress можно с помощью чудо плагина Really Static . Правда его версия еще не доросла до единички, но отзывы о его работы встречаются исключительно положительные. Фактически он является полным аналогом известного скрипта Maxsite Cache, который, например, использует Михаил Шакин на своем блоге.

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

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

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на ");">

Вам может быть интересно

Gzip сжатие для ускорения загрузки сайта - как его включить для Js, Html и Css с помощью файла.htaccess
Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу
Измерение и увеличение скорости сайта в GTmetrix, а так же настройка загрузки библиотеки jQuery с Google CDN
Как получить быстрый сайт - оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов
Оптимизация и сжатие CSS в Page Speed - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки

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

Какую скорость загрузки считать нормой

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

От чего зависит скорость загрузки

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

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

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

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

Как проверить скорость сайта

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

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

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

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

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

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

Как ускорить сайт Шаг 1. Оптимизация картинок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 2. Gzip-сжатие

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 вы увидите (в блоке «Внедренные приемы оптимизации»):

Шаг 3. Кэширование на стороне браузера

Когда браузер загружает сайт, то он сохраняет часть информации с него (файлы стилей, скриптов, картинки) в свою собственную память (кэш, 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 выдает список ресурсов, для которых кэширование не настроено, а можно было бы:

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

Шаг 4. Минимизация css- и js-файлов

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

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

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 и здесь заботливо показывает нам список файлов, размер которых можно уменьшить за счет минимизации:

Шаг 5. Порядок загрузки css- и js-файлов

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

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

...



...


...

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

Шаг 6. Лишние плагины или счетчики

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

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

Шаг 7. Использование CDN

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

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

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

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

Шаг 8. Сокращение числа http-запросов

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

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

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

Шаг 9. Оптимизация шрифтов

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

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

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

Шаг 10. Сокращение HTML-кода

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

Шаг 11. Оптимизация работы сервера

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

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

Шаг 12. Оптимизация скриптов и баз данных

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

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

Нет слоупокам

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

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

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

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