Shopify optimization

Here you will find a way to speed up the Shopify website.

To optimize the work of pages, you will need to connect a collector to the project (in our example, this is Gulp).

Create a directory in the root of your project (for example ./src). And further inside ./src create directories for images – /img, for JS files – /js, for style files – /css. Transfer the corresponding files to the appropriate directories.

First, you will need to install all the modules to work through the npm -i command. Such as: gulp, gulp-babel, gulp-autoprefixer, gulp-babel-minify, gulp-rename, gulp-sass, node-sass, gulp-minify-css, browser-sync, gulp-imagemin.

To connect gulp, create a file gulpfile.js.

Next, we connect all the modules and prescribe commands.

`use strict`;

/**
* Connecting modules
*/
const gulp = require(`gulp`);
const babel = require(`gulp-babel`);
const autoprefixer = require(`gulp-autoprefixer`);
const minify = require(`gulp-babel-minify`);
const rename = require(`gulp-rename`);
const sass = require(`gulp-sass`)(require(`node-sass`));
const cssMin = require('gulp-minify-css');
const browserSync = require('browser-sync');
const imageMin = require('gulp-imagemin');
const reload = browserSync.reload;

/**
* The paths to the files that we will work with
*/
const srcSCSS = `src/scss/*.scss`;
const srcJS = `src/js/*.js`;
const srcImg = `src/img/**/*.*`;

/**
* Styles task
*/
gulp.task('scss', function () {
   return gulp.src('src/scss/*.scss')
       .pipe(sass())
       .pipe(autoprefixer())
       .pipe(cssMin())
       .pipe(rename({
           suffix: '.min'
       }))
       .pipe(gulp.dest('theme/assets'))
       .pipe(reload({
           stream: true
       }));
});

/**
* JS task
*/
gulp.task('js', function () {
   return gulp.src('src/js/*.js')
       .pipe(babel({
           presets: ["@babel/preset-env"]
       }))
       .pipe(minify({
           mangle: {
               keepClassName: true
           }
       }))
       .pipe(rename({
           suffix: '.min'
       }))
       .pipe(gulp.dest('theme/assets'))
       .pipe(reload({
           stream: true
       }));
});

/**
* Images task
*/
gulp.task('images', function () {
   return gulp.src('src/img/**/*.*')
       .pipe(imageMin())
       .pipe(gulp.dest('theme/assets'))
       .pipe(reload({
           stream: true
       }));
});

/**
* Watch task
*/
gulp.task(`watch`, () => {
   gulp.watch(srcSCSS, gulp.series(`scss`));
   gulp.watch(srcJS, gulp.series(`js`));
   gulp.watch(srcImg, gulp.series(`images`));
});

/**
* Default task
*/
gulp.task(`default`, gulp.series(`scss`, `js`, 'images'));

To run gulp, use the gulp watch and gulp default commands in the terminal.

Also, to improve the site’s performance, double-check all pages and remove duplicate js files and minimize the use of inline styles on the page (it is better to move to ./src/scss).

Thus, you can increase the speed of the pages by 2 or more times.