Как пройти PageSpeed Tools?

#javascript #html #jquery #css

Кто мне может подсказать как улучшить показатели PageSpeed. Проект маленький, по
сути лендинг. Использую сборку gulp. Изображения все оптимизированы на максимум, онлайн
оптимизаторы не сжимают больше. Подключаю несколько скриптов через cdn. Пока их нет,
результат хороший, как только добавляю, показатели падают на 73-76 %. Хочу добиться
хотя бы зеленной зоны. При подключении локально плагинов, результат тот же. Кто-то
может подсказать как решить эту проблему? 

Даже если slick убираю, все равно 76%. Только jquey & bootstrap так понижает показатели

// Подключаю в head








// Подключаю внизу страницы, перед 

    





    

Ответы

Ответ 1

Я бы посоветовал вам оптимизировать весь статический контент на сайте.

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

В вашем случае кроме сжатия стилей и скриптов посоветую сжимать и графику. К примеру,
картинки можно легко сжать без потери качества только за счет удаление exif-данных.
На реальном сайте можно сократить размер картинок в среднем на 70%, что на современном
сайте равняется примерно 4 МБ. Пример на 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/'))
});


Оптимизация скриптов

Сперва объедините все скрипты в один файл и минифицируйте их. Это помет сократить
количество HTTP-запросов и размер файлов:

var
    gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

// Concat JS
gulp.task('js', function(){
    gulp.src([
        './js/jquery.js',
        './js/wow.js',
        './js/menu.js',
        './js/scrollspy.js',
        './js/main.js',
        './js/temp/contact.bundled.js',
        './js/owl.carousel.js'
    ])
        .pipe(concat('script.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/'))
});


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

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

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/'))
});


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

// 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.

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

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


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



Сжатие передаваемых данных и переход на HTTP/2

Немалое преимущество в оптимизации даёт сжатие передаваемых данных. На данный момент
есть два метода сжатия: gzip и brotli.

Для Apache включить gzip можно пропивав в .htaccess:

# сжатие 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



Алгоритм brotli будет немного эффективней, чем gzip, но его можно использовать лишь
с HTTP/2, а для работы HTTP/2 нужен SSL-сертификат. Если у вас на сайте уже есть сертификат,
то немедленно переходите на HTTP/2. Кроме поддержки brotli сам протокол даст возможность
выполнять множество запросов в рамках одного соединения – статические элементы загрузятся
параллельно и не будут блокировать друг друга, как это происходит в HTTP/1.1.