Задать вопрос
AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку
css

Что значит Используйте кеш браузера?

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

Я пытался гуглить но находил все время плагины для кеширования для Word Press. Таки не нашел для лендингов/сайтов.
Кто может подсказать как сильно это влияет на скорость загрузки и можете ли посоветовать какой-нибудь плагин?
  • Вопрос задан
  • 7994 просмотра
4 комментария
Подписаться 2 Оценить 4 комментария
Пригласить эксперта
Ответы на вопрос 4
@pcdesign
Браузеру можно "сказать", чтобы он сохранил файлы локально. И в следующий раз не обращался за файлами к удаленному серверу и не тратил время и ресурсы.

Если у вас используется апач, то можно прописать в .htaccess примерно такое:

# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>


Если nginx, то примерно такое:

location ~* \.(ico|pdf|flv)$ {
                expires 1y;
                add_header Cache-Control public;
                root /home/mdance/public;
        }
        location ~* \.(jpg|jpeg|png|gif|swf)$ {
                expires 1w;
                add_header Cache-Control public;
                try_files $uri  @backend;
        }
        location ~* \.(txt|css|js|zip|rar)$ {
                expires 1M;
                gzip_vary on;
                add_header Cache-Control proxy-revalidate;
                root /home/mdance/public;
        }
        location ~* \.(html|htm|php)$ {
                expires 1m;
                add_header Cache-Control private;
                add_header Cache-Control proxy-revalidate;
                proxy_set_header Host $http_host;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                #try_files $uri  @backend;
        }


Как-то так, сроки хранения и типы файлов можно варьировать под ваши задачи.
Ответ написан
5 комментариев
5 комментариев
trevoga_su
@trevoga_su
все просто
допустим, у вас есть статья на сайте.
у статьи есть дата публикации - LastModifiedDate.
мы можем на этапе формирования конечного html-кода страницы проверить, была ли ранее просмотрена эта статья или нет в этом браузере.
если статья была ранее просмотрена - отдаем 304 заголовок и все.
304 Not Modified — сервер возвращает такой код, если клиент запросил документ методом GET, использовал заголовок If-Modified-Since или If-None-Match и документ не изменился с указанного момента. При этом сообщение сервера не должно содержать тела.


Вот пример кода из реального проекта:

class Http_Request {

	/**
	 * Возвращает TRUE, если дата (обычно документа) $data является устаревшей
	 * по отношению к HTTP заголовку If-Modified-Since.
	 *
	 * @param $date DateTime
	 * @return boolean
	 */
	public static function IfModifiedSince(DateTime $date)
	{
	    if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
	    {
	        $if_modified_since = strtotime(substr($_SERVER['HTTP_IF_MODIFIED_SINCE'], 5));
	        if ($if_modified_since && $if_modified_since >= $date->getTimestamp())
	        {
	            return false;
	        }
	    }
	    return true;
	}

	//....
}

// на уровне контроллера 
// дата не изменилась - отдаем 304 заголовок, браузер возьмет страницу из кэша
if (!Http_Request::IfModifiedSince($advert->getLastModifiedDate()))
{
    $this->getResponse()->setHttpStatusCode(304);
    exit;
}
// дата была изменена - ставим заголовок Last-Modified с актуальной датой статьи 
$this->getResponse()->setHeader('Last-Modified', $advert->getLastModifiedDate()->formatHttpDate());
$this->getResponse()->setHeader('Cache-Control', 'no-cache, must-revalidate');


Как посмотреть. Если у тебя есть в браузере расширение live http headers, можешь отследить заголовки на этой странице - www.adverts.ru/advert/79941.xhtml
В первый заход на эту страницу будут такие заголовки:


заголовки запроса:
GET /advert/79941.xhtml HTTP/1.1
заголовки ответа:
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Apr 2016 17:13:03 GMT

при втором заходе:


заголовки запроса:
GET /advert/79941.xhtml HTTP/1.1
If-Modified-Since: Tue, 12 Apr 2016 17:13:03 GMT
заголовки ответа:
HTTP/1.1 304 Not Modified
Ответ написан
Комментировать
Комментировать
@GreatRash
Как вы ищете хз вообще...
Ответ написан
9 комментариев
9 комментариев
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Какие нах плагины?!!!!
Учите мат часть!
Кэширование задаётся: или в коде при формировании заголовков, или через .htaccess
www.exlab.net/dev/http-caching.html
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Разобрать текущий ETL-процесс
22 нояб. 2024, в 23:55
3000 руб./за проект
Телеграмм бот на Python
22 нояб. 2024, в 22:26
3500 руб./за проект
Ещё заказы