Страницы

Поиск по вопросам

понедельник, 25 ноября 2019 г.

Как увеличить скорость работы сайта Front?


На сайте 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 стили дл первого экрана и поместить их инлайном в →