Сайт на Wordpress VS PageSpeed Insights

  • Tutorial
image

В это статье мы расскажем как оптимизировали конкретное Wordpress веб приложение. Какие действия были выполнены чтобы попасть из красной зоны оценки PageSpeed Insights в зеленую, тут будет мало общих рекомендаций универсальных для любых платформ и приложений, которыми пестрит поисковая выдача, a большe описание действий, которые повлияли на результат в рамках конкретной задачи.


PageSpeed Insights — противоречивый инструмент по оптимизации скорости загрузки веб страниц от Google, который за свою семилетнюю историю много раз менял свои алгоритмы, интерфейсы, все время дорабатывался, нещадно хейтился и даже закрывался, но в 2021 году по прежнему более чем актуален и находится в особом почете и уважении у SEO специалистов. И вовсе не потому что является самым объективным и точным, есть много других отличных инструментов 1, 2, 3, а потому что за ним стоит сам “великий и ужасный” Google.


Итак, у нас задача оптимизировать сайт на CMS Wordpress до зеленой зоны.


Сайт несложный с обычной судьбой, был сверстан под нужды заказчика и натянут на wp+woocommerce, в процессе нагружен 40+ плагинами ( что для сайтов на wp обычное дело ).
PSInsights оценивает ваш сайт отдельно для мобильных и десктопных устройств и делит их на три зоны.


  • 0–49 — красная
  • 50–89 — желтая
  • 90–100 — зеленая

Изначально наш сайт имеет такие грустные оценки.



image

Для тех кто хочет 100/100


Эта статья для вас не подойдет, можно поискать в разделе фантастика, если такой есть на хабре. Современные сайты, а тем более сделанные на CMS обвешаны огромным количеством js и css библиотек, в случае с WP — это почти всегда много плагинов, каждый из которых может что-то добавлять свое на ваш фронт, все это делает сайт огромной неповоротливой махиной и ждать от нее космических скоростей не стоит.

Хотя пустая установка стандартной темы WP twentytwentyone еще выдает желаемую сотню.



image

Но если помимо этого вы ещё захотите добавить на страницу хоть что-то, то это что-то будет нуждаться в оптимизации.


Этапы оптимизации


  • Удалим лишние плагины.
  • Поработаем с изображениями.
  • Сократим количество js и css на страницах.
  • Специфические оптимизации для конкретного проекта.

Удалим лишние плагины


Современный WP это зоопарк различных плагинов, каждый из них это отдельный мир и экосистема. Любой плагин потенциально может добавлять свой функционал на фронт, даже если изначально он задуман только для административной части сайта. Изучать код всех плагинов и оценивать потенциальную угрозу для производительности займет слишком много времени, поэтому действуем от простого к сложному. Удаляем по максимуму все плагины, доводим сайт до нужной зеленой отметки и потом ставим по одному обратно, отслеживая как каждый из них влияет на оценку PSInsights, если влияние присутствует, то думаем над заменой плагина аналогом или отказаться от него.


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


image

Поработаем с изображениями


Наш проект имеет три разных предупреждения касающихся изображений на сайте.


  • Настройте эффективную кодировку изображений.
  • Используйте современные форматы изображений.
  • Настройте подходящий размер изображений.

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


Этап 0. Добавим lazy load для изображений


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

WP версии 5.4 добавил поддержку lazy load изображений из коробки, в теории просто добавляем атрибут loading="lazy" к тегу изображений и должно работать, на практике для PSInfights срабатывает не всегда, поэтому ставим плагин autoptimize, который нам еще пригодится ниже для оптимизации js и css кода, и активируем в нем lazy load загрузку изображений.


image

Этап 1. Настройте эффективную кодировку изображений


По факту это значит что изображения недостаточно оптимизированы.


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

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


Этап 2. Используйте современные форматы изображений


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


