Shopify Speed 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.

npm -i gulp
npm -i gulp-babel
npm -i gulp-autoprefixer
npm -i gulp-babel-minify
npm -i gulp-rename
npm -i gulp-sass
npm -i node-sass
npm -i gulp-minify-css
npm -i browser-sync
npm -i 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.