Как оптимизировать показатель lcp

Следите за производительностью сайта

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

уже упомянутый выше Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?hl=ru
Этот инструмент от Google замеряет скорость загрузки вашего веб-ресурса (от 0 до 100 баллов; чем выше балл, тем лучше). Сервис даст вам рекомендации по улучшению производительности, а также покажет, какие пункты оптимизации вы выполнили. Имейте в виду, что так как в Page Speed Insights вносятся правки и корректировки, то количество баллов, которые получил ваш сайт, также может меняться.
Pingdom Website Speed Test: http://tools.pingdom.com/fpt/
Хороший англоязычный сервис для проверки скорости загрузки вашего ресурса. Будет особенно полезен тем, кто администрирует международные ресурсы, так как позволяет выбрать место, из которого будет производиться тестирование: США, Австралия или Швеция (результат будет отличаться). Выводит множество разных данных и дает рекомендации.
Loadimpact: https://loadimpact.com/
Этот сервис позволяет сгенерировать несколько запросов на ваш сайт, путем чего можно выяснить, во-первых, среднюю скорость загрузки вашего сайта, во-вторых, понять, как ваш сайт поведет себя при определенном количестве запросов (выдержит ли он нагрузку).
LoadStorm: http://loadstorm.com/
При помощи этого сервиса вы можете запустить достаточно серьезное тестирование своего сайта. Бесплатная версия сервиса позволит вам протестировать свой ресурс при помощи 10 пользователей, а вот платная версия дает больше возможностей, в частности вы сможете самостоятельно прописать сценарий, который будут выполнять пользователи (к примеру, нажать на определенную кнопку или перейти в нужный раздел). При этом вы обязаны верифицировать то, что являетесь владельцем сайта.

Что нужно учитывать при разработке хайлоад-проекта

Много запросов — много данных. Пользователи загружают фотографии, заполняют анкеты, переписываются — это всё нужно хранить и обрабатывать. Значит, нужно много серверов, а если проект международный, то ещё и в разных странах, чтобы у пользователей из Америки всё работало так же быстро, как и у пользователей из Европы.

Объём данных может резко вырасти. Никогда не знаешь, что произойдёт завтра. Может, выстрелит реклама, придёт миллион новых пользователей и нагрузка станет в несколько раз выше. Сегодня у тебя создаётся гигабайт личных сообщений в день, а завтра — 10 гигабайт в день.

Поэтому недостаточно просто иметь много серверов, чтобы просто решать текущие задачи. Нужно спроектировать систему так, чтобы иметь возможность быстро её масштабировать.

Лучше всё дублировать. «1» — плохое число для высоконагруженного проекта. Любой сервер или сервис может неожиданно выйти из строя, поэтому приходится всё дублировать. Запасной сервер, реплика базы данных — без этого никуда.

Использовать кэширование. Ответ на запрос пользователя можно кэшировать — временно сохранять, например, в оперативной памяти. Когда от пользователя повторно придёт запрос, можно не обращаться к серверу, а взять информацию из кэша. Это помогает снижать нагрузку: если в кэше есть информация, которая нужна пользователю, не придётся отправлять идентичный запрос и снова ждать ответ. Страница загрузится быстрее.

Удалить код JavaScript и CSS из верхней части страницы

В верхней части кода HTML-страницы используйте только контент, нужный для загрузки первого экрана, остальной перенесите вниз. Скрипты JS и CSS влияют на отклик страницы, но не нужны в той части, которая загружается первой. Они тормозят браузер, и получается, что пользователь не видит часть страницы, на которую они влияют, но уже ждет ее загрузку.

Исходный HTML-код страницы:

 
   
    <link rel="stylesheet" href="<a>small.css< a>"="">
   
  
    <div class="black">
      Текст
    </div>
  
</a>small.css<></a>small.css<>

Стили small.css:

  yellow {background-color: white;} 
  .blue {color: black;} 
  .big { font-size: 8em; } 
  .bold { font-weight: bold; }

