Slony/speed-lab

Хакатон в прямом эфире: ускоряем мобильные сайты

• Настройка сервера
• Сборка сайта
  • Исходная неоптимизированная страница
  • Скрипты в конце страницы
  • Все скрипты в одном минифицированном файле
  • Изображения разных размеров для разных устройств
  • Ленивая загрузка изображений
  • Атлас спрайтов вместо маленьких изображений
  • Стили для верхней части страницы в HTML-коде
  • Упреждающие DNS-запросы для сторонних ресурсов
  • Мобильная версия без слайдера для больших экранов
  • Ленивая загрузка видео с YouTube
  • Минифицированный HTML-код
• Переход на HTTPS
• Переход на HTTP/2

Настройка сервера

---

ВНИМАНИЕ! Всё описанное ниже было выполнено на виртуальном сервере с операционной системой Ubuntu 16.04.3 LTS.

---

Добавляем PPA для nodejs:

\curl -sL https://deb.nodesource.com/setup_8.x | sudo bash

Обновляем информацию об источниках пакетов:

sudo apt-get update

Устанавливаем Apache, PHP, nodejs, Ruby, imagemagick, git и пакеты, необходимые для компиляции:

sudo apt-get install apache2 php nodejs libapache2-mod-php \
  ruby imagemagick git libffi-dev build-essential ruby-dev

Ставим compass для сборки CSS из SCSS:

sudo gem update --system && sudo gem install compass

Клонируем репозиторий:

git clone https://github.com/Slony/speed-lab.git

Создаем файл виртуального хоста для Apache:

sudo tee -a /etc/apache2/sites-available/speed-lab.conf >/dev/null <<EOF
<VirtualHost *:80>
  ServerName speed-lab.anticor.pro
  ServerAlias localhost
  ServerAdmin webmaster@localhost
  DocumentRoot $HOME/speed-lab
  <Directory $HOME/speed-lab>
    Options +FollowSymLinks +ExecCGI +Includes
    Require all granted
  </Directory>
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
EOF

---

ВНИМАНИЕ! Если будете использовать этот скрипт, пожалуйста, не забудьте заменить домен speed-lab.anticor.pro в директиве ServerName на ваш домен.

Для простоты изложения далее по тексту везде будет использоваться домен speed-lab.anticor.pro.

---

Включаем виртуальный хост:

sudo a2ensite speed-lab.conf

Просим Apache обновить конфигурацию:

sudo service apache2 reload

Проверяем сайт по внешнему адресу: http://speed-lab.anticor.pro/

Сборка сайта

Исходная неоптимизированная страница

Переходим в директорию original с изначальной версией страницы:

cd speed-lab/original

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

Проверяем: http://speed-lab.anticor.pro/

Скрипты в конце страницы

Переходим в директорию scripts-in-footer:

cd ../scripts-in-footer

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

Проверяем: http://speed-lab.anticor.pro/scripts-in-footer/

Все скрипты в одном минифицированном файле

Переходим в директорию scripts-minified:

cd ../scripts-minified

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

Собираем скрипты в один файл:

node_modules/grunt/bin/grunt concat

Минифицируем файл со скриптами:

node_modules/grunt/bin/grunt uglify

Проверяем: http://speed-lab.anticor.pro/scripts-minified/

Изображения разных размеров для разных устройств

Переходим в директорию images-resized:

cd ../images-resized

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

Генерируем уменьшенные изображения разного размера:

node_modules/grunt/bin/grunt responsive_images

Проверяем: http://speed-lab.anticor.pro/images-resized/

Ленивая загрузка изображений

Переходим в директорию images-lazy:

cd ../images-lazy

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

Проверяем: http://speed-lab.anticor.pro/images-lazy/

Атлас спрайтов вместо маленьких изображений

Переходим в директорию images-sprite:

cd ../images-sprite

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

Генерируем атлас спрайтов и отдельную таблицу стилей для него:

node_modules/grunt/bin/grunt sprite

Проверяем: http://speed-lab.anticor.pro/images-sprite/

Стили для верхней части страницы в HTML-коде

Переходим в директорию styles-inline:

cd ../styles-inline

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

Генерируем таблицу стилей, необходимую для отрисовки верхней части страницы, которую пользователь видит сразу, до прокрутки:

node_modules/grunt/bin/grunt critical-css

В index.php «критические» стили вставляются директивой include():

<style><?php include("css/critical.css");?></style>

Проверяем: http://speed-lab.anticor.pro/images-sprite/

Упреждающие DNS-запросы для сторонних ресурсов

Переходим в директорию prefetch:

cd ../prefetch

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

