На сайте backend отрабатывает за 50 мс, а фронт забирает кучу времени. В итоге полсекунды на отображение страницы с использованием кэша, без кэша 700 мс. Есть правила и способы увеличить скорость отображения?
Для бека используется Laravel
.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНа сайте backend отрабатывает за 50 мс, а фронт забирает кучу времени. В итоге полсекунды на отображение страницы с использованием кэша, без кэша 700 мс. Есть правила и способы увеличить скорость отображения?
Для бека используется Laravel
.
Оптимизация js одна из острых тем. Что Вы можете сделать:
1) Вы можете использовать встроенный профилировщик хрома http://prntscr.com/ejumdm и проанализировать какой скрипт/метод у Вас больше всего загружается и оптимизировать.
1.1) Есть например гугловский механизм PageSpead
2) Минимизация скриптов. По хорошему Вы можете минимизировать скрипты и стили с помощью инструментов для сборки grunt, gulp .
3) Если даже минимизация не помогает. Можно использовать AMD для асинхронной загрузки модулей. Для этого можно использовать, например, webpack
Я бы посоветовал вам оптимизировать весь статический контент на сайте.
В вашем случае кроме сжатия стилей и скриптов посоветую сжимать и графику. К примеру, картинки можно легко сжать без потери качества только за счет удаление 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:
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
.
Также бы посоветовал кешировать скрипты и стили на стороне пользователя, чтобы исключить их повторную загрузку, если они не изменились:
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|svg|swf|js|css|pdf|woff2|woff|ttf|eot)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
И включить gzip сжатие на сервере:
# сжатие 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>
Детали конкретно вашего случая вам надо смотреть в DevTools / Timeline и пользоваться каждым из методов с оглядкой туда, потому что общие советы по оптимизации в конкретном случае могут только навредить. К советам выше могу добавить следующие:
Посмотреть в таймлайне детали вашего critical rendering path. Постараться его максимально сократить:
Активно использовать <link rel="preload">
— в современных браузерах прирост в скорости весьма значительный, но использовать его надо с умом и таймлайном.
Изображения готовить в нескольких размерах и использовать тег <picture>
; отдавать изображения в формате WebP браузерам, которые его могут читать при помощи этого же тега.
<picture>
).Если используются кастомные шрифты, то их также рекомендую загружать асинхронно, например, при помощи fontfaceobserver.
Источники:
Статья об оптимизации вообще: https://dev.to/sanjsanj/optimising-the-front-end-for-thebrowser
О
<link rel="preload">
https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715WebP https://css-tricks.com/using-webp-images/
Base64 https://csswizardry.com/2017/02/base64-encoding-and-performance/, https://csswizardry.com/2017/02/base64-encoding-and-performance-part-2/
PNG → JPG + SVG (Transparent JPG) https://css-tricks.com/transparent-jpg-svg/
Для начала прогоните несколько ключевых страниц через Google PageSpeed Insights. Google вам выдаст примерно такие проблемы и рекомендации:
Плюс к этому прогоните ключевые страницы сайта через https://tools.pingdom.com/. Этот сервис даст понимание, какие именно ресурсы замедляют загрузку страниц. К примеру, часто оказывается что какие-то сторонние виджеты тормозят сайт или большие (тяжелые) ресурсы (видео, большой js и т.п.). Со сторонними виджетами можно попробовать использовать async или пообщаться с их техподдержкой (они должны быть заинтересованы, чтобы их виджеты грузились максимально быстро). Если ни то, ни то не помогает, то посмотрите альтернативные сторонние сервисы, которые грузятся более быстро.
Нужно сжимать картинки, скрипты, все ресурсы, объединять и кешировать.
.htaccess для ленивых (gzip, кеширование):
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteEngine On
#GZIP
AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
#GZIP
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
ServerSignature Off
<ifModule mod_headers.c>
#кэшировать html и htm файлы на один день
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=43200"
</FilesMatch>
#кэшировать css, javascript и текстовые файлы на одну неделю
<FilesMatch "\.(js|css|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
#кэшировать флэш и изображения на месяц
<FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
#отключить кэширование
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header set Cache-Control "no-store, no-cache, max-age=0"
</FilesMatch>
</IfModule>
<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 5 seconds"
#кэшировать флэш и изображения на месяц
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
#кэшировать css, javascript и текстовые файлы на одну неделю
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
#кэшировать html и htm файлы на один день
ExpiresByType text/html "access plus 43200 seconds"
#кэшировать xml файлы на десять минут
#ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
Почему никто не зашел глубже?) Сделать Apache бэкендом и Nginx обратным прокси для фронтенда, тем самым иметь высокую скорость!