Встраиваем CSS:

  
   
    <style> 
      .black{color:black;} 
    </style> 
     
   
    <div class="black">
      Текст
    </div> 
   
 
<link rel="stylesheet" href="small.css">

Файл стилей small.css будет подгружаться после загрузки первой страницы.

Проверка HTTP-заголовков ответа сервера

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

Рассмотрим процесс проверки передаваемых сервером заголовков на примере Chrome:

Откройте в браузере любую страницу сайта.
Активируйте панель инструментов разработчика.Клавиши по умолчанию: + + .
Активируйте вкладку Network.
Обновите страницу.Клавиши по умолчанию: + .
Кликните по интересующему ресурсу из списка.
Изучите HTTP-заголовки, отобразившиеся в правой колонке.

Способ 1: Установка недостающих обновлений Windows 7

Сначала рекомендую проверить, установлены ли на компьютере обновления, связанные с этим самым сертификатом безопасности. Необходимо скачать два разных пакета, в общей сумме занимающих 500 Мб пространства. Займет это не так много времени, а осуществляется следующим образом:

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

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

Регенерация содержания на лету

Динамически созданные, но статически обслуживаемые страницы,
т.е. страницы которые должны передаваться как чисто статические
(считываемые из файловой системы и затем передаваемые по запросу),
однако они должны быть динамически сгенерированны веб-сервером если они отсутствуют в файловой системе.
Таким образом вы можете иметь страницы сгенерированные PHP которые являются статически обслуживаемыми
если только кто-либо (либо планировщик) не удалит статическое содержание. В таком случае содержание обновляется.

Это делается следующим набором директив:

    RewriteCond %{REQUEST_FILENAME}   !-s
    RewriteRule ^page\.html$          page.php   [T=application/x-httpd-php,L]

Здесь, запрос к page.html приводит к внутреннему запуску соответствующего page.php,
если page.html все-ещё отсутствует или имеет нулевой размер.
Фокус здесь в том что page.php это обычный PHP скрипт который в дополнение к собственному выводу, записывает свой
вывод в файл page.html.
Запустив это один раз, сервер передает данные page.html.
Когда вебмастер хочет обновить содержание, он просто удаляет page.html (обычно с помощью cronjob).

Как оптимизировать показатели Core Web Vitals

Разберем каждый параметр по отдельности.

LCP: как ускорить отрисовку контента

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

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

Этапы отрисовки

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

На LCP влияют четыре фактора, их можно оптимизировать:

ускорить время ответа сервера;
решить блокировку рендеринга JavaScript и CSS;
ускорить загрузку ресурсов;
оптимизировать рендеринг на стороне клиента.

FID: как ускорить время реакции страницы

Показатель оценивает, насколько страница задержалась с ответом на первое действие пользователя. К примеру, на странице появилось изображение, на которое пользователь кликнул, чтобы открыть картинку целиком. Картинка должна открыться сразу после клика. FID измеряет, насколько она задержалась.

Чем меньше времени тратится, тем лучше. Оптимальный показатель FID — не дольше 100 миллисекунд.

Для ускорения реакций страницы есть несколько решений:

сократить время выполнения JavaScript;
разбить длинные задачи на части;
отложить неиспользуемый JavaScript;
следить за размером подгружаемых библиотек JavaScript;
оптимизировать выполнение сторонних скриптов;
использовать web-workers

CLS: как убрать сдвиги макета страницы

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

Из-за сместившихся кнопок пользователь промахнулся

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

CLS измеряет совокупный сдвиг макета из-за неожиданных сдвигов, которые появляются из-за тормозящей загрузки элементов.

Для вычисления нужны два компонента:

общая область на экране, которую занимает элемент до и после сдвига;
расстояние, на которое он сдвинулся.

Область и расстояние сдвига

Оптимальный показатель CLS —не больше 0,1 на 75% сессий.

Что еще влияет на загрузку страницы: оптимизируем CSS

Стили страницы влияют на скорость отрисовки самого большого видимого элемента и визуальные сдвиги макета.

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

