javascript – How to pass PageSpeed ​​Tools?

Question:

Who can tell me how to improve PageSpeed indicators. The project is small, in fact a landing page. I'm using gulp build. Images are all optimized to the maximum, online optimizers do not compress more. I connect several scripts via cdn . While they are not there, the result is good, as soon as I add them, the indicators fall by 73-76%. I want to achieve at least a green zone. When connecting locally plug-ins, the result is the same. Can someone suggest how to solve this problem?

Even if I slick , it's still 76%. Only jquey & bootstrap downgrades like this

// Connect to head

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

// Connect at the bottom of the page, before </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:

I would advise you to optimize all static content on the site.

Graphics Compression

In your case, in addition to compressing styles and scripts, I advise you to compress graphics as well. For example, pictures can be easily compressed without loss of quality just by removing exif data. On a real site, you can reduce the size of images by an average of 70%, which is about 4 MB on a modern site. 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/'))
});

And for browsers that understand the lightweight webp format (a format developed by Google), you can also make this version of images:

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

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

Script optimization

First, combine all the scripts into one file and minify them. This is a litter to reduce the number of HTTP requests and file size:

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

Style Optimization

In addition to the usual minification of styles, you can also use the advanced one – combine duplicate classes and @media. gulp from my [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/'))
});

And if there is absolutely nothing to do, then you can also shorten the selectors:

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

By the way, you probably have classes that are added via JS, so you should first put all such classes in the ignores variable.

User side static caching

I would also advise you to cache scripts and styles on the user side to prevent them from being reloaded if they have not changed:

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

Data compression and transition to HTTP/2

A considerable advantage in optimization is the compression of transmitted data. There are currently two compression methods: gzip and brotli .

For Apache, you can enable gzip by piping in .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>

The brotli algorithm will be slightly more efficient than gzip , but it can only be used with HTTP/2 , and HTTP/2 requires an SSL certificate to work. If you already have a certificate on your site, then switch to HTTP/2 immediately. In addition to supporting brotli , the protocol itself will make it possible to perform many requests within a single connection – static elements will be loaded in parallel and will not block each other, as happens in HTTP/1.1 .