В HTML-коде упреждающие DNS-запросы вставляются тэгом `':

<link rel="dns-prefetch" href="//www.youtube.com">
<link rel="dns-prefetch" href="//i.ytimg.com">

Проверяем: http://speed-lab.anticor.pro/prefetch/

Мобильная версия без слайдера для больших экранов

Переходим в директорию slider-desktop:

cd ../slider-desktop

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

В index.php используем класс Mobile_Detect для определения пользовательской платформы на стороне сервера:

<?php
  require_once 'mobile_detect.php';
  $detect = new Mobile_Detect;
?>

    <?php if (!$detect->isMobile()): ?>
      <link rel="stylesheet" type="text/css" href="css/owl.css">
    <?php endif; ?>

    <?php if (!$detect->isMobile()): ?>
      <script type="text/javascript" src="js/libs/owl.js"></script>
    <?php endif; ?>

      <?php if (!$detect->isMobile()): ?>
        <h2 class="hidden-mobile">This slider is only displayed on Desktop</h2>
        <div id="home-slider" class="owl-carousel owl-theme hidden-mobile">
          <div class="item"><img src="img/home/slider/3.jpeg" alt="The Last of us"></div>
          <div class="item"><img src="img/home/slider/4.jpeg" alt="GTA V"></div>
          <div class="item"><img src="img/home/slider/5.jpeg" alt="Mirror Edge"></div>
        </div>
        <hr class="hr--50 u-mtm u-mbm hidden-mobile" />
      <?php endif; ?>

Проверяем: http://speed-lab.anticor.pro/slider-desktop/

Ленивая загрузка видео с YouTube

Переходим в директорию youtube-lazy:

cd ../youtube-lazy

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

В index.php подключены скрипты для ленивой загрузки адаптивного фонового изображения:

<script type="text/javascript" src="js/libs/ls.bgset.min.js"></script>
<script type="text/javascript" src="js/libs/lazysizes.js"></script>

… и для показа видео-плеера по клику или касанию:

<script type="text/javascript" src="js/libs/magnific-popup.js"></script>

В js/doc-ready.js добавлен скрипт, привязывающий показ видео-плеера к элементу в идентификатором banner-player:

$('#banner-player').magnificPopup({
  type: 'iframe'
});

В index.php видео вставлено в виде блочного элемента с классом lazyload и ссылкой с идентификатором banner-player:

<div class="bg-video lazyload" data-bgset="img/home/video-bg/200x200-1.jpeg 200w, img/home/video-bg/300x300-1.jpeg 300w, img/home/video-bg/400x300-1.jpeg 400w, img/home/video-bg/768x400-1.jpeg 700w" data-sizes="auto">
  <a id="banner-player" href="https://www.youtube.com/watch?v=I4vX-twze9I">
    <img class="player-btn lazyload"  data-src="img/home-banner-promo-player.png">
  </a>
</div>

Проверяем: http://speed-lab.anticor.pro/youtube-lazy/

Минифицированный HTML-код

Переходим в директорию html-minified:

cd ../html-minified

Ставим npm-пакеты:

npm install

Собираем стили:

node_modules/grunt/bin/grunt compass

В самом начале index.php включаем буферизацию потока вывода с фильтрацией через функцию sanitize_output(), которая удаляет лишние пробельные символы из HTML-кода:

<?php
  function sanitize_output($buffer) {
    $search = array(
      '/\>[^\S ]+/s',  // strip whitespaces after tags, except space
      '/[^\S ]+\</s',  // strip whitespaces before tags, except space
      '/(\s)+/s'       // shorten multiple whitespace sequences
    );
    $replace = array(
      '>',
      '<',
      '\\1'
    );
    $buffer = preg_replace($search, $replace, $buffer);
    return $buffer;
  }
  ob_start("sanitize_output");
?><!DOCTYPE html>

В самом конце index.php выводим содержимое отфильтрованного буфера:

</html>
<?php ob_end_flush(); ?>

Переход на HTTPS

Для перехода на HTTPS получаем SSL-сертификат с помощью сервиса Let’s Encrypt и включаем HTTPS в веб-сервере Apache (подробнее читайте в статье How to Properly Enable HTTPS on Apache with Let’s Encrypt on Ubuntu 16.04/17.10).

Ставим пакеты Let’s Encrypt:

sudo apt-get install letsencrypt python-letsencrypt-apache software-properties-common

Добавляем источник пакетов для certbot и ставим его:

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt install certbot python-certbot-apache

Запускаем certbot, чтобы он получил SSL-сертификат и настроил Apache:

sudo certbot --apache --agree-tos --redirect --uir --hsts \
  --staple-ocsp --must-staple -d speed-lab.anticor.pro \
  --email example@example.com

---

ВНИМАНИЕ! Если будете копировать и запускать приведенную выше команду, пожалуйста, не забудьте заменить speed-lab.anticor.pro на ваш домен и example@example.com на ваш адрес электронной почты.

---

Проверяем наш новый сертификат: https://www.ssllabs.com/ssltest/analyze.html?d=speed-lab.anticor.pro.

---

ВНИМАНИЕ! Если будете использовать для проверки SSL-сертификата приведенный выше адрес, пожалуйста, не забудьте заменить speed-lab.anticor.pro на ваш домен.

---

Переход на HTTP/2

• How to Enable HTTP/2 Protocol with Apache on Ubuntu 16.04/17.10
• How to Enable HTTP/2 Protocol with Nginx on Debian 8 Jessie Server
• Introducing HTTP/2 Server Push with NGINX 1.13.9