Для сравнения на верхней строчке загрузка страницы с блокирующими рендеринг CSS, на нижней с разделением CSS:

Сравнение загрузок страницы

Кроме критических и некритических CSS можно поработать со стилями изображений, рекламой, скриптами, фреймами и шрифтами.

Все эти возможности разобрали в отдельном материале.

Как уменьшить вес страниц сайта и ускорить загрузку

Другие возможности повлиять на скорость.

Как оптимизировать код верхней части страницы

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

Есть несколько методов:

удалить лишние символы и скрипты из верхней части кода;
настроить асинхронную загрузку с jQuery;
ускорить получение первых байтов (TTFB);
объединить и сократить JavaScript и CSS;
настроить загрузку из кэша на стороне пользователя;
использовать CDN.

Как внедрить gzip, brotli, использовать кэширование, минификацию и другие способы сжатия

Картинки, видео и разные интерактивные элементы много весят и тормозят сайт. Можно сжать тяжелые элементы, для это есть алгоритмы, самые популярные сейчас — это gzip и brotli. Brotli сжимает сильнее, чем gzip, у него больше уровней. Но на высоких уровнях его скорость меньше.

Способы ускорить загрузку:

уменьшить размер HTML;
использовать сжатие gzip или brotli;
использовать минификацию, то есть сократить HTML, CSS и JS;
использовать кэш браузера для ускорения;
сжать фотографии, иллюстрации и другую графику: подобрать разрешение, уменьшить количество цветов, прописать параметры в CSS и сжать сами файлы.

К примеру, при уменьшении количества цветов качество этой картинки почти не страдает, зато сильно уменьшается вес. Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета).

Три варианта сжатия

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

Что используют самые быстрые страницы интернета: исследование 5,2 млн страниц

Команда блога Backlinko во главе с Брайаном Дином провели исследование страниц из выдачи Google и проверили, какие способы ускорения используют самые быстрые страницы. В выборке было 5,2 млн страниц из десктопной и мобильной выдачи, так что результат стоит посмотреть.

Что изучали:

Общая скорость загрузки
Как CDN влияет на скорость загрузки
Какие фреймворки самые быстрые
Как сжатие файлов влияет на скорость
Какое сжатие изображений эффективнее ускоряет загрузку
Сайты на каких CMS грузятся быстрее

Несколько интересных тезисов:

Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на смартфоне. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на мобильном.
Как ни странно, лучшие варианты — либо минимально сжать файлы перед отправкой с сервера, либо максимально. У таких страниц более высокая производительность по сравнению со средним уровнем сжатия.
Для загрузки на десктопе на скорость сильнее влияет использование CDN, на мобильных — количество запросов HTML.
Если сравнивать разные способы оптимизировать картинки, использование адаптивных изображенийвыходитна первое место.

Что случится, если в браузере будет открыто слишком много вкладок?

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

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

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

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

Предисловие

При создании клиентоориентированного сайта вам необходимо учесть и продумать множество вещей, начиная от творческих (дизайн, наполнение) и заканчивая техническими (верстка, размещение в сети Интернет)

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

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

Причина появления проблем с сайтами в Windows 7

30 сентября истек срок корневого сертификата безопасности Let’s Encrypt в Windows 7, что привело к проблемам с открытием некоторых сайтов у пользователей этой ОС, а также старых версий Android и iOS. Встречается это и на компьютерах под управлением Linux, но для них пока известно только одно решение – установка приложения для подмены времени. То есть нужно поставить дату раньше 30 сентября.

Что касается мобильных операционных систем, то в этом случае ничего кроме обновления не поможет, поэтому пропустим детальное рассмотрение этого случая, а остановимся именно на Windows 7. Предлагаю начать с самых эффективных методов и закончить «Костылями».

Что влияет на скорость загрузки сайта

На скорость загрузки влияют четыре основных фактора:

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

Как оптимизировать и сжать картинки

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

Как сжимать картинки и заполнять SEO-атрибуты

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

количество картинок на странице, размеры, уникальность, тематика;
правильная оптимизация;
правильное заполнение SEO-атрибутов изображений.

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

