На сайте backend отрабатывает за 50 мс, а фронт забирает кучу времени. В итоге полсекунд
на отображение страницы с использованием кэша, без кэша 700 мс. Есть правила и способы увеличить скорость отображения?
Для бека используется Laravel.
Ответы
Ответ 1
Оптимизация js одна из острых тем. Что Вы можете сделать:
1) Вы можете использовать встроенный профилировщик хрома http://prntscr.com/ejumd
и проанализировать какой скрипт/метод у Вас больше всего загружается и оптимизировать.
1.1) Есть например гугловский механизм PageSpead
2) Минимизация скриптов. По хорошему Вы можете минимизировать скрипты и стили с помощью инструментов для сборки grunt, gulp .
3) Если даже минимизация не помогает. Можно использовать AMD для асинхронной загрузки модулей. Для этого можно использовать, например, webpack
Ответ 2
Я бы посоветовал вам оптимизировать весь статический контент на сайте.
Сжатие графики
В вашем случае кроме сжатия стилей и скриптов посоветую сжимать и графику. К примеру
картинки можно легко сжать без потери качества только за счет удаление 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.
Кеширование статики на стороне пользователя
Также бы посоветовал кешировать скрипты и стили на стороне пользователя, чтобы исключить их повторную загрузку, если они не изменились:
Header set Cache-Control "max-age=2592000"
И включить gzip сжатие на сервере:
# сжатие text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
Ответ 3
Детали конкретно вашего случая вам надо смотреть в DevTools / Timeline и пользоватьс
каждым из методов с оглядкой туда, потому что общие советы по оптимизации в конкретном случае могут только навредить. К советам выше могу добавить следующие:
Посмотреть в таймлайне детали вашего critical rendering path. Постараться его максимально сократить:
Убрать с него блокирующий CSS. Выделить, например, при помощи critical стили дл
первого экрана и поместить их инлайном в →