Для конвертации всех изображений в webp формат я воспользовался этим плагином, который в папке uploads рядом с существующими изображениями создает новые с расширением webp. То есть, если раньше у вас было изображение foo.jpeg, то сейчас рядом с ним появилось foo.jpeg.webp


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


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


Код замены привожу ниже, все php переменные естественно должны быть объявлены перед тегом.


<picture>
   <source srcset="<?php echo $src . '.webp'; ?>" type="image/webp">
   <source srcset="<?php echo $src; ?>" type="image/jpeg">
   <img loading="lazy" src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>">
</picture>

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


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


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


add_action( 'init', 'frank_theme_init' );
function frank_theme_init() {
   add_image_size( 'post_slider_thumbnail', '517', '354', true );
   add_image_size( 'post_card_slider_thumbnail', '400', '370', true );
}

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


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


image

Переходим к следующему этапу оптимизации.


Сократим количество js и css на страницах


У нас осталась группа рекомендаций по оптимизации скорости загрузки, все из них относятся к js и css файлам.


  • Уменьшите размер кода JavaScript
  • Удалите неиспользуемый код CSS
  • Удалите неиспользуемый код JavaScript
  • Устраните ресурсы, блокирующие отображение

Как видим основные рекомендации это размер js и css библиотек. Нужно определить кто эти библиотеки нам на фронт добавляет. Открываем вкладку network панели хрома, выбираем отображение только js файлов, затем обновляем страницу через ctrl + F5. После этого сортируем по размеру файлов, чтобы выявить самые тяжелые, от которых потенциально исходит самая большая угроза.


image

В итоге видим что самые тяжелый файл нам добавляют:


  • Плагин оператора сайта
  • Сервисы статистики и аналитики ( facebook pixel, google tag manager)
  • Стандартные библиотеки (jquery, bootstrap)

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


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


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


Также отключаем всякие мелочи по типу эмоджи wp, которыми мы не пользуемся на нашем фронте


  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_print_styles', 'print_emoji_styles');
  remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
  remove_action( 'admin_print_styles', 'print_emoji_styles' );

После этого останется устранить ресурсы блокирующие отображение.


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


image

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


image

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


После оптимизаций связанных с js и css наши цифры стали совсем близки к цели.


image

У нас 80+ для мобильных, и стабильно зеленая зона для десктопа.


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


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


Специфические оптимизации для конкретного проекта


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


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


Итак в рамках нашего проекта мы видим, что одним из факторов отмеченных красным является “Largest content paint”


image

Логически глядя на страницу можно легко догадаться какой элемент является самым большим на странице, в нашем случае есть подозрение, что это верхний слайдер запускаемый slick библиотекой. Но мы не будем полагаться только на интуицию, а доверимся инструментам. Открываем панель хрома, вкладку “Performance” и запускаем тест, затем кликаем по кладке “LCP”. В итоге виновник найден. Подозрения подтвердились — это наш верхний слайдер.


image

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


В коде это будет выглядеть примерно так. Добавляем параллельно c html слайдера тег изображения и вставляем в его src первое изображение слайдера


  $post_thumbnail_id = $product->get_image_id();
  $image = franc_get_appropriate_size_image_downsize($post_thumbnail_id, 'large');
  $attachment_url = $image[0];
  $image = image_downsize( $post_thumbnail_id, 'full' );

  $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
  if ( empty($alt) ) {
      $alt = __('product image', 'Frank_Maisler');
  }
  ?>
  <div class="preload-single-product-image">
      <?php
      $args = [
          'src' => $image[0],
          'alt' => $alt,
          'width'  => $image[1],
          'height' => $image[2],
          'class'  => 'img-fluid',
      ];
      frank_show_template('templates/parts/picture-tag', $args);
      ?>
  </div>
  <div class="slider single-product-slider-image slider-for d-none">
      <div>
          <img loading="lazy"  alt="<?php echo $alt; ?>" src="<?=$attachment_url?>">
      </div>
       <?php
       $attachment_ids = $product->get_gallery_image_ids();
       foreach( $attachment_ids as $attachment_id ) {
          $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
          if ( empty($alt) ) {
              $alt = __('product image', 'Frank_Maisler');
          }
          ?>
          <div>
              <img loading="lazy" alt="<?php echo $alt; ?>" src="<?php echo wp_get_attachment_url( $attachment_id ); ?>">
          </div>
           <?php
       }
       ?>
  </div>
  <div class="slider slider-nav single-product-slider-carousel d-none">
      <div>
          <img loading="lazy" alt="<?php echo $alt; ?>" src="<?=$attachment_url?>">
      </div>
      <?php
      foreach( $attachment_ids as $attachment_id ) :
          $alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
          if ( empty($alt) ) {
              $alt = __('product image', 'Frank_Maisler');
          }
          ?>
          <div>
              <img loading="lazy"  alt="<?php echo $alt; ?>" src="<?php echo wp_get_attachment_url( $attachment_id ); ?>">
          </div>
          <?php
      endforeach;
      ?>
  </div>