Качество картинок важно, оно должно быть не хуже, чем у конкурентов. Минимум 1080 px по высоте для полного изображения и минимум 640 px в ширину для превью

Не стоит использовать тег picture для настройки разных форматов картинок для разных устройств. Это увеличит количество узлов в DOM-дереве.

Большая часть советов основана на вебинаре специалиста технического SEO и реверс инжиниринга Деми Мурыча (Demi Murych). Речь не только о сжатии и уменьшении веса, но и о требованиях по размерам, качеству, уникальности и актуальные советы по заполнению метатегов.

Как настроить отложенную загрузку картинок — lazy loading изображений

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

Есть несколько вариантов настройки:

Картинки загружаются по мере просмотра:

Отображение картинок с отложенной загрузкой

Выбор варианта зависит от поведения пользователей на сайте.

Нужно ли использовать формат изображений WebP

WebP — это формат графических изображений, его разработали в Google в 2010 году. Получилась альтернатива PNG и JPEG, но с меньшим размером при таком же качестве изображения. При этом в WebP можно сохранить прозрачность фона или анимацию.

Сравнение свойств популярных форматов изображений

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

Как оптимизировать скорость сайта

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

Все элементы статического сайта уже загружены на сервер, поэтому пользователю необходимо дождаться их загрузки. К ним относятся: изображения, стили, HTML-файлы и др.
Динамический сайт не отправляет пользователю готовые файлы – он запускает выполнение скриптов на сервере, результат выполнения которых отправляется клиенту. К скриптам относятся, например, файлы .php.

Оптимизация статических элементов

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

Первое, что нужно сделать — оптимизировать контент сайта. Измените формат и размер используемых изображений, а также сократите код HTML, CSS и JS. Уже на этом этапе сайт будет загружаться заметно быстрее.

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

Также может помочь настройка кеширования и сжатия данных. Это делается, как правило, на стороне хостинг-провайдера.

Оптимизация динамических элементов

Начните с анализа скриптов и запросов к БД. Если необходимые для оптимизации навыки отсутствуют, то обратитесь за помощью к разработчикам сайта, либо задайте вопрос на тематическом форуме — каждая ситуация индивидуальна

Обратите внимание, что современные версии PHP (7.x) производительнее предыдущих – 5.x

После этого перейдите к настройке кеширования исполняемого кода. Во всех популярных CMS присутствуют необходимые для этого плагины. К примеру, в Joomla и MODX они поставляются «из коробки», а для WordPress разработан бесплатный плагин WP Super Cache. Кеширование поможет снизить нагрузку на хостинг, а также увеличит скорость загрузки сайта.

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

Проверка на вирусы

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

Переход на VDS, Dedicated или Гибридный сервер

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

В чём проблема

Если запросов слишком много, сервер не успевает их обрабатывать и начинает сбоить. Чем это чревато:

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

Пользователей это напрягает, а бизнес теряет деньги. В условиях жёсткой конкуренции это вообще может означать потерю людей: например, в 2007 году, когда только начинались соцсети, в студенческой среде было два сайта — «Вконтакте» и «Факультет». О втором вы ничего не слышали, потому что он дико тормозил в пиковое время, и все постепенно переползли во «Вконтакте».

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

Сократите код

Чем объемнее код вашего проекта, тем больше он весит, а значит, тем большее время требуется для его загрузки. Поэтому в первую очередь вам нужно убедиться, что код оптимизирован. Особенно это касается первой, посадочной страницы, на которую попадает пользователь — будет лучше отказаться от тяжелых скриптов JavaScript и Ajax либо убрать их в нижнюю часть страницы. Придерживайтесь известного принципа KISS — Keep it short and simple — пусть код будет коротким и простым.

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

Если вы хотите узнать, все ли в порядке с JavaScript на странице вашего сайта, воспользуйтесь этим сервисом: https://varvy.com/tools/js/

Этот совет также касается HTML и CSS-кода

