7 вещей Google PageSpeed ​​Insights не говорит вам

  1. 1 и 2 - объединение файлов CSS и Javascript
  2. 3, 4 и 5 - минимизируйте свой CSS, HTML и код JavaScript
  3. 6 - Сжатие ваших изображений
  4. 7 - Обслуживание масштабированных изображений может спасти КиБ
  5. Бонус - вещи, которые вы можете игнорировать благодаря HTTP / 2

Просмотр оригинальной статьи опубликовано Вот ,

,

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

Как сам бывший разработчик, я могу понять причину, по которой принимаются определенные решения об использовании HTML, CSS или Javascript, которые могут привести к тому, что PageSpeed ​​Insights покажет вам палец.

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

Понимание того, кто создал сайт, платформу, которую он использует, и уникальных проблем, с которыми он сталкивается, позволяет вам проводить аудит скорости сайта более умным способом. Например, избегая ситуаций, например, когда вы в пятый раз говорите своей команде разработчиков, что они должны использовать Image Sprites, несмотря на то, что ваш сервер фактически использует HTTP / 2, что теоретически делает их существование избыточным.

Цель этого поста - познакомить вас с 7 распространенными тактиками ускорения, предложенными Google PageSpeed ​​Insights, и помочь вам разобраться с ними в контексте или действии - поскольку инструмент, как и раньше, не предлагает много рекомендаций по реализации.

1 и 2 - объединение файлов CSS и Javascript

1 и 2 - объединение файлов CSS и Javascript

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

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

Примеры:

  • Javascript: Angular, React, JQuery, D3, Grunt, Gulp.
  • CSS: Bootstrap, Google Web Fonts

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

Та же логика также применима к любому дополнительному CSS или Javascript, сгенерированному плагинами CMS. Например, многие из самых популярных плагинов WordPress, Magento и Drupal имеют сопутствующие CSS / JS. Если эти файлы будут объединены вручную, это усложнит автоматическое обновление плагина.

Наконец, я бы также оставил любые аналитические файлы отслеживания Javascript отдельно. В частности, Google Analytics имеет привычку менять способ отслеживания событий.

3, 4 и 5 - минимизируйте свой CSS, HTML и код JavaScript

3, 4 и 5 - минимизируйте свой CSS, HTML и код JavaScript

Минификация - это процесс удаления ненужного белого кода из файлов CSS и Javascript для незначительного улучшения скорости загрузки. Опять же, это ценная лучшая практика, но проблема в масштабах, что вы делаете, когда у вас есть миллионы URL-адресов?

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

За пределами Google Kangax разработал HTML Minifier это можно найти на Github, а для небольших сайтов Minifier.org вы можете просто скопировать, вставить и преобразовать свой код CSS / JS на лету.

6 - Сжатие ваших изображений

6 - Сжатие ваших изображений

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

Google (удивительно) недавно начал выступать за открытый исходный код без потерь формат изображения WebP в качестве потенциального решения. Согласно их собственным данным, формат WebP часто на 26% меньше, чем файлы PNG, и обеспечивает еще лучшие результаты - на 34% меньше для JPEG. WebP уже изначально поддерживается в Google Chrome и браузере Opera, предлагает ряд утилит для автоматизации преобразования существующих библиотек изображений и даже плагин фотошоп ,

7 - Обслуживание масштабированных изображений может спасти КиБ

Кредит изображения:   Тэй Бенлор Кредит изображения: Тэй Бенлор

TL; DC - Google Page Insights не учитывает изображения, совместимые с Retina-дисплеем, которые подаются в соответствующем масштабе.

Исходя из вышеизложенного, изображения, размещаемые на веб-страницах, нередко размещаются с другой высотой и шириной, чем сам необработанный файл. Например, файл с именем logo.png, опубликованный на ilovetowinlinks.com, может иметь размер 660 x 330 пикселей, но обслуживается только с разрешением 120 x 110 пикселей, поэтому реальное изображение больше, чем то, что на самом деле видит пользователь.

Конечно, это может быть расточительным и плохой практикой, когда речь идет о сжатии изображений. Однако с момента появления iPhone 4 и сопровождающего его MacBook Pro с Retina-дисплеем концепция изображений Retina приобретает все большую тенденцию.

Компьютерные дисплеи, которые могут обслуживать до 2 раз больше пикселей на дюйм, требуют более высокого качества изображения, чтобы сохранить его четкость. Есть два решения для этого, которые являются общепринятыми - используйте векторные изображения или файлы SVG, где это возможно, или альтернативно создайте изображение с разрешением 200 x 200 пикселей и используйте CSS для отображения только с разрешением 100 x 100 пикселей. Google PageSpeed ​​Insights не учитывает это Широко используется решение для обслуживания изображений с более высоким разрешением.

Бонус - вещи, которые вы можете игнорировать благодаря HTTP / 2

Бонус - вещи, которые вы можете игнорировать благодаря HTTP / 2

Подавляющее большинство тактик скорости сайта, которые отстаивались на протяжении многих лет, существуют из-за ограничений протокола HTTP / 1. В прошлом году я опубликовал подробное руководство по HTTP / 2, в котором рекомендовал каждому бренду начать его использовать. На момент написания, все еще только 12% веб-сайтов используют HTTP / 2.

Как уже упоминалось в этом руководстве, существуют дополнительные распространенные предложения PageSpeed ​​Insight, которые можно игнорировать, поскольку они эффективно исключаются при наличии HTTP / 2. Это включает в себя создание спрайтов изображений, разделение доменов и объединение файлов CSS / JS, которые существуют как способы уменьшения количества запросов браузера, но приводят к ресурсам, которые могут не отображаться на странице, которую посещает пользователь.

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