Затем в js помещаем инициализацию слайдера в таймаут и скрываем изображением после инициализации


jQuery(document).ready(function($) {
   setTimeout(function() {

       if ( jQuery('.single-product-slider-carousel img').length != 1) {
           jQuery('.single-product-slider-image').removeClass('d-none');
           jQuery('.single-product-slider-carousel').removeClass('d-none');

           jQuery('.slider-nav').slick({
               lazyLoad: 'ondemand',
               slidesToShow: 4,
               slidesToScroll: 1,
               arrows:false,
               asNavFor: '.slider-for',
               focusOnSelect: true
           });

           setTimeout(function() {
               var main_image = jQuery('.preload-single-product-image'),
                   height = main_image.height();
               jQuery(".single-product-slider-image").height(height);
               main_image.addClass('d-none');
           }, 1000);
       }

   }, 5000);
});

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


image

Подведем итоги. Задача выполнена, все страницы нашего проекта в зеленой зоне. Конечно еще можно провести много всякий оптимизаций:


  • Сократить bootstrap.css оставив только нужные элементы.
  • Попрофилировать ресурс в поисках узких мест загрузки php и sql запросов.
  • Настроить более эффективно кэширование.

И еще много чего, но на сегодня цель достигнута, сайт действительно стал грузиться быстрее и PSInsights оценивает его высоко.

Средняя зарплата в IT

120 000 ₽/мес.
Средняя зарплата по всем IT-специализациям на основании 9 072 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
Реклама
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее

