Нужно ли сжимать скрипты и плагины в 1 файл

#javascript #jquery #grunt #оптимизация_сайтов

Вопрос по оптимизации проекта. Использую grunt.js, все скрипты и плагины объединяю
и сжимаю в один файл, правильно ли это? Либо нужно подключать отдельно плагины, а все
вызовы плагинов и простые скрипты объединять уже в 1 файл?
    

Ответы

Ответ 1

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

Оптимизация стилей

Кроме обычной минификации стилей можно использовать и продвинутую - объединять дубликаты
классов и @media. Пример на gulp из моего web-starter-kit:

var
    gulp = require('gulp'),
    stylus = require('gulp-stylus'),

    // Минифицирует CSS, объединяет классы. Не ломает CSS, в отличие от cssnano,
который, к примеру, может неправильно выставлять z-index
    csso = require('gulp-csso'),

    // Объединяет все @media
    cmq = require('gulp-combine-mq'),

    // Сокращает CSS-селекторы    
    gs = require('gulp-selectors'),

    // Проставляет вендорные префиксы
    autoprefixer = require('gulp-autoprefixer'),

    livereload = require('gulp-livereload'),
    nib = require('nib');

// Compiling Stylus in CSS
gulp.task('css', function() {
    gulp.src('./styl/*.styl')
        .pipe(stylus({
            use: nib()
        }))
        .pipe(cmq())
        .pipe(csso())
        .pipe(autoprefixer('last 3 versions'))
        .pipe(gulp.dest('./public/css/'))
        .pipe(livereload())
});


А если совсем делать нечего, то можно еще и селекторы сократить:

// Minify selectors
    gulp.task('gs', function() {
        var ignores = {
            classes: ['active', 'menu', 'nav', 'slide', 'error', 'form-control',
'loader', 'showLoader', 'fadeLoader', 'webp', 'wow', 'owl-*', 'i-*'],
            ids: '*'
        };
        gulp.src(['./public/**/*.css', './public/**/*.html'])
            .pipe(gs.run({}, ignores))
            .pipe(gulp.dest('./public/'))
    });


Кстати, наверняка у вас есть классы, добавляющиеся через JS, поэтому предварительно
стоит все такие классы вынести в переменную ignores.

Сжатие графики

Кроме стилей и скриптов также посоветую сжимать и графику. К примеру, картинки можно
легко сжать без потери качества только за счет удаление exif-данных. Пример на gulp:

var
    gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    imageminJR = require('imagemin-jpeg-recompress'),
    imageminSvgo = require('imagemin-svgo');

// Optimizing images
gulp.task('imagemin', function() {
    gulp.src('./img/**/*')
        .pipe(imagemin([
            imageminJR({
                method: 'ms-ssim'
            }),
            imageminSvgo({
                plugins: [
                    {removeViewBox: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/img/'))
});


А для браузеров, которые понимают легковесный формат webp (формат разработан Google),
можно сделать еще такой вариант изображений:

var
    gulp = require('gulp'),
    webp = require('gulp-webp');

// Generate Webp
gulp.task('webp', function() {
    gulp.src('./img/**/*')
        .pipe(webp())
        .pipe(gulp.dest('./public/img/'))
});


Кеширование статики на стороне пользователя

Также бы посоветовал кешировать скрипты и стили на стороне пользователя, чтобы исключить
их повторную загрузку, если они не изменились:


  Header set Cache-Control "max-age=2592000"



И включить gzip сжатие на сервере:

# сжатие text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml
text/css text/javascript application/javascript application/x-javascript



Преимущества и недостатки CDN

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

В будущем, когда HTTP/2 будет достаточно распространен, скрипты можно будет загружать
в несколько потоков и конкатенация будет необязательной. Хотя и тогда конечный размер
сжатых в один файлов будет эффективней, чем сжатых по отдельности.