Часто ваш работодатель просит вас что-то сделать с производительностью веб-сайта (по разным причинам), а вы говорите: «Чувак, эта задача невыполнима. Вы изучали архитектуру приложения? »
Хотя это может показаться безумным, и многие люди будут указывать на меня пальцем по этому поводу, я хочу сказать: «Неважно, сколько циклов for вы оптимизируете / независимо от количества кода, который вы переписываете. Это не повлияет на скорость загрузки вашей страницы более чем на несколько миллисекунд, пока вы не перестанете делать что-то с завязанными глазами »
Тщательно проанализируйте свой веб-сайт
Рабочий стол https://developers.google.com/speed/pagespeed/insights/
Мобильный https://testmysite.withgoogle.com/intl/en-gb
Основываясь на этой оценке, вы можете увидеть, насколько хорошо работает веб-сайт. Теперь, если вы посмотрите немного вниз, вы увидите предложения по возможностям улучшения. В сложном приложении, которое было создано 3–4 года назад, общие предложения касаются следующего поколения / сжатия / изменения размера изображений, шрифтов, сокращения сетевых вызовов, отсрочки / минимизации js и CSS.
Самый простой способ оптимизации
Просматривая отчет, мы можем сделать вывод, что проще всего ускорить работу - уменьшить размер изображений. В результате общего анализа из Интернета мы узнали, что изображения составляют около 60% от общего объема загрузки с сервера для веб-сайта.
Уменьшить размер изображений, но как?
Кодировку изображений можно изменить, чтобы воспроизвести изображение с таким же качеством, но со значительно меньшим размером.
Существует множество онлайн-сайтов, которые претендуют на звание лучших на рынке, но это не предлагается, так как вы не можете контролировать выходные изображения.
В Интернете доступно несколько кодировщиков, например Guetzli, MozJPEG.
Guetzli, который находит самый маленький JPEG-файл, который человеческому глазу неотличим от оригинала. Хотя это немного медленно, оно того стоит. Качество выходного изображения можно настроить, передав параметры. Лучше всего он подходит для высококачественных тяжелых изображений.
MozJPEG - еще один кодировщик, который претендует на звание самого быстрого в своем сегменте. Он разработан Mozilla и может предложить действительно мощное сжатие. Несомненно, это быстро и лучше всего подходит для легких изображений.
Итак, что выбрать?
Я бы предложил и то, и другое. Для достижения наилучших результатов используйте Guetzli от Google, а затем MozJPEG. Сначала запустите задачу gulp для Guetzli, а затем запустите задачу MozJPEG. Я выбрал качество 85, так как оно самое высокое, что стоит выбирать. Вы должны выбрать где-то между 75–85. Никогда не выходите за рамки 85, поскольку в Интернете это было бы ненужным.
const gulp = require(‘gulp’);
const imagemin = require(‘gulp-imagemin’);
const imageminGuetzli = require(‘imagemin-guetzli’);
const imageminMozjpeg = require(‘imagemin-mozjpeg’);
gulp.task(‘guetzli’, () =>
gulp.src(‘src/*.jpg’).pipe(imagemin([
imageminGuetzli({
quality: 85
})])).pipe(gulp.dest(‘dist’))
);
gulp.task(‘mozjpeg’, () =>
gulp.src(‘dist/*.jpg’).pipe(imagemin([imageminMozjpeg({
quality: 85,
progressive: true
})])).pipe(gulp.dest(‘dist2’))
);
Вы, ребята, тоже могли заметить, что я написал:
progressive: true
это для прогрессивного JPEG, что означает, что изображения сначала будут размытыми, постепенно улучшая качество по мере загрузки данных. Обычно изображения загружаются сверху вниз или наоборот, что ухудшает восприятие пользователем.
Использование форматов NextGen, таких как JPEG 2000, JPEG XR и WebP
Короче говоря, я бы сказал, что WebP рекомендуется, поскольку он
Показ изображений в формате следующего поколения может быть проблематичным, поскольку он не поддерживает браузер. Ни один из трех форматов следующего поколения не поддерживается всеми тремя браузерами.
Почему я выбираю WebP?
Потому что Chrome - самый популярный браузер как на настольных компьютерах, так и на мобильных устройствах, с преобладанием более 60%. Так что лучше выбрать WebP, поскольку он им поддерживается. Кроме того, WebP обеспечивает наилучшее сжатие без потерь.
Форматы нового поколения или Guetzli + MozJPEG?
Я бы порекомендовал использовать изображения в форматах следующего поколения с использованием тега ‹Picture› для браузеров, которые его поддерживают, и Guetzli + MozJPEG для браузеров, не поддерживающих форматы следующего поколения.
Что делать, если мне нужно поддерживать IE 9?
IE9 не поддерживает теги Picture. Так что было бы сложно использовать тег ‹picture›.
Либо вы можете использовать библиотеку javascript для создания собственного тега ‹picture› https://github.com/scottjehl/picturefill
или вы можете использовать конфигурацию сервера для обслуживания различных форматов изображений на основе заголовков запросов. Https://www.igvita.com/2013/05/01/deploying-webp-via-accept-content-negotiation/
// Конец !!
Источники:
