Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (4)

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

Все теги (11)

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

Все ответы (10)
  • Оптимизация больших изображений для сайта?

    @pu6elozed
    Bitrix, fullstack
    По пунктам:
    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
    Ответ написан
  • Так ли важна скорость загрузки по PageSpeed Insights?

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

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

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

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

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

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

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

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

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

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

    @pu6elozed
    Bitrix, fullstack
    Это называется в шторме live templates. Там можно указать свои собственные шаблоны ака сниппеты. Собственно автор скорее всего так и сделал
    Ответ написан
  • Как связать детальную "новость" с элементами каталога по их свойствам?

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

    upd решение из ветки комментариев
    // глобальный массив для фильтра
    global $arNewsFilter;
    // массив в котором мы устанавливаем фильтр по свойству AKTIV_VESH3 который будет соответствовать текущему айдишнику новости
    $arNewsFilter = Array ("PROPERTY_AKTIV_VESH3" => $arResult["ID"]);
    ?>
    Ответ написан
  • Проблема с адаптивностью сайта на БИТРИКСЕ?

    @pu6elozed
    Bitrix, fullstack
    Как минимум для html указана ширина в 768px и container минимальная ширина - 768px, на которых адаптивность верстки заканчивается. Как итог - адаптива меньше 768px в ширину на вашем сайте не существует.
    Гугл же тестирует для "стандартного" смартфона с шириной вьюпорта 375px. На котором и отображаются эти же 768px "впихнутые" в 375.
    Ответ написан

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

Все вопросы (1)