Skip to main content

Как получить 100 баллов скорости страницы в Google с помощью Middleman и Nginx

Все ненавидят медленные сайты. Все любят быстрые сайты.

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

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

Я использую статический генератор сайтов Middleman для фронт-энда веб-сайта, который вы сейчас читаете. Он размещен на Digital Ocean дропплете, на сервере Nginx, поэтому я приведу несколько примеров того, как я достиг идеальной оценки в контексте этого блога и его стека.

Google PageSpeed ​​Insights

Google PageSpeed ​​Insights - инструмент Google для оценки скорости веб-сайта на основе определенных показателей, в том числе:

  • Избегание переадресации целевой страницы
  • Исключение блокировки отображения JavaScript и CSS в содержимом над фолдом
  • Подключение сжатия
  • Кэширование браузеров
  • Минимизация CSS
  • Минимизация HTML
  • Минимизация JavaScript
  • Оптимизация изображений
  • Приоритет видимого содержимого
  • Сокращение времени отклика сервера

Мне нужен быстрый веб-сайт, и приятно получать на 100% время от времени, поэтому я отправился на исследования, чтобы получить 100/100 баллов на elliotec.com. Теперь я расскажу вам, как это сделать.

Размер страницы

Прежде чем перейти к любому из этих правил, в частности, расскажите о размере страницы в целом. Сделайте свою кодовую базу маленькой. Если вам не нужна вся огромная загрузка CSS-кода Bootstrap на всех ваших страницах, используйте что-то более легкое и настраивайте. Если вам не нужна куча JavaScript на вашей странице, например, для блога, то не помещайте его туда. Наличие нескольких небольших причудливых анимаций за счет сотен миллисекунд обычно не стоит для пользователя. Тем не менее, если основная часть бренда или требования поставили вас в место, где нужен тяжелый JavaScript, все же есть стратегии, которые вы можете использовать, чтобы сохранить его тонким и быстрым.

Управление клиентом и сервером

Одна вещь, которая вам понадобится, чтобы получить оценку 100/100, - это прямой контроль над основными средствами и создание инструментов вокруг них. Я использовал статический генератор сайтов Middleman для создания этого сайта с моими конфигурациями, чтобы максимально увеличить производительность. На этом веб-сайте практически нет JavaScript (кроме плагина Squaresend для электронной почты), но если бы мне это было нужно, я бы обрабатывал его, как и остальные мои активы. Вот ссылка на мою полную версию Middleman config.rb для справки.

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

Нарушение показателей

Давайте обратимся к некоторым деталям.

Избегайте переадресации целевой страницы

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

Активация сжатия

Здесь нам уже нужен контроль над сервером. Поскольку http поддерживает отправку сжатых файлов по сети для более быстрой передачи, мы должны воспользоваться всеми возможными возможностями, прежде чем отправлять их в браузер. С Nginx и Middleman это очень легко включить. В моем глобальном nginx.conf у меня есть:

#nginx.conf

http {
    sendfile on;
    types_hash_max_size 2048;
    server_names_hash_bucket_size 128;
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript application/x-font-ttf font/opentype image/svg+xml image/x-icon;
}

И в моей версии Midman:

# config.rb
configure :build do
  activate :gzip
end

Использование кэширования браузеров

Кэширование позволяет браузеру сохранять загруженные ресурсы в течение заданного периода времени, чтобы он не продолжал загружать одни и те же файлы снова и снова. Это снова довольно легко сделать с Nginx, установив истечение для разных типов файлов, например, как у меня в моем локальном nginx.conf для этого веб-сайта:

#expiry map
map $sent_http_content_type $expires {
    default                     off;
    text/html                   epoch;
    text/css                    max;
    application/javascript      max;
    application/x-font-ttf      max;
    application/x-font-otf      max;
    application/font-woff       max;
    application/font-woff2      max;
    ~image/                     max;
}

server {
    listen 80;
    listen [::]:80;
    server_name elliotec.com www.elliotec.com;
    expires $expires;
    return 301 https://$server_name$request_uri;
}

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

# config.rb
configure :build do
  activate :asset_hash
