blackhack.ru ОК. Настройки, новости, игры.
Всем привет! Сегодня я хочу рассказать, как сделать кэш внешних элементов в 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 для своего блога, так что не забудьте подписаться на обновления . Всем пока!
Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на SEO оптимизацию. Ведь на сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.
Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.
Итак, поехали:
1. Уменьшите количество HTTP-запросов
80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов мы уменьшаем количество HTTP-запросов к серверу и как результат увеличиваем скорость загрузки страницы.
Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?
2. Помещайте CSS файлы в начале страницы
Помещая подключение к css файлам в хедере страницы мы получаем постепенный рендеринг страницы, т.е. страница будет загружаться постепенно - сначала заголовок, потом лого наверху, навигация и т.д. – а это в свою очередь служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.
Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.
3. Помещайте javascript в конец страницы
Помещая javascript-файлы вниз страницы мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать пока загрузятся все Ваши javascipt-файлы губительно.
Кроме того, внешние.js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.
4. Минимизируйте css и javascript
Минимизация файла - это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания
Как я уже говорил Выше, согласно спецификации HTTP/1.1 на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.
6. Используйте кэш браузера
Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и css-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.
Поэтому выставляйте HTTP-заголовок Expires везде, где только это возможно, на несколько дней или даже месяцев вперед. Для того, чтобы веб-сервер Apache отдавал соответствующие рекомендациям HTTP-заголовки Expires, необходимо добавить в файл.htaccess, находящийся в корневой папке сайта, следующие строки:
Данный фрагмент файла конфигурации Веб-сервера Apache проверяет наличие модуля mod_expires и, если модуль mod_expires доступен, включает отдачу HTTP-заголовков Expires, которые устанавливают срок хранения перечисленных выше объектов в кэше браузеров и прокси-серверов равный одному году с момента первой загрузки. Установив такой срок жизни кэша браузера, может возникнуть сложность с обновлением файлов. Поэтому если Вы изменили содержимое css или javascript-файла и хотите, чтобы эти изменения обновились в кэше браузера, то необходимо изменить название самого файла. Обычно в название файла добавляют его версию, например так: styles.v1.css
7. Используйте CDN для загрузки популярных JavaScript библиотек
Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.
8. Оптимизируйте ваши изображения
Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла.
- GIF – идеально подходят для изображений с несколькими цветами, например логотип.
- JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
- PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
Вот несколько онлайн сервисов для оптимизации изображений:
9. Не масштабируйте изображения
Не изменяйте размер изображения при помощи атрибутов width и height тега, либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.
10. Используйте Gzip- сжатие
Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.
Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.
Accept-Encoding: gzip, deflate
Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.
Content-Encoding: gzip
Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.
Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле.htaccess прописать следующие строки кода:
Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:
Но опять таки, данный код работает не на всех серверах, поэтому лучше обратиться в службу поддержки Вашего хостинг-провайдера и уточнить этот вопрос.
Ну вот собственно и все, что я хотел рассказать. В данной статье я постарался перечислить все основные способы клиентской оптимизации для увеличения скорости загрузки веб-страницы. Кроме клиентской оптимизации существует еще и серверная оптимизация. Но это уже тема для отдельной статьи.
Если что-то упустил или у Вас есть, что добавить – пишите свое мнение в комментариях ниже к этому посту. Спасибо за внимание!
В данной статье рассмотрена настройка кеширования статических файлов через.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
- htaccess кэширование сохраняет содержимое веб-страницы на локальном компьютере, когда пользователь посещает ее;
- Использование кэша браузера – веб-мастер дает указания браузерам, как следует рассматривать ресурсы.
Когда браузер отображает веб-страницу, он должен загрузить логотип, CSS файл и другие ресурсы:
Кэш браузера «запоминает » ресурсы, которые браузер уже загрузил. Когда посетитель переходит на другую страницу сайта, логотип, CSS файлы и т.д. не должны загружаться снова, потому что браузер уже «запомнил » их (сохранил ). В этом заключается причина того, почему во время первого посещения загрузка веб-страницы занимает больше времени, чем при повторных.
Когда вы используете кэширование, файлы веб-страницы будут сохранены в кэше браузера. Страницы будут загружаться в разы быстрее при повторных посещениях. Также будет с другими страницами, которые используют одни ресурсы.
Как включить кэширование в браузере
- Измените заголовки запроса ресурсов, чтобы использовать кэширование;
- Оптимизируйте свою стратегию кэширования.
Изменение заголовков запроса
Для большинства людей единственный способ кэширования сайта htaccess заключается в том, чтобы добавить код в файл .htaccess на веб-сервере.
Файл .htaccess контролирует многие важные настройки для вашего сайта.
Кэширование браузера через файл.htaccess
Приведенный ниже код указывает браузеру, что именно кэшировать и как долго это «запоминать «. Его следует добавить в начало файла .htaccess :
## EXPIRES CACHING ##
Сохраните файл .htaccess , а затем обновите веб-страницу.
Как установить время кэширования для различных типов файлов
В приведенном выше коде заданы промежутки времени. Например, 1 year (1 год ) или 1 month (1 месяц ). Они связаны с типами файлов. Приведенный выше код устанавливает, что .jpg файлы (изображения ) следует кэшировать в течение года.
Если бы вы хотели изменить это, чтобы и JPG изображения кэшировались в течение месяца, то вы бы просто заменили «1 год » на «1 месяц «. Указанные выше значения кэширования через htaccess оптимальны для большинства веб-страниц.
Метод альтернативного кэширования для.htaccess
Описанный выше метод называется «Expires «, он помогает с кэшированием большинству новичков. После того, как вам станет проще работать с кэшированием, можете попробовать другой метод кэширования Cache-Control , который дает больше возможностей.
Возможно, что метод Expires не сработает на вашем сервере, в этом случае вы возможно захотите попробовать использовать Cache-Control .
Cache-Control
Этот метод позволяет получить больше контроля над кэшированием страниц в браузере, но многие считают, что проще прописать все настройки один раз.
Пример использования в файле .htaccess :
# 1 Month for most static assets
Приведенный выше код устанавливает заголовок Cache-Control в зависимости от типа файла.
Как работает Cache-Control
Рассмотрим упомянутую выше строку кода кэширования в браузере htaccess :
# 1 Month for most static assets
Данная строка — просто примечание. Файл .htaccess игнорирует строки, начинающиеся с символа # . Это примечание рекомендуется, так как у вас может быть несколько различных наборов данных в качестве решения для кэширования файлов:
Упомянутая выше строка говорит, что, «если файл будет одним из этих типов, то мы сделаем что-то с ним… »
Самое важное в этой строке то, что в ней перечислены различные типы файлов (CSS , JS , JPEG , PNG и т.д. ) и что инструкции кэширования следует применять к этим типам файлов. Например, если вы не хотите, чтобы JPG файлы кэшировались в течение указанного периода времени, можете удалить «JPG «. Если вы хотите добавить HTML , то нужно в этой строке указать «HTML «:
Header set Cache-Control "max-age=2592000, public"
В упомянутой выше строке установлены фактические заголовки и значения:
- Часть «Header set Cache-Control » — устанавливает заголовок;
- Переменная «max-age=2592000 » – указывает, сколько времени займет процесс кэширования (в секундах ). В этом случае мы осуществляем кэширование в течение одного месяца (2592000 ) секунд;
- Часть «public » сообщает о том, что это общедоступно.
Эта строка кэширования через htaccess закрывает оператор и заканчивает блок кода.
Общая проблема кэширования
Если вы составляете список изображений, которые будут кэшироваться в течение года и более, помните, что если вы вносите изменения в свои страницы, они могут быть не видны всем пользователям. Так как пользователи обратятся к кэшируемым файлам, а не к существующим. Если есть файл, который вы периодически редактируете (например — файл CSS ),то можно преодолеть проблему кэша с помощью цифрового отпечатка URL .
Цифровой отпечаток URL
Получение нового (некэшируемого) файлового ресурса возможно при наличии уникального имени. Например, если файл CSS назван «main.css», то вместо этого мы могли бы назвать его «main_1.css». В следующий раз, когда мы поменяем его имя, мы можем назвать файл «main_2.css». Это полезно для файлов, которые периодически изменяются.
Для проверки скорости своего сайта. После анализа он выдает ряд рекомендаций по оптимизации. И одной из таких рекомендация является использование кеша браузера.
Браузерное кэширование - вещь очень полезная. При загрузке веб страницы браузер локально сохраняет на компьютер основные ресурсы с нее: картинки, стили, скрипты и пр. И при следующем открытии той же страницы, она у вас уже загрузится в разы быстрее, так как браузеру нет необходимости лишний раз скачивать ресурсы сайта - они лежат уже у вас на компе.
Но у кэширования есть и минусы - если файл на сервере изменился, то у вас скорее всего отобразится не новая, а старая версия файла. К примеру, файл с именем img01.jpg содержал в себе изображение автомобиля. Вы зашли на сайт, почитали статью и вышли. Но администратор сайта почему-то решил, что картинка автомобиля там неуместна, и решил заменить ее на картинку с пейзажем. Но название файла осталось то же. Через пару дней вы решили еще раз прочитать ту статью. Когда вы зашли на сайт, картинка у вас осталась старая - автомобиль. Это потому, что браузер ее закэшировал с таким названием img01.jpg. И чтобы у вас отобразилась уже новая картинка с пейзажем, вам нужно сбросить кэш браузера комбинацией клавиш Ctrl+F5 .
Настройка htaccess
Теперь перейдем от лирических отступлений к основной теме статьи. Для того, чтобы включить кэширование браузером, на вашем сервере в корне сайта должен лежать файлик .htaccess . Если такового нет, вам нужно его создать.
После чего в нем прописываются следующие директивы:
Прописав данные правила, Google Page Speed пометит галочкой, что кэширование включено, и начислит вашему сайту дополнительных баллов.
P.S. Хочется отметить одну вещь, что кэширование, к сожалению, не распространяется на внешние ресурсы, такие как скрипты Яндекс.Метрики и Google.Analytics
