Ускоряем мобильную версию сайта: 10 шагов для оптимизации загрузки сайта на мобильных устройствах – Часть 1

В этой статье мы продолжаем тему ускорения мобильной версии сайта, которая была начата в статье «Скорость загрузки сайта: особенности инструментов проверки»

• Как увидеть хорошую скорость загрузки сайта в инструментах проверки для мобильных устройств?
• Как оптимизировать мобильную версию сайта?
• Какие технические приемы применить чтобы, мобильная версия сайта загружалась быстрее?
• Как добиться скорости загрузки до 3 секунд?

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

Предлагаем 10 шагов по ускорению мобильной версии сайта. При комплексном их использовании результат загрузки будет существенно улучшен.

Перемещение JS-скриптов вниз страницы

Это самое простое, что можно сделать, по ускорению загрузки.

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

Данная правка относится к оптимизация Critical Rendering Path (Критический путь рендеринга  или Процесс визуализации).

Позиция скриптов до перемещения

 

Позиция скриптов после перемещения

Если проверить мобильную версию сайта на оптимизацию, то мы выиграли 1 сек.

 

Сбор всех js файлов в один файл (минификация)

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

 

 

Как быстро собирать javascript в один файл, минифицировать, и сделать так чтобы скрипты собранные в один файл шли в правильном порядке? На помощь приходит файл Gruntfile.js.

Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. Проще говоря, это пакет для node.js, который берет на себя различные функции, в зависимости от плагинов, которыми мы его оснащаем.

В Gruntfile.js файле описаны задачи, которые будут выполняться в процессе его запуска.

В нашем примере, содержание файла Gruntfile.js следующее:

module.exports = function(grunt){
grunt.initConfig({
compass: {                  //compass - первая задача - собираем стили.
dev: {                      //Используется во всех версиях страницы, 
options: {                  //поскольку мы CSS тоже формируем
outputStyle:'compressed',   //из Sass файлов,которые
sassDir: 'sass',            //необходимо обработать.
cssDir: 'css',
// watch : true,
watch : false,
}
},
},

concat: {             //concat – вторая задача. Собираем скрипты в один файл.
options: {            //Собирает файлы .js в той последовательности
separator: ';',       //в которой указано в конфигурационном файле,
},                    //и сливает в один файл app.js
all: {
dest: 'js/app.js',
src: [  //
'js/libs/loadCss.js',
'js/libs/jquery.js',
'js/libs/magnific-popup.js',
'js/libs/async-gfont.js',
'js/libs/owl.js',
'js/doc-ready.js',
],
},
},

uglify: {           //uglify – третья задача. Минификация файла app.js.
my_target: {        //В результате минификации получаем файл app.min.js
files: {
'js/app.min.js': ['js/app.js']
}
},
},
});

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
};

 

Оптимизация CSS

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

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

module.exports = function(grunt){
grunt.initConfig({
compass: {                  //Собирает CSS
dev: {
options: {
outputStyle:'compressed',
sassDir: 'sass',
cssDir: 'css',
// watch : true,
watch : false,
}
},
},

critical: {              //Основная задача
test: {
options: {
base: '',
css: [
'css/app.css'
],
width: 450,
height: 800,
minify: true,      //если https://
extract : true     //необходимо указывать полный адрес,
},                 //если http:// можно и с localhost
src: 'http:// localhost/original/', //без пробела
dest: 'css/critical.css'
}
},

replace: {               //Утилитарная задача. Удалить слеш в CSS файле
example: {
src: ['css/critical.css'],
dest: 'css/critical.css',
replacements: [{
from: '/css',
to: 'css'
}],
}
},
});

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-critical');
grunt.registerTask('critical-css', ['critical','replace']);
};

 

Запускаем:

compass  – собирает весь CSS как таковой

critical    – в данную задачу входит подзадача replace

 

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

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

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

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

Как мы можем видеть на скриншоте, выполнилась загрузка изображения, размеры которого 1200×800  пикселей. Но желательно для устройств с разными размерами экрана иметь изображения с разными размерами.

 

 

Для реализации нам поможет атрибут srcset="" из HTML 5 .

В html-коде мы сообщаем, что, если браузер не понимает srcset="", то надо загружать большое изображение. Но если устройство понимает атрибут  srcset="", то сообщаем, что мы рассчитываем, условно, на четыре типа размера, указывая при этом ширину экрана устройства, и говорим для каждой ширины экрана, какие изображения необходимо подгрузить.

 

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

module.exports = function(grunt){
grunt.initConfig({
compass: {                 //Сборка стилей
dev: {
options: {
outputStyle:'compressed',
sassDir: 'sass',
cssDir: 'css',
// watch : true,
watch : false,
}
},
},

responsive_images: {     //Генерируем уменьшенные изображения разного размера
options: {
engine: 'im',
},
myTask: {
options: {
sizes: [{
width: 320,              //Размеры, которые мы желаем получить
},{
width: 480,
},{
width: 640,
}]                       //Все картинки, которые лежат в директории img/,
},                       //и которые соответствуют маске **.jpeg
files: [{                //необходимо сжать и разместить
expand: true,            //в директорию img/resized/
src: ['**.jpeg'],
cwd: 'img/',
dest: 'img/resized/'
}]
}
},
});

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-responsive-images');
};

 

Ленивая подгрузка изображений. Lazy Loading

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

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

 

 

Для реализации Lazy Loading необходимо использовать специальные библиотеки на javascript. В нашем примере используется lazysizes.js.  И дальше в html-коде страницы, для всех крупных изображений используется стилевой класс Lazy Load. Кроме того атрибут src="" преобразовался в атрибут date-src="".

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

 

Остальные 5 методов оптимизации загрузки мобильной версии сайта разберем в следующем материале нашего блога.

Статья подготовлена на основе видеодоклада сотрудников Google Ивана Бригида и Александра Приходько

Автор: Александр Баклажко