Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

Используйте кеш браузера! Как использовать кеш браузера для ускорения сайта. Использовать кэш браузера


Топ-10 советов о том, как увеличить скорость загрузки страницы / Хабр

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

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

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

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

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

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

На самом деле есть несколько способ.

  • Использование CSS-спрайтов. CSS-спрайт – это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются используя свойства: background-image и background-position.
  • Использование Inline-картинок. Inline-картинки используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.
  • Объединение нескольких файлов в один. Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер. О том, как это делать на лету я писал в своей заметке здесь «Разгони свой сайт. Статическое сжатие css- и js- файлов на лету»

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, находящийся в корневой папке сайта, следующие строки:

<IfModule mod_expires.c> 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" </IfModule> Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css

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

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

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

Одним из таких CDN – является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

О том как загружать jQuery с репозитория Google я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».

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 прописать следующие строки кода:

<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/css <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html </IfModule> </IfModule>

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

<IfModule mod_deflate.c> 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[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html <ifmodule mod_gzip.c> mod_gzip_on Yes mod_gzip_item_include file \.js$ mod_gzip_item_include file \.css$ </ifmodule> </IfModule>

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

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

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

habr.com

Как настроить Используйте кеш браузера для Google PageSpeed Insights. Правильный и универсальный метод. | PingMeUp

Правильная настройка рекоммендаций Google PageSpeed Insights на www.pingmeup.ruСегодня я хочу поговорить от таком инструменте от Корпорации Добра как Google PageSpeed Insights. Многие используют этот инструмент  для оценки быстродействия сайта и вывода рекомендаций по улучшению быстродействия сайтов.

По сути своей эта онлайн-утилита сканирует код сайта, который вы ввели в поле проверки, и выдает ряд рекомендаций по улучшению быстродействия по ряду параметров.

 

 

Проверка осуществляется как для мобильных платформ (смартфоны, планшеты), так и для настольных систем (компьютеры, ноутбуки) с полноценными не мобильными операционными системами.

Сегодня затронем один из параметров оптимизации PageSpeed Insights по пункту Используйте кеш браузера.

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

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

Отмечу так же тот факт, что кеширование не распространяется на разного рода счетчики и скрипты Рамблера, Google.Analytics и т.п.

Как и у любой полезной фичи у кэширования есть  минусы — если файл на сервере изменился, то у клиента, который заходил на сайт ранее скорее всего отобразится не новая, а старая версия файла. К примеру, файл с именем Superсar.png содержал изображение спортивного авто. Вы зашли на сайт, почитали статью и покинули сайт. Но вебмастер решил изменить картинку спорткара на внедорожник, а имя файла оставил прежнее. Через пару дней вы решили еще раз прочитать ту статью с этого же компьютера и этим же браузером открыли сайт со статьей. Когда статья загрузилась вы с увидите картинку спорткар, произошло это потому, что браузер ее закэшировал с названием Superсar.png, и изменившиеся размеры изображения он проигнорировал.

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

Правильный и универсальный метод — настройка кеширования в файле .htaccess

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

Далее необходимо прописать в нем директивы:

<IfModule mod_expires.c> <FilesMatch \.(gif|png|jpg|jpeg|ogg|mp4|mkv|flv|swf|wmv|asf|asx|wma|wax|wmx|wm)$> ExpiresDefault "access plus 1 year" </FilesMatch> ExpiresActive on ExpiresByType image/jpeg "access plus 7 day" ExpiresByType image/gif "access plus 7 day" ExpiresByType image/png "access plus 7 day" <FilesMatch \.(css|js)$> ExpiresDefault "access plus 1 year" </FilesMatch> ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" </IfModule>

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

Теперь можно проверить работоспособность параметра в Google PageSpeed Insights.

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

Если у вас CMS WordPress и вы не хотите (не можете/не умеете/ вам просто лень) создавать .htaccess-файл вы можете прибегнуть к помощи плагина.

W3 Total Cache logo

Например, W3 Total Cache. Плагин бесплатный и достаточно прост в настройке и установке.

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

На этом всё. Если есть вопросы – как всегда отвечаю в комментариях.

Facebook

Twitter

Мой мир

Вконтакте

Одноклассники

Google+

Pinterest

pingmeup.ru

WordPress Super Cache - используем кеш браузера для ускорения сайта.

Зачем использовать кэш браузера?

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

Описание и возможности плагина

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

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

Что еще умеет делать WordPress Super Cache плагин:

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

Виртуальный хостинг сайтов для популярных CMS:

Установка плагина WP Super Cache

Плагин можно найти в репозитории WordPress. Для этого войдите в админ-панель под своим логином и паролем.

  • Выберите меню «Плагины» (1) и нажмите «Добавить новый» (2).
  • В строке поиска напечатайте название плагина WP Super Cache (3).
  • Найдите в появившемся списке нужный вариант и нажмите кнопку «Установить» (4).
  • После установки активируйте плагин, нажав соответствующую кнопку.

Даже после активации плагин WP Super Cache по умолчанию отключен, поэтому вверху экрана вы увидите соответствующее предупреждение.

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

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

Чтобы заставить плагин работать:

  1. Выберите опцию «Кэширование включено»
  2. Нажмите кнопку «Обновить».
  3. Затем выполните проверку правильности подключения плагина, используя кнопку «Проверить».

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

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

Настройки плагина WordPress Super Cache - как включить и настроить кеширование

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

Убедитесь, что кэширование включено, и выберите один из трех режимов обслуживания кэша:

  1. mod_rewrite – это самый быстрый вариант, который позволяет WordPress обслуживать статические страницы из кэша без обращения к PHP интерпретатору на сервере;
  2. режим PHP используется по умолчанию и потребляет больше ресурсов, что может оказаться невыгодным в случае большой загруженности сервера;
  3. упрощенное кэширование менее производительное, чем предыдущие варианты, но и ресурсов затребует минимум.

Следующие параметры требуют настройки в разделе «Разное».

  1. Опция «Сжимать файлы кэша» может конфликтовать с другими алгоритмами сжатия. Если к сайту подключены еще плагины, обеспечивающие сжатие, не устанавливайте этот флажок.
  2. Кэширование страниц не требуется для авторизованных пользователей или тех, кто оставляет комментарии на сайте. Включите эту опцию, чтобы разрешить таким посетителям просмотр страницы в ее текущем виде.
  3. Автоматическая перестройка кэша не нужна, если на сайте имеется часто обновляемая информация. В противном случае посетители увидят устаревшие страницы.
  4. Ошибка 304 возникает, когда сервер сообщает браузеру, что со времени последнего визита содержимое страницы не изменилось. В этом случае загрузка происходит из кэша браузера, что дополнительно ускоряет работу сайта.
  5. На странице с параметром GET присутствует поиск по определенным критериям (даты, цена), специфичным при каждом посещении. Такие страницы кэшировать не нужно.
  6. Если зарегистрированные пользователи считаются анонимными, кэшированые страницы будут выдаваться всем без исключения.
  7. Последняя опция в этом разделе – это реклама плагина со встроенной в футере ссылкой на автора.

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

  1. Если на сайте присутствуют динамические элементы, при кэшировании некоторые из них могут работать неправильно. В этом случае потребуется режим упрощенного или PHP-кэширования и включенная опция динамического кэширования.
  2. Для сайтов, разработанных специально для мобильных устройств, потребуется включить поддержку, если шаблон не является адаптивным.
  3. Опция «Убрать поддержку UTF-8» не требуется, если все символы на сайте отображаются нормально.
  4. Очистку файлов кэша при новых публикациях можно включить, если сайт часто обновляется.
  5. Дополнительная сверка понадобится, если возникают проблемы с кэшированием какой-либо страницы.
  6. Если посетитель оставил комментарий на странице, после его модерации кэш обновится.
  7. Посмотреть кэшированные страницы можно на владке «Состояние кэша», поэтому опция необязательна.
  8. Опция замедляет работу файлов, предупреждая возможную проблему на сервере при кэшировании страниц.
  9. Опция для разработчиков загружает кэш только после загрузки WordPress.

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

Если вы выбрали способ кэширования страниц методом mod-rewrite, плагин запросит обновление прав на запись. Для этого прокрутите страницу вниз до кнопки «Обновить правила Mod-Rewrite» и нажмите ее.

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

Вы можете запретить кэширование определенной информации на сайте (например, раздел с постоянно обновляющейся информацией), установив флажок в нужном разделе «Допустимые имена и Запрещенные адреса» или вручную дописать адреса страниц.

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

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

Перейдите на вкладку «Общий кэш», чтобы настроить параметры режима предварительной загрузки. Для чего может понадобиться использовать полностью статический контент?

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

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

Вкладка «Плагины» понадобится, только если вы собираетесь подключить другие плагины, не влияющие на кэширование файлов.

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

Использование кеша браузера, как почистить кеш ВордПресс

Через некоторое время работы плагина WP Super Cache вы заметите формирование кэша для сайта. Правильная настройка плагина значительно улучшит время загрузки сайта. Кэшированные страницы хранятся в виде HTML или PHP файлов на сервере вашего хостинга. Обычно сервер знает, какие страницы были обновлены, и выдает пользователю свежую версию. Однако, если возникают проблемы с отображением обновленной информации, можно вручную очистить кэш. Удалите кэшированные страницы с сервера, используя команду на панели управления «Удалить весь кэш» или нажав на такую же кнопку в настройках плагина.

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

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

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

www.ipipe.ru

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

cache-browserВсем привет дорогие друзья. Совсем недавно я рассказывал статью о том, как можно проверить скорость загрузки сайта при помощи сервиса PageSpeed Insights от компании Google. То есть, данный сервис нам предоставлял какие-то рекомендации для того чтобы увеличить скорость загрузки страниц сайта для мобильных устройств, а также обычных компьютеров и ноутбуков.

Так вот, данный сервис почти всегда и на все дает такую рекомендацию, чтобы Вы использовали кеш браузера пользователя (то есть того, кто заходит на Ваш ресурс). Поэтому в данной статье мы и рассмотрим алгоритм кеширования для хостингов, которые работают под управлением Apache. Вообще, таких серверов большинство (см. преимущества Linux и Windows хостингов). Для этих целей нам понадобится файл .htaccess, при помощи которого мы и будем задавать правила для хостинга. Я думаю, что Вы знаете, где он находится (в корневой папке хостинга, обычно это public_html). Поэтому Вы его копируете себе на компьютер и открываете через текстовый редактор, например Блокнот. Только перед тем, как его редактировать, не забудьте сделать его копию.

Если в нем уже присутствовали какие-то данные, то следующий код Вам придется добавлять в конец файла .htaccess, а он будет следующим:

# кеширование в браузере на стороне пользователя <IfModule mod_expires.c> 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" </IfModule> # Cache-Control <ifModule mod_headers.c> # 30 дней <filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>   # 30 дней <filesMatch "\.(css|js)$"> Header set Cache-Control "max-age=2592000, public" </filesMatch>   # 2 дня <filesMatch "\.(xml|txt)$"> Header set Cache-Control "max-age=172800, public, must-revalidate" </filesMatch>   # 1 день <filesMatch "\.(html|htm|php)$"> Header set Cache-Control "max-age=172800, private, must-revalidate" </filesMatch> </ifModule>

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

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

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

Также советуем почитать на PressDev.RU

pressdev.ru

Как сделать кэширование в браузере для wordpress сайта ? — ТОП

Привет !

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

Плагин — Browser Caching with .htaccess, вы сможете установить прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин.

 

24-11-2015 19-17-08_mini

 

Чтобы настроить плагин, перейдите по вкладке: Инструменты — Browser Caching.

 

24-11-2015 19-22-37_mini

 

На странице настроек плагина, если нажать на кнопку — modify Expires, то вы сможете изменить временные сроки кэширования файлов, но я рекомендую оставить всё без изменений. По умолчанию всё правильно указано.

 

24-11-2015 19-33-29_mini

 

Нажав на кнопку — check .htaccess file, можно проверить файл .htaccess на наличие кода кэширования браузером. Если в файле нет строк указанных зелённым цветом, то значит у вас не включено кэширование браузером. Значит можно активировать кэширование.

 

24-11-2015 19-41-26_mini

 

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

 

Чтобы активировать кэширование в браузере, нажмите на кнопку — activate Browser Caching.

 

24-11-2015 19-46-02_mini

 

После успешной активации кэширования, у вас в верху страницы появится надпись:

 

— You are now using BROWSER CACHING ! — Сейчас вы используете браузер кэширование !

 

24-11-2015 19-46-22_mini

 

Вот и всё, можете забыть про слово кэш, теперь это не ваша забота. Если остались вопросы, напишите комментарий. До новых встреч !

 

info-effect.ru

info-effect.ru

Использование кеша браузера для ускорения загрузки сайта

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

Использование кеша браузера для ускорения загрузки сайта

Содержание статьи

Определение скорости загрузки сайта

page-loadВ интернете можно найти большое количество различных сервисов, тестирующих скорость загрузки сайта как для обычных компьютеров, так и для портативных устройств. Такое разделение появилось относительно недавно, а причина его вполне очевидна — процент мобильного трафика значительно вырос за последние несколько лет и продолжает свой стремительный рост. Если раньше можно было буквально плюнуть на адаптацию дизайна сайта под мобильные устройства, потеряв 1% трафика, то сейчас это уже непозволительно из-за большой доли трафика с портативных устройств, которая может доходить до 25%, а то и больше. Все конечно зависит от самого сайта, целевой и возрастной аудитории.

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

adaptive-layoutЕсли рассматривать проблему с мобильными версиями, учитывая тему сегодняшней статьи, в которой мы рассматриваем один из способов ускорения загрузки — использование кеша браузера, то адаптивная верстка будет самым худшим вариантом. Все дело в том, что вес страницы, сверстанной адаптивно, не меняется, независимо от того, с какого устройства эта страница просматривается, поэтому лучшим решением будет использование разных макетов, но речь сегодня не об этом.

Возвращаясь к сервисам проверки скорости загрузки сайта, хочется отметить среди них самый авторитетный — конечно же это сервис, принадлежащий Google, называемый PageSpeed Insights. Удобный и очень качественный инструмент, который с высокой точностью определит скорость загрузки вашего сайта как для обычных компьютеров, так и для мобильных устройств. Для тех и других вы получите различные оценки по 100-бальной шкале. Чем выше вы наберете баллов, тем лучше.

Использование кеша браузера для ускорения загрузки сайта

use-browser-cacheОдной из основных причин невысокой оценки скорости в PageSpeed Insights является отключенный кеш браузера. Данный момент является одним из самых важных, поэтому именно его мы и решили рассмотреть подробней. Наверняка, подавляющее большинство сайтов, проходящих тест на скорость загрузки, сталкиваются именно с этой ошибкой. Вернее ошибкой это не считается, т.к. подсвечивается не красным восклицательным знаком, а желтым, что означает предупреждение.

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

Для чего нужно кеширование

muscle-memoryГлавной задачей кеширования статических ресурсов является разгрузка сервера. Дело в том, что генерация страницы — процесс довольно сложный, который может состоять из нескольких этапов. При составлении финального HTML-кода происходит несколько обращений к базе данных, отрабатываются служебные функции, подключаются дополнительные файлы и т.д. Суть здесь в том, что все эти операции проводить несколько раз подряд нет никакого смысла. Речь конечно идет о документе, в который не было внесено никаких изменений с момента последней загрузки. В случае, если с прошлой генерации кода страницы на ней ничего не изменилось, можно предоставить информацию из заранее созданного кеша этой страницы. Таким образом не нужно будет заново обращаться к базе данных, осуществлять выборку, сортировку, подключать функции и т.д. Вся информация уже была сгенерирована, а затем предусмотрительно сохранена в кеше браузера. При первой же необходимости из кеша вытаскивается требуемая в данный момент статичная страница и с гораздо большей скоростью выводится на экран.

serverИными словами кеширование придумали для того, чтобы оптимизировать работу сервера, исключив повторные обращения. Похожая ситуация нами уже рассматривалась, когда мы настраивали заголовки сервера для поисковых систем — если поисковый робот отправляет в заголовке If-Modified-Since, то для страницы, которые не изменились с момента последнего посещения роботом, отдают 304 заголовок, говорящий поисковому боту, что пока смысла на страницу заходить нет, т.к. ничего нового на ней не появилось.

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

  • JavaScript;
  • CSS;
  • графические файлы;
  • мультимедийные файлы.

Основные рекомендации по кешированию

  1. Статичные ресурсы, которые мы перечислили в предыдущей главе, должны кешироваться на срок не менее семи дней.
  2. Блоки, которые подтягиваются с внешних источников (виджеты) нужно кешировать минимум на 1 день.
  3. Вместо Cache-control лучше использовать Expires, т.к. этот заголовок лучше поддерживается, если говорить об универсальности.
  4. Не устанавливать продолжительность кеширования более 1 года, т.к. это противоречит стандартам RFC.

Самые значимые заголовки Expires и Cache-Control

Данные заголовки имеют высокий приоритет и считаются самыми значимыми. Именно с них начинается настройка кеширования в браузере. Если вы не уверены, что какая-то страница в ближайшее время будет обновляться, установите продолжительный срок кеширования, используя Expires. В таком случае браузер, руководствуясь вашим указанием, не будет отправлять GET-запросы на сервер, а вместо этого будет вытаскивать информацию из своего кеша. Как только срок действия кеша истечет, страница загрузится с сервера вновь и в этот же момент будет создана новая версия кеша, которая будет действовать указанный период времени.Пример использования Expires (обратите внимание на формат записи даты истечения срока кеша):

<meta name="expires" content="tue, 01 Jun 2010">

Примеры использования Cache-Control:

<meta http-equiv="Cache-control" content="public"> <meta http-equiv="Cache-control" content="private"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache-control" content="no-store">

Как видно из примера, возможны 4 значения:

  1. Public — кэширование запросов, защищенных аутентификацией, которые по умолчанию не кешируются.
  2. Private — только однопользовательское кеширование (в браузере пользователя).
  3. no-Cache — принуждение браузера каждый раз посылать GET-запросы на сервер для проверки актуальности кеша.
  4. no-Store — запрет кеширования в любом случае.

Использование заголовков Last-Modifed и ETag

Заголовки Last-Modified и ETag указывают браузеру на то, как он должен определять соответствие ресурсов в момент кеширования. Заголовок Last-Modified использует дату, в то время как ETag уникализирует ресурс по идентификатору, например, с помощью хеша контента. Данные заголовки принято называть «слабыми», так как браузер руководствуется алгоритмом, не имеющим строгого обоснования для определения необходимости передачи GET-запроса на сервер или же отдачи информации из кеша.

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

При использовании заголовков для кеширования, нужно не переусердствовать и выбрать только по одному из указанных выше. Как мы уже говорили ранее, лучше использовать Expires, а не Cache-Control. Совместное же использование обоих указанных заголовков не имеет никакого смысла и является излишеством. То же самое можно сказать и насчет использования Last-Modified и ETag — стоит выбрать только один из предложенных.

Пример импользования Last-Modified:

<meta http-equiv="Last-Modified" content="Fri, 18 Sep 2015 23:31:25 GMT">

Манипуляции с URL кешируемых ресурсов

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

Если вы даже приблизительно не знаете, сколько времени ресурс будет оставаться статичным и когда произойдет его следующее изменение, устанавливайте продолжительный срок кеширования, но при этом нужно предусмотреть одну вещь — если, например, файл CSS или JavaScript хорошенько закешировать, внесение небольших изменений в эти файлы не приведет к обновлению данных кеша. Данная проблема решается заменой URL ресурса, в который были внесены изменения, но «его срок еще не подошел». Если URL ресурса изменится, то браузер обязательно направит GET-запрос к вашему серверу, чтобы получить новую версию документа, после чего так же добавит ее в свой кеш.

md5-hashОбычно для изменения URL статичных файлов, в которые до истечения срока кеширования вносятся какие-либо изменения, используют 128-битное шестнадцатеричное число, представляющее собой хеш содержимого измененного ресурса.

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

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

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

makeasite.ru

Используйте кеш браузера! Как использовать кеш браузера для ускорения сайта

При проверке скорость загрузки сайта сервисом PageSpeed Insights от Google предоставляются рекомендации для увеличения скорости загрузки страниц сайта.

Самая часто упоминаемая рекомендацию об использовании кеша браузера. Как ее реализовать? Для этого необходимо в основном файле .htaccess вашего сайта необходимо внести следующий код:

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

ExpiresActive OnExpiresDefault "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"

# Cache-Control

# 30 суток

Header set Cache-Control "max-age=2592000, public"

# 30 суток

Header set Cache-Control "max-age=2592000, public"

# 2 суток

Header set Cache-Control "max-age=172800, public, must-revalidate"

# 1 сутки

Header set Cache-Control "max-age=172800, private, must-revalidate"

 

Внесли - проверьте еще раз свой сайт PageSpeed Insights. Рекомендация будет реализована.

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

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

По истечении времени кэширования файлы снова обновятся с хостинга сайта. И все начнется снова...

Скорости вашим сайтам!

prokoshkin.ru


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..