Как и в случае с JavaScript, особое внимание уделите внешним файлам — к примеру, внешним таблицам стилей, которые по возможности лучше вставить в HTML

Кэширование ваших страниц в 5 шагов

Кэширование ваших страниц может
оказаться красивым и полезным механизмом, особенно, если они
генерируются средствами PHP и делают множество SQL запросов. Как только
вы примените кэширование, ваш сервер тут же снизит нагрузку и перестанет
съедать много памяти на генерацию страниц — он просто будет загружать их
из КЭШа. Я покажу вам, как PHP может кэшировать страницы и, в
дальнейшем, вы сможете тратить на это минут 5.

Расмотрим технологию кэширования пошагам:

В домашней директории создаем файлы .htaccess,
start_cache.php, end_cache.php, а
также папку с названием cache_files.
Папке cache_files необходимо проставить атрибуты 777.
Внутри .htaccess файла пропишите следующие строки:
```
php_value auto_prepend_file
		/home/username/public_html/start_cache.php
php_value auto_append_file
		/home/username/public_html/end_cache.php
```
Строку /home/username/public_html/ необходимо заменить на путь к вашей домашней директории.

В скрипт start_cache.php помещаем следующий код:

<?php
// раздел настроек, которые вы можете менять
$settings_cachedir = '/home/username/public_html/cache_files/';
$settings_cachetime = 3600; //время жизни кэша (1 час)

// код
$thispage = 'http://' .
	$_SERVER . $_SERVER;
$cachelink = $settings_cachedir.md5($thispage).".html";
if (file_exists($cachelink)) {
    $cachelink_time = filemtime($cachelink);

    if ((time() - $settings_cachetime) < $cachelink_time) {
        readfile($cachelink);die();
    }
}

ob_start();
?>

Не забывайте исправлять путь /home/username/public_html/ на путь к вашей домашней директории.

А следующий код поместите в скрипт end_cache.php:

<?php
$fp = fopen($cachelink, 'w');
fwrite($fp, ob_get_contents());
fclose($fp);
ob_end_flush();
?>

Все ваши страницы будут кэшироваться на 3600 секунд = 1 час. Этот параметр вы легко можете поменять в скрипте

start_cache.php. Кэш страниц будет сохранен в папке
cache_files.

Совершенно очевидно, что в данном случае атрибуты 777
являются определенным нарушением безопасности. В связи с чем, рекомендую
вынести папку cahce_files за пределы
public_html, например, поместить ее на один уровень выше. Это
закроет доступ к находящимся в ней файлам пользователей вашего сайта, но
никак не повлияет на работоспособность системы.

Также, у данного метода есть еще один серьезный недостаток: автор
статьи складывает весь кэш в одну папку, что, при достаточном количестве
страниц на вашем сайте, вызовет проблему, например, в системах Unix
наблюдается достаточное замедление работоспособности при наличие в папке
более чем 1000 файлов. В связи с чем, в алгоритм необходимо внести ряд
изменений и раскладывать файлы по отдельным подпапкам внутри папки
cache_files. Например, используя для этого первые 3-4
символа md5 КЭШа.

Для динамических ресурсов вполне возможно выбрать время кэширования в
несколько (5-10) секунд или 1-2 минуты, что уже значительно снизит
нагрузку на сервер, но не нанесет вреда интерактивности сайта.

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

Правильная схема кэширования файлов в браузере

В идеале браузерное кэширование должно функционировать следующим образом:

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

Правильная схема кэширования файлов в браузере

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

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

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

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

заголовок, определяющий срок кэширования ( или );
заголовок, определяющий изменение файла ( или ).

Что такое кэш браузера и кэширование сайта?

Кэш браузера (Browser Cache) — временные файлы ресурсов веб-страниц сайта, сохраняемые браузером для последующего отображения в нём при повторном обращении к соответствующим страницам.

Процесс определения и сохранения кэша в браузере называется браузерным кэшированием (Browser Caching).

1. Первичный запрос страницы

2. Последующие запросы страницы

Браузерное кэширование можно представить следующим образом:

