I would advise you to optimize all static content on the site.
Compression graphics
In your case, in addition to compressing styles and scripts, I advise you to compress and graphics. For example, pictures can be easily compressed without losing quality only by deleting exif-data. On a real site, you can reduce the size of images by an average of 70%, which on a modern site is approximately 4 MB. Example on 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 (format developed by Google), you can also make this version of the 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 merge all the scripts into one file and minify them. This litter reduces 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 advanced - to combine duplicate classes and @media. An example of a 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 you really have nothing to do, then you can also reduce 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, for sure you have classes that are added through JS, so you should first put all such classes in the ignores variable.
Caching static on the user side
I would also advise caching scripts and styles on the user's side to prevent them from being re-loaded 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>
And enable gzip compression on the server:
# сжатие 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>
