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

146
11 апреля 2019, 11:10

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

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

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

<link rel="icon" type="image/png" href="./public/images/favicon.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
<link rel="stylesheet" href="./public/css/main.css">

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>    
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script defer src="./public/js/matchHeight.js" type="text/javascript"></script>
<script defer src="./public/js/script.js"></script>
Answer 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.

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

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

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|svg|swf|js|css|pdf|woff2|woff|ttf|eot)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>

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

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

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

# сжатие text, html, javascript, css, xml:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

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

READ ALSO
Работа JS в vue js

Работа JS в vue js

Не работает js код, когда пытаюсь собрать его с помощью vueВсё отрисовывается корректно, но не запускается скрипт, не меняются выделенные цвета

150
Перевсти из ISO формата в формат ДД.ММ.ГГГГ, ЧЧ:ММ?

Перевсти из ISO формата в формат ДД.ММ.ГГГГ, ЧЧ:ММ?

помогите перевести дату в ISO формате в вид ДДММ

120
Анимация через toggleClass

Анимация через toggleClass

Есть код раскрывающегося меню:

115