Что значит используйте кэш браузера. WordPress Super Cache плагин, используем кэш браузера
«», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed Insights. Каждый владелец сайта сталкивался с проблемой сложности закешировать js скрипты сторонних сайтов.
Это не такой важный показатель для оптимизации, по сути происходит перенос из шапки сайта CSS и JS элементы в футер, к тому, если посмотреть на ресурсы Google с этим пунктом у них проблемы:)
Если вам всё таки захочется оптимизировать сайт или вашим клиентам методом кеширования сторонних скриптов, к примеру. наблюдать красивую цифру на счетчике в анализаторе, то достаточно выполнить действия ниже на которые уйдет несколько минут.
Кеш браузера своих элементов
Делаем кеш для разных скриптов, пример взят с блога Devaka ru (на момент написания статьи)
К примеру:
/assets/copyright.min.js (не указан срок действия)
/assets/i/566.jpg (не указан срок действия)
/assets/i/icons.png (не указан срок действия)
/i/postcomm-left.png (не указан срок действия)
/i/postcomm-right.png (не указан срок действия)
Исправляем первую проблему, заходим в файл.htaccess, что находится к корне сайта и вставить в самый низ этот код:
# сжатие text, html, javascript, css, xml:
Примеры сторонних скриптов
Если в первом шаге, все сделали верно, должны увидеть примерно такой список:
Используйте кеш браузера для следующих ресурсов
У вас конечно, может быть всего несколько URL на метрику и аналитику например, но это не столь важно, инструкция исправления одинаков для всех.
Кеш сторонних элементов
Изначально статья должна была быть посвящена только этим пунктам, однако чувствуя, что будет много вопросов было добавлено ещё пару пунктов.
Повлиять на время кеша стороннего ресурса никак нельзя, но можно сделать на своем веб-проекте Самый правильных ход в этой ситуации, скачивать автоматически свежие скрипты метрики, аналитики и т.д. к себе на сайт с помощью крона (скрипт присутствует)
Давайте теперь по порядку!
Шаг 1. Скопируем список всех скриптов на которые указывает Google PageSpeed в блокнот или прямо с браузера.
Шаг 2. Создайте файл на хостинге с расширением php и вставляем в него следующий код:
Внимание! У вас нет прав для просмотра скрытого текста.
В коде для примера 3, но вы можете создать сколько нужно пунктов, просто копируйте и добавляйте ниже или удалите лишние.
В этой строке меняем 3 значение:
Используйте кеш браузера для Google PageSpeed
1. Скрипт который будем закачивать к себе на сайт
Внимание! У вас нет прав для просмотра скрытого текста.
2. Путь куда сохранять файл:
Realpath("./js")
В этом примере это папка js, т.е. точный путь будет www.сайт/js/ (папку нужно создавать самим и выставить для неё права CHMOD для записи)
3. Имя скрипта, если с расширением.js, то пишем вместе с ним, если без него или с другим, то делаем все так как в примере выше. Обращайте внимание, чтобы не было файлов с одинаковыми названиями.
Шаг 3. Заливаем отредактированный файл на сервер
Шаг 4. Ставим файл на крон для автоматического обновления файлов
Для того чтобы избежать некорректной работы с сервисами, если они внесут изменения в скрипты, крон будет автоматически заходить и обновлять их у себя на сервере.
Заходите к себе в хостинг панель и выбираете вкладку CRON и прописываете команду, а также указываем время раз в час/сутки или любое другое время.
Wget -q -O - /dev/null http://www..php >/dev/null 2>&1
Не забываем сменить URL и возможно синтаксис команды у вас будет другой, посмотрите примеры cron команд в справке хостинга или утоните в тех.поддержке.
Шаг 5. Меняем путь к JS в счетчике или скрипте
Если был путь в счетчике https://mc.yandex.ru/metrika/watch.js, то заменяем его на путь внутри сайта, например http://www..js
Вот и все, теперь в списке PageSpeed Insights у вас не должно быть сообщений о настройке кеша браузера.
Скачать " включаем кеш браузера для Google PageSpeed " инструкцию в архиве Вы не можете скачивать файлы с нашего сервера
Представляем полезную статью «Включаем кеш браузера для Google PageSpeed», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed всё лучшее у нас форумы, хаки, модули, шаблоны.
В данной статье рассмотрена настройка кеширования статических файлов через.htaccess, что позволит быстрее загружать сайт.
Ускорить загрузку Вашего сайта можно с помощью кэширования. Для решения этой задачи Вы можете воспользоваться модулем headers веб-сервера Apache. Он позволяет контролировать и изменять заголовки HTTP-запросов и HTTP-ответов. Вся суть в этом случае сводится к тому, что бы заставить браузер загрузить редко-изменяемые данные с сервера в локальный кэш всего один раз, а далее, при заходе на сайт, использовать данные из кэша. Можно установить кэширование для определенных типов файлов на строго определенное время, по истечению которого файлы будут загружены с сервера вновь. Делается это достаточно просто:
Для файлов с указанными расширениями в конструкции FilesMatch устанавливается отдаваемый сервером заголовок Cache-Control и переменная max-age , в которой указывается время сохранения файлов в кеше в секундах. Добавьте или удалите расширения файлов, которые для Вас будут уместны в данном случае.
Если какие-то файлы нет необходимости кэшировать, то просто не включайте их в список. Можно также запретить принудительно кэширование файлов, чаще всего отключают кэширование для динамических файлов, например различных сценариев. Добавьте ниже приведенный код в Ваш файл .htaccess , что бы отключить кэширование для скриптов, предварительно внеся актуальные изменения соответственно Вашему случаю:
Как видно, здесь указаны расширения файлов, которые не требуется кэшировать, просто укажите требуемые типы файлов.
Еще одни способ управлять кэшированием - это воспользоваться модулем expires . Этот модуль контролирует установку HTTP-заголовков для кэширования данных на стороне браузера. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.
Ниже представлен простой пример использования модуля expires в файле .htaccess :
В этом примере мы включаем модуль, устанавливаем кэширование по умолчанию на 1 месяц, а далее назначаем для файлов с расширением gif и jpg врема хранения в кэше plus 2 months . Время можно указать в годах, месяцах, неделях, днях, часах, минутах, секундах. В том числе можно использовать вариант вида:
ExpiresByType text/html "access plus 1 month 15 days 2 hours" ExpiresByType image/gif "modification plus 5 hours 3 minutes"
В качестве типов файлов можно указывать различные MIME types , вот некоторые из них в качестве примера:
Image/x-icon image/jpeg image/png image/gif application/x-shockwave-flash text/css text/javascript application/javascript application/x-javascript text/html application/xhtml+xml
Всем привет! Сегодня я хочу рассказать, как сделать кэш внешних элементов в Google PageSpeed Insights, для увеличения скорости вашего сайта. Суть будет заключаться в том, чтоб скачать js и другие подгружаемые файлы с внешних ресурсов к себе на сайт.
Как включить кэширование файлов в браузере
Прежде, чем писать о том, как подключить кэширование файлов для вашего сайта в браузере на стороне пользователя, хочу пояснить, что такое кэш.
Кэш - хранение просмотренных файлов на вашем компьютере, что в свою очередь увеличивает скорость загрузки страницы, либо сайта при повторном его просмотре. Кэш имеет свой срок хранения, после чего он обновляется, либо удаляется.
С тем, что такое кэш мы разобрались. Теперь, давайте проверим наш сайт в сервисе PageSpeed и убедимся, что google рекомендует нам использовать кэш браузера. Вот выдержка из сообщения .
Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
Если эти файлы расположены на вашем ресурсе, то вы можете прописать код кэширования браузера в файле htaccess , расположенным в корне сайта. Вот сам код, если кому нужен.
# сжатие text, html, javascript, css, xml:
Вставив этот код в файл htacces, вы можете перепроверить свой сайт в сервисе google PageSpeed
Insights. Если в разделе «используйте кэш браузера
» всё отлично, значит, у вас там будут
только ссылки на внешние ресурсы, такие как аналитика, социальные
кнопки и прочее.
Лично, я параллельно с этим кодом использую возможности своего хостинга
для кэширования файлов на стороне пользователя. Это выглядит следующим образом.
Как видите, мой хостинг позволяет включить кэширование на стороне браузера и выставить уровень сжатия и период хранения файлов. Также, я использую плагин для быстрой загрузки страниц wp super cache, но о нём я, может, как-то расскажу своим читателям, подписавшимся на обновления блога .
Как включить кэш внешних файлов в Google PageSpeed Insights
Если вы выполнили рекомендации для кэширования файлов у себя на блоге. Вы должны, в инструменте Google PageSpeed Insights, увидеть только ссылки на внешние ресурсы. У вас должно быть, что-то схожее.
Как видно из скриншота, Google PageSpeed Insights ругается на внешние ресурсы, такие как Яндекс метрика, google аналитика и другие. Сейчас я вам расскажу, как исправить эту ошибку и сделать ссылки на внешние ресурсы внутренними и кэшируемыми на стороне вашего сервера.
Используем кэш браузера для внешних ресурсов
Так, как файлы внешних ресурсов не принадлежат нашему сайту их необходимо в первую очередь скачать. Для того чтоб скачать внешний файлы со сторонних ресурсов, мы должны создать файл kesh_js.php со следующим кодом. Советую, пользоваться блокнотом Notepad++ для быстрого и корректного добавления кода в файл.
Для того чтоб прописать нужный нам код. берем, копируем эту ссылку:
downloadJs (‘сюда вставьте ссылку из PageSpeed /metrika.js ‘ , realpath («./papka_js « ) . ‘/metrika.js — сюда вставьте конечный файл’ ) ;
Таким образом, вы можете добавлять множество запросов. Единственное не забывайте следить, чтоб у вас не было повторяющихся файлов в папке. В этом случае, используйте один файл для нескольких скриптов, как правило, это один и тот же скрипт, либо переименуйте его.
После, того, как добавили код в файл kesh_js.php , вы можете назвать его иначе. Его необходимо залить в корень нашего сайта. Также в корне сайта, необходимо создать папку papka_js , либо под другим именем с правами доступа 777/755. Для того чтоб выставить права доступа папке, советую использовать Fillizille.
Для этого просто открываем программу fillizilla. Далее, выбираем папку и выставляем права доступа, обязательно 777, после чего меняем обратно на 755. Это также можно сделать в панели управления вашего хостинга, если нет желания использовать эту программу. Я покажу, скриншот выставления прав доступа в программе Fillizilla.
После чего открываем раздел «права доступа к файлу
» и вводим наше значение 777/755.
Как включить планировщик заданий для сайта (cron)
Следующим шагом, нам нужно включить планировщик заданий для нашего сайта, чтоб наш скрипт https://адрес вашего сайта/kesh_js.php запускался, ежедневно. Благодаря, этому на нашем сайте, будет всегда актуальная версия файлов с внешних ресурсов. Даже, если разработчики внесут изменения в свой код, мы всегда будем иметь рабочую версию на сайте, благодаря планировщику заданий.
Для того чтоб запланировать задания для вашего сайта, вам нужно перейти в панель управления своим хостингом и прописать один из вариантов кода.
запуск задания через GET . При необходимости запуска cron-задания с учётом контекста движка:
GET https://site.ru/script.php
где site.ru - имя вашего домена, а script.php - имя файла с заданием;
запуск задания через WGET . Альтернативный вариант запуска cron-задания с учётом контекста движка:
Wget -q -O - https://site.ru/script.php> /dev/null 2>&1
где site.ru - имя вашего домена, а script.php –- имя файла с заданием;
В нашем случае, мы должны прописать:
GET https://адрес вашего сайта/kesh_js.php
Либо выбрать альтернативный вариант, я лично остановился на первом.
С тем, что прописывать мы разобрались, теперь открываем наш хостинг и переходим в панель управления им. Я использую, панель управления ISPmanager, если у вас другая ищите вкладку планировщик задания, либо cron.
Теперь, открываем вкладку «создать».
После чего чистим кэш браузера. Для Google Chrome, используем сочетание клавиш ctrl+shift+delete и проверяем работу сайта. Также, рекомендую ещё раз прогнать ваш сайт через инструмент PageSpeed Insights.
На этом у меня все, желаю вам хорошего показателя , благодаря этому способу ускорения страницы. В следующей статье, я расскажу, как создать красочную кнопку подписки youtube для своего блога, так что не забудьте подписаться на обновления . Всем пока!
Эрик Бидельман
Перевод: Влад Мержевич
Доступность в оффлайне становится всё более важной для веб-приложений. Да, все браузеры имеют механизмы кэширования, но они ненадежны и работают не всегда ожидаемо. HTML5 устраняет некоторые из этих неприятностей с помощью интерфейса ApplicationCache .
Использование интерфейса кэша даёт вашему приложению три преимущества:
- автономный просмотр - пользователи могут исследовать ваш сайт целиком, когда они находятся в оффлайне;
- скорость - ресурсы кэшируются локально, поэтому загружаются быстрее;
- снижение нагрузки на сервер - браузер загружает с сервера только изменённые ресурсы.
Кэш приложения (или AppCache) позволяет разработчику указать, какие файлы браузер должен кэшировать и сделать доступными для оффлайновых пользователей. Ваше приложение будет работать корректно, даже если пользователь нажимает кнопку «Обновить», находясь в автономном режиме.
Файл манифеста кэша
Файл манифеста кэша является простым текстовым файлом со списком ресурсов, которые браузер должен кэшировать для доступа в автономном режиме.
Справка по файлу манифеста
Чтобы разрешить кэш приложения включите атрибут manifest в тег .
...
Атрибут manifest должен быть на каждой странице вашего приложения, которую вы хотите кэшировать. Браузер не кэширует страницу, если она не содержит атрибут manifest (и если она явно не упомянута в списке файла манифеста). Это означает, что любая страница с атрибутом manifest посещаемая пользователем будет неявно добавляться в кэш приложения. Таким образом, нет необходимости перечислять все страницы в манифесте.
Атрибут manifest задаёт абсолютный или относительный URL, но абсолютный путь должен быть в рамках того же веб-приложения. Файл манифеста может иметь любое расширение, но требуется указать правильный MIME-тип (см.ниже).
...
Файл манифеста должен отдаваться с MIME-типом text/cache-manifest . Возможно, вам придётся добавить пользовательский тип файла на веб-сервере или через настройку.htaccess. Например, чтобы настроить этот MIME-тип в Apache, добавьте в конфигурационный файл:
AddType text/cache-manifest .appcache
Или в файл app.yaml на Google App Engine:
Url: /mystaticdir/(.*\.appcache) static_files: mystaticdir/\1 mime_type: text/cache-manifest upload: mystaticdir/(.*\.appcache)
Структура файла манифеста
Простой манифест может выглядеть примерно так:
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js
В этом примере кэшируется четыре файла указанных в манифесте.
Следует отметить несколько вещей:
- строка CACHE MANIFEST должна идти первой, и обязательна;
- данные кэширования сайтов ограничены 5 Мб. Однако если вы пишете приложение для Chrome Web Store , использование unlimitedStorage снимает это ограничение;
- если файл манифеста или ресурс, указанный в нём не может быть скачан, весь процесс обновления кэша провалится, браузер станет использовать старый кэш приложения.
Давайте рассмотрим более сложный пример:
CACHE MANIFEST # 2010-06-18:v2 # Явно кэшируемые основные записи CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Ресурсы, которые потребуются пользователю в онлайне NETWORK: login.php /myapi http://api.twitter.com # static.html будет использоваться, если main.py недоступен # offline.jpg будет использоваться вместо всех изображений в images/large/ # offline.html будет использоваться вместо всех HTML-файлов FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html
Строки, начинающиеся с решётки (#), являются комментариями, но также могут служить и другой цели. Кэш приложения обновляется только при изменении файла манифеста. Так, например, при редактировании изображений или функций JavaScript, эти изменения не будут кэшированы повторно. Вы должны изменить файл манифеста, чтобы сообщить браузеру обновить файлы в кэше. Создание комментария с номером версии, контрольной суммой или датой это один из способов гарантировать пользователям, что они используют последнюю версию. Вы можете также программно обновлять кэш, когда новая версия будет готова, как описано в разделе про обновление кэша.
Манифест может иметь три различных раздела: CACHE, NETWORK и FALLBACK.
CACHE: Это стандартный раздел для записи. Файлы, перечисленные в этом блоке (или сразу после CACHE MANIFEST) будут явно кэшированы после того как они скачаны в первый раз.
NETWORK: Файлы, перечисленные в этом разделе, это ресурсы, которые требуют подключения к серверу. Все запросы к этим ресурсам идут в обход кэша, даже если пользователь находится в оффлайне. Можно использовать * для задания шаблона.
FALLBACK: Дополнительный раздел указывает резервные страницы, если ресурс недоступен. Первый URL является ресурсом, второй резервом. Оба адреса должны быть относительны и быть в том же месте, что и файл манифеста. Можно использовать * для задания шаблона.
Эти разделы могут быть перечислены в любом порядке, каждый раздел может встречаться больше одного раза.
Следующий манифест определяет «универсальные» страницы (offline.html), которые будут отображаться, когда пользователь пытается получить доступ к корню сайта в автономном режиме. Он также заявляет, что все другие ресурсы (например, на удаленном сайте) требуют подключения к Интернету.
CACHE MANIFEST # 2010-06-18:v3 # Явно кэшируемые записи index.html css/style.css # offline.html будет показан в автономном режиме FALLBACK: / /offline.html # Все другие ресурсы (включая сайты) требуют подключение к сети NETWORK: * # Дополнительные ресурсы в кэше CACHE: images/logo1.png images/logo2.png images/logo3.png
HTML-файл, который ссылается на ваш файл манифеста, кэшируются автоматически. Нет необходимости включать его в манифест, однако рекомендуем сделать это.
Обновление кэша
Оффлайновое приложение остаётся в кэше, пока не произойдёт одно из следующих событий:
- пользователь очищает хранилище данных в браузере для вашего сайта;
- файл манифеста изменился. Обновление файла упомянутого в манифесте не означает, что браузер будет повторно кэшировать этот ресурс. Файл манифеста сам должен быть заменён;
- кэш приложения обновился программно.
Статус кэша
Объект window.applicationCache выступает вашим программным доступом к кэшу браузера. Свойство status используется для проверки текущего состояния кэша.
Var appCache = window.applicationCache; switch (appCache.status) { case appCache.UNCACHED: // UNCACHED == 0 return "UNCACHED"; break; case appCache.IDLE: // IDLE == 1 return "IDLE"; break; case appCache.CHECKING: // CHECKING == 2 return "CHECKING"; break; case appCache.DOWNLOADING: // DOWNLOADING == 3 return "DOWNLOADING"; break; case appCache.UPDATEREADY: // UPDATEREADY == 5 return "UPDATEREADY"; break; case appCache.OBSOLETE: // OBSOLETE == 5 return "OBSOLETE"; break; default: return "UKNOWN CACHE STATUS"; break; };
Для программного обновления кэша вначале вызывается applicationCache.update(). Он будет пытаться обновить кэш пользователя (который требует, чтобы файл манифеста изменился). Наконец, когда applicationCache.status находится в состоянии UPDATEREADY, вызов applicationCache.swapCache() обновит старый кэш на новый.
Var appCache = window.applicationCache; appCache.update(); // Попытка обновить кэш пользователя... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); // Успешно, меняем на новый кэш }
Использование update() и swapCache() не служит обновлением ресурсов пользователю. Этот поток просто говорит браузеру проверить новый манифест, скачать указанное обновленное содержания и повторно заполнить кэш приложения. Таким образом, страница скачивается с сервера дважды, в первый раз заполняется новый кэш приложения, а во второй раз обновляется содержание страницы. Хорошая новость: вы можете избежать этого двойного скачивания. Для обновления у пользователя новой версии вашего сайта установите отслеживание события updateready во время скачивания страницы.
// Проверить, если новый кэш доступен при скачивании страницы window.addEventListener("load", function(e) { window.applicationCache.addEventListener("updateready", function(e) { if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { // Браузер скачивает новый кэш // Заменяет его и обновляет страницу window.applicationCache.swapCache(); if (confirm("Новая версия этого сайта доступна. Загрузить её?")) { window.location.reload(); } } else { // Манифест не поменялся, ничего нового на сервере } }, false); }, false);
События AppCache
Как вы можете ожидать, дополнительные события следят за статусом кэша. Браузера запускает события во время процесса скачивания, обновления кэша приложения и возникновения ошибки. Следующий фрагмент прослушивает события для каждого типа события кэша:
Function handleCacheEvent(e) { //... } function handleCacheError(e) { alert(Ошибка: Не удалось обновить кэш!"); }; // Выполняется после первого кэширования манифеста appCache.addEventListener("cached", handleCacheEvent, false); // Проверка обновления. Всегда идёт первым в последовательности событий appCache.addEventListener("checking", handleCacheEvent, false); // Обновление найдено, браузер забирает ресурсы appCache.addEventListener("downloading", handleCacheEvent, false); // Манифест вернул ошибку 404 или 410, загрузка прервана // или манифест изменился, пока происходил процесс загрузки appCache.addEventListener("error", handleCacheError, false); // Выполняется после первого скачивания манифеста appCache.addEventListener("noupdate", handleCacheEvent, false); // Выполняется, если файл манифеста возвращает 404 или 410. // Эти результаты в кэше приложения будут удалены appCache.addEventListener("obsolete", handleCacheEvent, false); // Выполняется для каждого ресурса перечисленного в манифесте, пока они забираются appCache.addEventListener("progress", handleCacheEvent, false); // Выполняется, когда ресурсы манифеста были недавно скачаны appCache.addEventListener("updateready", handleCacheEvent, false);
Если файл манифеста или указанный ресурс не может быть скачан, все обновления сбрасываются. Браузер будет продолжать использовать старый кэш приложения в случае такого отказа.
Хочу разобраться с советом, который даёт мне в этом отношении Google: Используйте кэш браузера ! Ну что же, попробуем решить!
Пояснения от Google: Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.
Решение этого вопроса заключается в том, чтобы в файл.htaccess вставить код, который будет управлять кэшем на браузере пользователя и указывать, как долго нужно хранить эти данные. Вот какой код я вставил себе, по совету других вебмастеров:
# кеширование в браузере на стороне пользователя
Как видите, список внушительный, тут в основном файлы стилей и скрипты. Может это всё и не так уж сильно ускорит сайт, но хочется разобраться из принципа.
Люди пишут, что не все хостинги поддерживают эту функцию на уровне сервера, возможно, мой хостинг тоже. Я написал в техническую поддержку и стал ждать ответа. Ответа пока нет:(
Только что ответили, после моего ещё одного сообщения. Ответ был таков:
Доброго времени суток!
Кэш работает как надо, не кэшируются только одномоментные удаленные библиотеки которые забираются с твиттера, твимга и т.д. на сколько видите, с остальным все нормально.
Ну я пока поверю, что так все оно и есть. У вас есть мысли по этому поводу? Одно из решений этой проблемы я описал в ...
СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:
1. Payoneer - Самая популярная в мире платежная система для фрилансеров. Выдает карты, находится в США.
2. EpayService - Американская платежная система, очень популярна во многих странах, бесплатно дает карту MasterCard в EVRO для жителей СНГ и Европы.
3. Skrill - Единственная платежная система которая работает с криптовалютами и при этом выпускает бесплатные банковские карты MasterCard.
4. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.
5. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.
| Домен RU - 99 руб Домен РФ - 99 руб |
Загрузка...
