Ускорение загрузки сайта кэшированием браузера!

Доброго времени дня или ночи, уважаемые читатели – Sozdaiblog.ru!

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

Если, Вы помните, то первой статьёй в этой теме была «Как увеличить скорость загрузки сайта до 1 секунды».

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

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

Всем, кто не читал статью – «Вёрстка сайта при помощи — Firebug», настоятельно рекомендую прочесть. Затем, в обязательном порядке, установите – «Firebug».

Теперь, Вам будет нужно скачать и установить, ещё одно приложение для браузера. Его название – «Page Speed».

Для этого, переходим по ссылке и выбираем ваш браузер (присутствуют только Firefox и Chrome):

Далее, соглашаетесь с установкой и перезагрузкой браузера.

После перезагрузки, открываете свой сайт или блог и запускаете – «Firebug».

Здесь, в консоли фаербага, должна появиться новая вкладка – «Page Speed»:

Находим и нажимаем.

Откроется новое окно, в котором нужно другую кнопку – «Analyze Performance»:

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

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

• Красный кружок — грубые ошибки и способы их устранения.

• Жёлтый треугольник – предупреждения.

• Зелёная галочка – положительный результат и возможность улучшения.

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

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

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

Увеличение скорости загрузки сайта при помощи оптимизации кэширования браузера.

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

Думаю, у многих в окне теста скорости загрузки сайта появилась надпись с красным кружком – «Используйте кэш браузера»:

Это один из важных пунктов по ускорению.

Итак.

Вам необходимо, зайти в корневую папку Вашего ресурса и найти файл – «.htaccess», он есть у всех.

Открываем его редактором — «Notepad++» и в конце вставляем один из кодов:

  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.[0-9]{2}" force-no-vary

Затем, сохраняемся, и возвращаемся к нашему сайту. Обновляем страницу и в режиме – «Page Speed», нажимаем кнопку – «Refresh Analisys»:

И, если Вы всё сделали правильно, то красный кружочек, как минимум превратиться в жёлтый треугольник, а индикатор скорости стремительно увеличится, и будет приближаться к 100.

Вы сразу-же почувствуете прилив скорости.

Данный код, может сработать не у всех. У меня сработало, вот такое сочетание кодов:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

# кеширование в браузере на стороне пользователя

ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"

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

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

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

С уважением, Денис Черников!