Комментарии 38

    0
    Спасибо, интересный пример!
      0
      Сократить bootstrap.css оставив только нужные элементы.

      А не использовать бутстап?
        0

        Вы предлагаете переписать сайт без bootstrap'а на этапе оптимизации?

          0
          А что там на бутстрапе завязано? сетка? Сетку можно отельно подключить вне остальных стилей.
            0

            "Там" — это где? Существуют тысячи тем, которые можно купить, и еще несколько вагонов самописных, в которых так или иначе используется bootstrap.
            Во многих случаях "убрать boostrap" очень близко к "переписать тему с нуля". Вот я и уточняю, какой смысл-то в этом?

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

              Плюс в скрине перед глазами подгружается сразу две версии Jquery, как-то обошли 1.12 явно лишняя.

              Да и код подмены слайдера автор должен был на чистом js сделать. Моветон jQ использовать, он полностью поглощен современным js.
                0

                Переписывание bootstrap'а вроде нигде не упоминалось. Откуда вы это взяли? У bootstrap'а множество компонентов, каждый из которых может быть использован в теме. Автор предлагает исключить неиспользуемые компоненты и мне это представляется это грамотным подходом. Вы предлагаете тему переписать, исключив bootstrap. На мой взгляд, это абсолютно бессмысленное занятие, потому что выгоды от этого никакой, а усилий будет потрачено много. Может быть я что-то не так понял? Пожалуйста, разверните тогда свою мысль подробнее.


                Плюс у вас в скрине перед глазами подгружается сразу две версии Jquery, вы это как-то обошли 1.12 явно лишняя.

                Я не автор поста. На случай, если кто-то случайно заглянет в комментарии с подобным вопросом, вот код для замены стандартного jquery, а не для подключения последней версии в дополнение к стандартной


                /* Use latest verion of JQuery */
                if (!is_admin()) {
                    wp_deregister_script("jquery"); 
                    wp_register_script("jquery", "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js", [], "3.5.1", true); 
                    wp_enqueue_script("jquery");
                }
                  0
                  За 1 час можно выяснить что из компонентов бутстрапа используется на сайте прямо по классам. Скорее всего верстальщик не умеет в js и сделал слайдер через бутстрап. Скорее всего он притащил для этого весь js бандл, как и притащил для сеток весь остальной css. Как я помню, для этого можно галочками собрать себе на сайте бутсрапа новый но сокращенный бандл.

                  Я нашел одну либу, которая поглощает массу задач ну разве что маску для телефона в не делает. Попапы, галереи, слайдеры, лайтбоксы

                  github.com/biati-digital/glightbox

                  Она конечно своеобразная, в том плане, что с непривычки могут быть проблемы с интеграцией. У меня были недопонимания после какой нибудб FancyBox. Главное, она весит 11kb в гзипе и кастомизируется как надо. Без зависимостей. Уникальный набор, я аналогов так и не нашел.
                  Не надо ни Jq для слайдеров, галерей ни бутстрапов.
                    0
                    Как я помню, для этого можно галочками собрать себе на сайте бутсрапа новый но сокращенный бандл.

                    Ну это и предлагает автор. Плюс, дополнительно, перенести код, необходимый для сеток в inline css.


                    Я нашел одну либу, которая поглощает массу задач ну разве что маску для телефона в не делает. Попапы, галереи, слайдеры, лайтбоксы

                    Чем эта либа лучше Bootstrap? Какая выгода от замены bootstrap'а (правильно собранного) на эту либу?


                    Ну и да, переубедить мейнтейнеров перейти на scss с post-css не удалось. Сложно перевозить проект если он у тебя уже на scss

                    Какая разница, на чём написана либа? В итоге вы всё равно имеете собранный css, который можно использовать. Это никак не мешает свой проект писать на scss

                      0
                      Нет оверхеда для совместимости с jQuery.
                      У бутстрапа очень не удобная кастомизация, логика которой уже заложена. он не живет вне своей жесткой разметки, которая всегда конфликтует с логикой верстки основного сайта. Хочешь компонент формы? Тащи эти class=«form-label» class=«form-control» а если что не так визуально, то перекрывай или правь исходнички.
                      23kb ядро + кб js от плагинов.
                        0
                        Хочешь компонент формы? Тащи эти class=«form-label» class=«form-control» а если что не так визуально, то перекрывай или правь исходнички.

                        Никогда у верстальщиков с этим проблем не было, и без правки исходников.


                        На мой взгляд эти "преимущества" не стоят даже того чтобы заводить разговор о смене библиотеки, в случае если сайт уже использует bootstrap.

                          0
                          Если уже использует то ок
                      0
                      Бутстрап фигня! Некий условный верстальщик под вордпресс с упорством, достойным лучшего применения, тащит в проект плагин Easy FancyBox, подключающий фэнсибокс якобы ко всем картинкам, на самом деле нет и используемый для всплытия одной специализированной формы на одной странице, при этом код js+css тянется на все страницы, тащит в проект плагин сниппетов и шорткодов Intense, используя из всего комбайна вывод на странице записей определенной категории, плагин также тащит на все страницы свои корявые js+css, что еще — ах да, плагин Popup Maker — так как плагин Easy FancyBox не удалось подключить к формам CF7. Общий файл css похудел с 350кб до 32кб!, скриптов было 4мб, стало 200кб! Заказчик попадаются разные, но ощущение, что тот самый верстальщик-прогер один и тот же)))
                        0
                        Поэтому я использую только glightbox, он и для popup и для фоток( немного геморно, в том плане что если вы перечислите в нем все селекторы для всплывания, то он открыв любой разрешит слайдить все, нужно на каждый попап свой объект объявлять)
                0

                Кроме сетки, например:


                • стили сообщений, кнопок, таблиц
                • управление видимостью элементов при различных размерах экрана (резиновая/мобильная верстка)
                • стили для меню (навигации)
                • удобное управление (шорткаты) частыми CSS-свойствами display, margin, padding

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


                То же самое относится и к jQuery.


                Если надо, чтобы потом любой верстальщик Вася мог поддерживать этот сайт, и задача "добавить на сайт такой-то компонент" не стоила 100.000р из-за трудностей отладки и не разваливала вдруг сайт на 5-м iPhone — надо использовать распространенные и отлаженные компоненты.


                Оптимизировать их надо, но очень аккуратно.

                  0
                  У вас из 4 пунктов 3 стили, один относится к сетке. Не нужны эти стили для сайта из-за жесткой семантики бутстрапа. Их и так писать нечего и без бутстрапа. Его удобство только в том что есть с ним уже есть опыт. Для админки он норм. для публичных интерфейсов ну не знаю для чего. Я давно бросил его так как возьни при кастомизации куда больше.
                    0

                    можете показать пример вашей вёрстки с вашими стилями? любопытно сравнить..

                      0
                      ничего особенного, вместо сеток бутстрапа у меня миксин
                      @mixin media($px) {
                          @media (max-width: #{$px}px) {
                              @content;
                          }
                      } 

                      ну и десктоп ферст контент. Мне так проще от сложного к упрощению. Дубли брейкпоинтов собираются сами в один брейкпоинт group-media-query для галпа.
                      Самый гибкий вариант, можно менять абсолютно любые параметры без борьбы c какой либо предустановленной структурой. Страх множества брейкпоинтов оказался на практике только страхом.
                    0
                    На 5 айфоне не запустится добрая половина современного js, начиная с бaнaльного
                    let
                0
                Как вариант, действительно сss бустрапа весит примерно столько же как и весь остальной сss месте взятый, но взять и отказаться от него будет турдоемкой задачей, в рамках этой задачи оптимизации решили обойтись без этого.
                  0
                  можно пробежаться по разметке и посмотреть что из него используется. Можно подготовить новый бандл через сайт бутстрапа, но обрезанный.
                0
                «После этого может возникнуть проблема с отображением ресурса в первые секунды загрузки, для этого нужно критично важный css отображать выше. В нашем случае мы просто отключим подключение bootstrap.css в теме проекта и добавим его в соответствующее окно настроек.» — для этого лучше будет использовать часть bootstrapa отвечающую за сетку, чтобы первый запрос не превышал 17кб, и сетки будет достаточно для постройки структуры страницы и отрисовки первых 1000 пикселей.
                  0
                  Да вы правы, я кстати так и сделал, но в статье забыл про это указать. Исправил
                  0

                  Хорошая статья. Я тоже активно использую WordPress. Сейчас пришел к тому, что полностью отказался от Bootstrap и большинства других библиотек. На старых проектах ещё используется jQuery. На новых — только PhotoSwipe (библиотека для lightbox).


                  Смешно, что все скрипты и стили теперь "весят" меньше, чем одна только Google Analytics и Яндекс.Метрика.


                  Сайты, кстати, реально быстрые и плотно так сидят в зелёной зоне. И "лишнего" функционала, как у это бывает у большинства платных тем, у меня нет.

                    0
                    Тоже смотрел на photoSwipe но выбрал glightbox
                      0

                      О, спасибо. Не знал о таком. А там есть возможность увеличить картинку двумя пальцами? На демо не вижу такого.


                      Я б заюзал для нового проекта.


                      UPD: есть такое. Но конкретно на моем устройстве как-то уж очень нестабильно работает. Через раз.

                        0
                        там есть какая-то хрень что с определенного размера экрана включаются жесты.
                          0

                          Спасибо. Я разобрался. Просто как-то не очень стабильно работает. Надо то ли четко одновременно пальцы на экран ставить, или ещё чего. Хотя может это просто с моего устройства так.

                            0
                            Обычное браузерное API. Можно зарепортить видео.
                    0

                    Посмотрел на этом сайте каталог… страница весит… тадам! 11 Мб!


                    JPEG-и из каталога ужимаются минимум вдвое без потери качества — сравнил на первой же попавшейся фотке, получилось 62К вместо 154К при качестве 70 в Ps Save for Web.


                    Грузится какой-то cdn.carrotquest.io/api.min.js на 514К! Facebook SDK for JavaScript — ещё 200К. Это ж жесть, товарищи...


                    Или там пока не применили эту оптимизацию?


                      0
                      Да до прода оптимизация пока не дошла, можно посмотреть ее на dev версии сайта frank-meisler.egodev2.info
                        0

                        Там сильно лучше, но два момента бросаются в глаза:


                        1) большой баннер растягивается сильно шире, чем физический размер (1024 точки расягивается на 1570 у меня). При этом он весит 340К, потому что в PNG. А мог бы быть в JPG, и весил бы в 5-6 раз меньше — килобайт 60. То есть если в картинке прозрачности нет, и "сохранить тонкие линии" не нужно, то и смысла держать её в PNG нет.


                        качество недопустимо теряется

                        2) В CSS грузится куча шрифтов: Lato:100,300,400,700,900 и Oranienbaum. При этом вес 100 не используется нигде, хотя грузится, а 500 в трёх местах и 600 в одном, хотя в загрузке их нет. Как интерпретируются указанные bolder и lighter — даже не знаю.


                        3) Я пытался возиться с оптимизацией CSS, через всякие UnCSS и другие оптимизаторы, и из этого мало что хорошего получается. Особенно если это чужой проект и чужие стили. Например, здесь у вас слетел размер слайдера, поэтому тени при наведении обрезаются, а точек-индикаторов больше не видно.


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


                        Учитывая, что один баннер на главной, конвертнутый в JPG, сэкономит столько же, сколько вся возня с CSS, я бы и не связывался с этим утомительным процессом.


                        Стили слетели
                          0

                          Не то чтобы я отрицал вышенаписанное, но обращу Ваше внимание на один момент:


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


                          Поэтому, последний абзац в Вашем комментарии стоило бы сформулировать немного по-другому.

                      0
                      Почему так мало о CDN, об отдаче в несколько потоков с разных доменов?
                      Тот же Cloudflare + Fastestcache в паре хорошо и бесплатно работают + защищают от dDOS на минимальном уровне.

                      Defer в скриптах, .svg и .webm

                        +2
                        Почему так мало о CDN, об отдаче в несколько потоков с разных доменов?
                        С появлением HTTP/2 необходимость вертикального шардинга отпала сама собой.
                          0

                          У нас на тестах Fastestcache никакого прироста не дал + у него бывают проблемы с очищением кэша.
                          Был заменён Simple Cache'ом (https://en-ca.wordpress.org/plugins/simple-cache/)

                            0
                            А Super Cash не пробовали? Проверял на www.webpagetest.org с ним показатель ttfb на 10% лучше в одном проекте был. Плюс в панельке веста есть готовый конфиг nginx, с его включением и этим плагином примерно на 2 пункта быстрее в PageSpeed
                            0

                            Согласно моему опыту CloudFlare зачастую довольно негативно влияет на скорость загрузки сайтов. Ну и часть IP у них заблокированы.


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

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

                          Самое читаемое