Артем

Question

CSS
+1 ещё

Средний

Как описать текст окружностью?

2 подписчика
более трёх лет назад
205 просмотров

2

ответа

Answer 1 · 2018-12-01 22:09:59

По пунктам:
1. Используйте современные форматы изображений - гугл хочет чтобы на сайте использовались более легкие(не всегда, но в большинстве случаев) варианты изображений в формате допустим .webp
2. Настройте эффективную кодировку изображений - значит что изображения слишком много весят
4. И самое главное, что влияет на все предыдущие пункты - некорректное соотношение размера отображаемого изображения - его визуальному размеру. К примеру - у вас изображение 2500px, действительно ли его нужно отображать на смартфонах в полный размер. или достаточно превью?

<article>
  <img srcset="https://dummyimage.com/2560x400/333/fff 2x,
               https://dummyimage.com/1280x400/333/fff 1x"
       sizes="(min-width: 1280px) 1280px, 100vw"
       alt="A title">
</article>

По вышеописанному коду для современных мобильных используется srcset=https://dummyimage.com/2560x400/333/fffтак как у них плотность пикселей 2x. PageSpeedInsights эмулирует отображение на аналогичном смартфоне.
Для более гибкого подхода в html5 появился элемент picture. Подробнее посмотреть советую у Вадима Макеева в этом же видео подробно разбирается оптимизация графики для сайта.
На примере вашего кода можно сделать набросок

<picture>
    <!-- source для браузеров поддерживающих webp, соответственно srcset тоже должен указывать на webp-->
    <source type="image/webp" srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
     <!-- source для браузеров не поддерживающих webp -->
     <source srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
    ...  <!-- все остальные необходимые размеры, вроде планшетов и т.д. -->
    <!-- fallback для браузеров не поддерживающих элемент picture -->
    <img src="https://dummyimage.com/2560x400/333/fff" alt="A title">
</picture

Answer 2 · 2018-12-23 20:13:42

Используйте современные форматы изображений JPEG 2000, JPEG XR и WebP

Для этого существует тэг picture с source, в котором и можно использовать webp. Если не будет поддерживаться, то и не будет использоваться этот source

Устраните ресурсы, блокирующие отображение

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

Настройте подходящий размер изображений

но на мобильном нет таких размеров. в лучшем случае 375px и @2x, что соответствует 750px, нужно подгружать те форматы и размеры изображения, которые будут подходить текущему разрешению экрана, через тот же вышеупомянутый тег source внутри picture

Задайте правила эффективного использования кеша для статических объектов

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

Как это можно исправить, или это не так важно...? Как вы поступаете в таких ситуациях? Вы придерживаетесь рекомендациям google?

Как было написано - это всего лишь рекомендация. Руководствоваться этими рекомендациями или нет, решать лично вам. Однако гугл уже давно использует данные PageSpeedInsights, и учитывает их при ранжировании

Answer 3 · 2018-11-04 10:54:51

Это называется в шторме live templates. Там можно указать свои собственные шаблоны ака сниппеты. Собственно автор скорее всего так и сделал

Answer 4 · 2019-09-05 00:41:27

Очень похож на класс готового решения aspro.mshop он же аспро.маркет. сам класс должен быть в /bitrix/modules/aspro.mshop/classes/general/CMshop.php. Если планируется обновлять готовое решение, то крайне не рекомендуется править именно этот файл. Лучше экстендить в собственный класс локального пространства имён, тем самым изменяя логику функции насколько это необходимо

Answer 5 · 2018-12-08 23:30:39

Чтобы не вовлекать в кешируемую область шаблона - лучший вариант(конечно на мой взгляд) сделать в result_modifier дополнительный элемент массива $arResult,который будет проксироваться в component_epilog(как это делается - гуглится "result_modifier и component_epilog одновременно"). И уже по значению этой переменной делать фильтр для компонента список новостей, который и размещаем в component_epilog

upd решение из ветки комментариев

// глобальный массив для фильтра
global $arNewsFilter;
// массив в котором мы устанавливаем фильтр по свойству AKTIV_VESH3 который будет соответствовать текущему айдишнику новости
$arNewsFilter = Array ("PROPERTY_AKTIV_VESH3" => $arResult["ID"]);
?>

Артем

Достижения

Наибольший вклад в теги

HTML

CSS

1С-Битрикс

Горячие клавиши

PhpStorm

Google

Лучшие ответы пользователя

Оптимизация больших изображений для сайта?

Так ли важна скорость загрузки по PageSpeed Insights?

Как сделать быстрый ввод тегов В PhpStorm?

Где редактировать CMshop::drawShopsList?

Как связать детальную "новость" с элементами каталога по их свойствам?

Лучшие вопросы пользователя

Как описать текст окружностью?

Войдите на сайт