клиент (браузер) формирует и отправляет запрос на сервер;
сервер формирует ответ и отправляет веб-страницу и все файлы, с ней связанные, в браузер;
браузер отображает веб-страницу, при этом кэширует определённые её ресурсы.

Как я предотвращаю кэширование страницы браузерами?

Прежде чем мы рассмотрим методы клиентского и серверного кэширования, в
первую очередь мы должны понять, как вообще предотвратить кэширование
страниц web-браузером (и прокси-серверами). Основной способ достижения
этого использует мета-тэги HTML:

 <meta http-equiv="Expires" content="Mon, 26 Jul 1997 05:00:00 GMT" />
 <meta http-equiv="Pragma" content="no-cache" />

Вставив прошедшую дату в мета-тэг Expires, вы сообщаете браузеру, что
кэшированная копия странички всегда является устаревшей. Это значит, что
браузер никогда не должен кэшировать страницу. Мета-тэг Pragma:
no-cache довольно хорошо поддерживаемое соглашение, которому
следует большинство web-браузеров. Обнаружив этот тэг, они обычно не
кэшируют страницу (хотя никаких гарантий нет, это всего лишь
соглашение).

Это хорошо звучит, но есть две проблемы, связанные с использованием
мета-тэгов:

Если тэг не существовал когда страница была запрошена браузером
впервые, но появляется позже (например, вы модифицировали включаемый
файл pageheader.php который является шапкой
каждой web-страницы), браузер останется в блаженном неведении и
воспользуется свей кэшированной копей оригинала.
Прокси-серверы, кэширующие web-страницы, как например общий
ISP, вообще не будет исследовать непосредственно содержимое
HTML-документа. Вместо этого они полагаются только на
web-сервер, с которого пришли документы, и протокол HTTP. Иными
словами, web-браузер может считать, что не должен кэшировать страницу,
но прокси-сервер между браузером и вашим web-сервером вероятно не знает
этого – и продолжит отправлять клиенту ту же самую, уже устаревшую,
страницу.

Лучший подход состоит в том, чтобы использовать непосредственно
протокол HTTP с помощью функции PHP header(),
эквивалентно приведённым выше двум мета-тэгам:

Мы можем пойти на один шаг вперёд, воспользовавшись заголовком
Cache-Control совместимым с браузерами,
поддерживающими HTTP 1.1:

Это гарантирует, что никакой web-браузер или промежуточный
прокси-сервер не будет кэшировать страницу, таким образом посетители
всегда получат самую последнюю версию контента. Фактически, первый
заголовок должен быть самодостаточным, это лучший способ гарантировать,
что страница не кэшируется. Заголовки Cache-Control и
Pragma добавлены с целью «подстраховаться». Хотя они не
работают во всех браузерах или прокси, они отловят некоторые случаи, в
которых Expires не работает должным образом (например,
если дата на компьютере клиента установлена неправильно).

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

Internet Explorer и кэширование загрузки файлов

Если при обслуживании загрузки
файла PHP-скриптом используются такие заголовки, как например
Content-Disposition: attachment, filename=myFile.pdf или
Content-Disposition: inline,
filename=myFile.pdf у вас будут проблемы с
Internet Explorer’ом, если вы сообщите браузеру не кэшировать
страницу.

Internet Explorer оперирует загрузкой довольно необычным
образом, выполняя два запроса к web-сайту. Первый запрос загружает файл и
сохраняет его в кэше, пока не будет создан второй запрос (без сохранения
отклика). Этот запрос вызывает процесс передачи файла конечному
пользователю в соответствии с типом файла (например, запускает Acrobat
Reader, если файл является PDF-документом). Это значит, что
если вы отправили заголовки, запрещающие браузеру кэшировать страницу,
Internet Explorer удалит файл между первым и вторым запросом, в
результате чего конечный пользователь ничего не получит. Если файл,
который вы отдаёте PHP-скриптом, не изменяется, одним из
простейших решений будет убрать «запрещающие кэширование» заголовки из
скрипта.

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