end

Уменьшаем активы

Одна из наиболее известных и простых стратегий скорости страницы - это минимизация ваших активов. Наличие встроенного шага, который минимизирует ваш HTML, CSS и JavaScript, имеет важное значение в современной веб-разработке, но его пропускают много. Вы можете резко уменьшить размеры пучка с минимализацией. В Миддлмане все, что вам нужно сделать, это положить пару строк в вашу config.rbработу для вас, например:

# config.rb
configure :build do
  activate :minify_css
  activate :minify_javascript
  activate :minify_html
end

Минимизация CSS и JS предоставляется бесплатно с Middleman, но вам придется добавить gem middleman-minify-htmlдля HTML-фрагмента, который вы определенно хотите, даже если он не даст вам столько же прибыли, сколько и другие активы.

Оптимизация изображений

Изображения, как правило, являются самыми дорогими файлами для загрузки браузером в зависимости от размера и скорости, поэтому это одна из областей, в которой вы можете получить некоторые из самых высоких результатов в производительности. Чтобы начать, вы, как правило, хотите иметь изображения с наименьшими жизнеспособными размерами и качеством. У таких инструментов, как Photoshop, есть возможность сделать много мощной работы, но вы можете оптимизировать их еще больше на этапе построения с помощью инструмента, такого как imageoptim. Конечно, с Миддлманом это довольно легко. Сначала вы захотите добавить gem 'middleman-imageoptim', git: 'https://github.com/plasticine/middleman-imageoptim', branch: 'master'в свой gemfile, а затем:

# config.rb
configure :build do
  activate :imageoptim
end

Приятно, вы просто побрили тонну веса от этих тяжелых изображений.

Сократите время отклика сервера

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

Приоритет видимого содержимого

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

Исключаем блокировку отображения JavaScript и CSS в над-фолд содержимом

Это, наверное, самый хитрый элемент в списке, и это связано с предыдущим. Есть несколько стратегий, которые я использовал, чтобы передать это. Во-первых, если вам нужны сторонние Java-скрипты или добавьте asyncатрибут ко всем scriptтегам следующим образом:, <script async src="main.js">так что внешние файлы JavaScript не блокируют загрузку и рендеринг другого содержимого и загружаются асинхронно.

Затем добавьте свои CSS и JS вместо вызовов внешних ресурсов. Делать это вручную было бы ужасно и уродливо, но у нас есть инструменты для этого. Есть несколько шагов, чтобы все ваши активы были привязаны к вашим страницам.

  • Сначала вам нужно добавить звездочки ( gem 'middleman-sprockets') в ваше приложение, потому что мы захватили конвейер активов Мидмана.
  • Затем в вашем config.rbдобавлении inline: trueхеш для каждого шага minify build следующим образом:
# config.rb
configure :build do
  activate :minify_css, inline: true
  activate :minify_javascript, inline: true
end
  • Наконец, в вашем шаблоне макета, где вы втягиваете свой CSS (везде, где может быть ваш <head>тег):
<style><%= sprockets.find_asset('site').to_s %></style>

а также для любых скриптов, которые вы хотите встроить, в <script>тегах, конечно.

Наконец, у меня возникли проблемы с получением сценария Google Analytics на моем сайте, чтобы он не блокировал визуализацию. Это было последнее в списке, чего я не достиг, и я был очень досажен, что не видел этого 100/100 очков. Поскольку моей реальной целью было количество, и было ясно, что мой сайт был довольно быстрым, я нашел глупый взломанный онлайн, чтобы обмануть инструмент «Статистика страницы», чтобы игнорировать сценарий Google Analytics. Если они могут противоречить себе, я полагаю, что смогу это сделать, и вы тоже можете!

if(navigator.userAgent.indexOf("Speed Insights") == -1) {
// Your Google Analytics Code Here
}

Все сделано!

Вот и все. Если вы выполнили инструкции в этом посте для своего собственного статического сайта, получите 100/100 баллов в Google Page Speed. Скорость - это то, что важно, и это хорошо для всех, кто использует ваш сайт, и это тоже должно быть полезно для SEO, не так ли?