Доброго времени @cs-cart_team !
Современные требования к качеству сайте от гугла изменились и требуют изменений на уровне ядра.
Для оптимизации одной из основных метрик LCP(эта метрика показывает действительно важную цифру, которую можно заметить даже без инструментов - время отрисовки самого большего контента во вьюпорте) предлагают использовать методику loadCss
По этому предлагаю вот что
- Перебрать все ненужные стили для верхней части страницы и вынесте их в файл рядом с названием styles_non_critical.[css|less]
- В файле app/functions/smarty_plugins/block.styles.php заменить
if (!empty($styles) || !empty($inline_styles)) {
fn_set_hook('styles_block_files', $styles);
list($_area) = Tygh::$app['view']->getArea();
$params['compressed'] = true;
$filename = fn_merge_styles($styles, $inline_styles, $prepend_prefix, $params, $_area);
$content = '<link type="text/css" rel="stylesheet" href="' . $filename . '" />';
if (!empty($external_styles)) {
$content .= PHP_EOL . implode(PHP_EOL, $external_styles);
}
}
на
if (!empty($styles) || !empty($inline_styles)) {
fn_set_hook('styles_block_files', $styles);
list($_area) = Tygh::$app['view']->getArea();
$params['compressed'] = true;
$non_critical_styles = [];
foreach ($styles as $index => $style) {
if(strpos($style['file'],'non_critical') != false){
$non_critical_styles[]= $style;
unset($styles[$index]);
}
}
$filename = fn_merge_styles($styles, $inline_styles, $prepend_prefix, $params, $_area);
$content = '';
if(!empty($non_critical_styles)){
$non_critical_filename = fn_merge_styles($non_critical_styles, '', '', $params, $_area);
$content .='<link rel="stylesheet" href="'.$non_critical_filename.'" media="print" onload="this.media=\'all\'; this.onload=null;">'. PHP_EOL;
}
$content .= '<link type="text/css" rel="stylesheet" href="' . $filename . '" />';
if (!empty($external_styles)) {
$content .= PHP_EOL . implode(PHP_EOL, $external_styles);
}
}
быстрое решение, которое оставляет обратную совместимость и дает возможность разработчикам тоже использовать данный функционал
- Сторонним разработчикам внедрить у себя в продуктах данный подход(Отделив второстепенные стили в файл styles_non_critical.[css|less])