Список полезных инструментов и ресурсов, которые можно добавить в закладки, чтобы повысить вашу скорость и эффективность.
Google пометит ваш сайт как медленный, если он не загрузится в течение трех секунд. Страшно думать об этом так, потому что сегодня большое количество веб-сайтов на самом деле медленные. Человек собирается отправиться на Марс, в то время как на Земле веб-сайты все еще создаются и поддерживаются из-за плохой практики, что приводит к вялым веб-сайтам по всему Интернету. Если вы не создаете прогрессивное веб-приложение, высока вероятность того, что ваш сайт будет считаться медленным.
Итак, решение простое: не создавайте веб-сайт, а создавайте прогрессивное веб-приложение!
Сделав это, вы уже выиграли половину битвы. Теперь, чтобы выиграть оставшуюся половину, вам нужны рекомендации и инструменты. В моем постоянном стремлении к созданию высококачественных быстрых веб-приложений в Hyperware я усвоил одну вещь: Интернет подбросит вам тысячи советов и инструментов, если вы их поищете, но лишь немногие из них действительно полезны, чтобы получить работа сделана. А найти их - непростая задача.
Эта статья представляет собой полную коллекцию проверенных и проверенных инструментов и приемов оптимизации, которые я лично считаю полезными, а также некоторые полезные статьи, на которые я до сих пор ссылаюсь, когда создаю прогрессивные веб-приложения для бизнеса.
Больно искать вещи, когда есть на чем сосредоточиться. Вот почему я проделал для вас эту грязную работу и попытался написать статью, которую стоит добавить в закладки!
Вот лучшие инструменты для:
- Оптимизировать или сжать изображения
- Проверить производительность веб-сайта
- Повысьте производительность вашего веб-приложения
Оптимизация или сжатие изображений
Squoosh
Squoosh - лучший инструмент оптимизации, который я когда-либо использовал. Мне очень жаль, что я не нашел его раньше. Squoosh создан инженерами Google, но самое лучшее в нем то, что вы можете видеть разницу в реальном времени между оптимизированными и неоптимизированными изображениями, когда вы устанавливаете уровень качества. Squoosh прост в использовании и дает вам четкое представление о том, как будет выглядеть ваше сжатое изображение.
ImageOptim
ImageOptim - простой и удобный в использовании оптимизатор изображений. Он автоматически уменьшает размер вашего изображения без потери исходного качества изображения. ImageOptim имеет удобный интерфейс перетаскивания с возможностью загрузки нескольких файлов, что делает его очень удобным для пользователя. Хотя ImageOptim доступен только для Mac, FileOptimizer - отличная альтернатива для пользователей Windows.
Проверьте эффективность веб-сайта
Инструменты оценки производительности веб-сайта - это не просто число из 100 - их следует использовать для итеративного поиска и исправления слабых мест вашего веб-сайта.
Маяк
Нет лучшего инструмента, чем Маяк, когда речь идет о производительности сайта. Оценка производительности 90+ является абсолютным эталоном для веб-приложений. Я настоятельно рекомендую прочитать следующую статью, чтобы лучше понять Google Lighthouse:
Совет от профессионала: используйте Lighthouse chrome extension для более быстрого аудита любой веб-страницы.
GTmetrix
GTmetrix, вероятно, единственный инструмент, который вам понадобится помимо Lighthouse для дальнейшей проверки возможных исправлений на вашем веб-сайте. Он показывает соответствующие возможности для повышения скорости веб-страницы, а также время загрузки страницы и общий размер страницы.
Повысьте производительность своего веб-приложения
- Всегда вызывайте файлы CSS перед файлами .js.
- Сведите к минимуму использование ‹link rel =« preload »› или ‹link rel =« prefetch »› в ваших HTML-файлах, если у вас нет ключевого запроса для загрузки раньше.
- Разделение пакетов подходит для приложений, требующих постоянных обновлений, например для новостных приложений. Для небольших приложений лучше обслуживать один файл .js и .css, что сократит количество HTTP-запросов.
- Используйте модуль Pagespeed. Модули PageSpeed - это серверные модули с открытым исходным кодом, которые автоматически оптимизируют ваш сайт. Пользователи статического хостинга могут поместить следующий код в свой .htaccess, чтобы включить модуль PageSpeed.
<IfModule pagespeed_module> ModPagespeed on ModPagespeedEnableFilters extend_cache </IfModule>
5. Сократите или сожмите файлы .js и .css. Для этого доступны различные онлайн-инструменты (например, минификатор). Если вы используете Webpack, то ваши файлы будут минифицированы при сборке продукта автоматически!
6. Используйте плагины оптимизации Webpack, такие как UglifyJs, ModuleConcatenate и Splitchunks, если вы используете Webpack в качестве сборщика модулей.
7. Используйте плагин Webpack Bundle Analyzer, чтобы понять, какие модули занимают сколько места в производственной сборке вашего приложения. Уменьшите количество неиспользуемых или малоиспользуемых модулей, занимающих много места в вашем пакете.
Некоторые дополнительные статьи о повышении производительности веб-приложений
Хорошо иметь инструменты, которые сделают за вас грязную работу. Это одна из причин, почему разработчики любят Webpack, и одна из причин, почему они не понимают, как работает Webpack!
Следующий контент - это глубокое погружение в мир оптимизации производительности. Вы поймете, как, что и почему скорость веб-сайта. Найдите время и изучите основы рендеринга в браузере и скорости веб-сайта с помощью этого контента.
Оптимизируйте скорость веб-сайта с помощью Chrome DevTools
Оптимизация рендеринга в браузере - бесплатный курс от Google
Руководство по прогрессивным веб-приложениям от Google
Общие сведения о разделении кода и разделении пакетов в Webpack
Я считаю, что вся приведенная выше информация значительно поможет вам в улучшении производительности вашего веб-приложения. Поскольку в Интернете все быстро меняется, я буду обновлять эту статью всякий раз, когда найду что-нибудь полезное. Будьте на связи!
