Автор оригинала: Dimitris Kiriakakis.
Если ваш сайт занимает более 3 секунд, чтобы загрузить, вы уже можете потерять почти половину ваших посетителей.
Да, это факт, доказанный несколькими исследованиями. Долгое время загрузки может иметь разрушительный влияние на скорость преобразования вашей заявки. С другой стороны, оптимизация времени загрузки страницы приводит к заметным улучшениям в опыте клиента, скорости конвертации, SEO и в конечном итоге, ваш продукт Успех
Итак, давайте скажем, что вы недавно построили веб-сайт или приложение Frontend, используя современную среду JS (угловые, реагирование, Vuejs и т. Д.). Как мы можем убедиться, что производительность не будет держать его от успеха?
Первые вещи в первую очередь. Мы должны как-то собирать некоторые данные . Когда дело доходит до измерения производительности приложения Frontend, инструменты, которые я доверяю больше всего:
- Google Chrome’s Маяк
- Speedcurve.
Оба инструмента могут помочь вам отслеживать все основные показатели эффективности KPI (индекс PageSpeed, время интерактивной, первой кончальной краской и т. Д.).
Маяк Включен в DEV-инструменты вашего Chrome, и, анализируя свой веб-сайт/веб-приложение, он может дать вам некоторые действительно полезные намеки на то, как увеличить его.
С Speedcurve. Вы можете иметь все эти KPI, а также возможность контролировать их во времени.
Так что теперь, когда мы можем измерить наш успех, давайте перейдем к оптимизации частей нашего веб-сайта, которые играют самую большую роль.
Изображений
Изображения являются ключевой частью каждого сайта. В среднем изображения составляют более 60% данных, которые загружаются на веб-страницы. Будучи таким важным компонентом практически всех веб-сайтов, оптимизация изображений, на мой взгляд, наиболее важным, и, возможно, самые низкие подвесные фрукты.
1. Измените размер ваших изображений и сделайте их отзывчивыми.
Самое главное, чтобы проверить, вы не используете большее разрешение, чем вам действительно нужно. Таким образом, вы должны изменить размер ваших изображений, чтобы соответствовать именно требованиям вашего макета.
Кроме того, вы должны убедиться, что ваши изображения такие как отзывчивый Как ваша макет. Существует отличный инструмент, который я использовал в последнее время, что может помочь вам сгенерировать все разные версии изображений, которые вам могут понадобиться, а также генерировать код HTML5, который может их использовать. Это называется Отзывчивый образец разведочных точек генератора Отказ Я обычно предпочитаю генерацию 8-10 разных изображений.
Конечно, вы можете использовать генерированный код HTML5 в любом приложении Freeend или веб-сайт. Кроме того, если вы в глотате, вы можете автоматизировать этот процесс с Гульп-отзывчивый плагин.
2. Убедитесь, что они ленивы загружены.
Ленивая загрузка в основном означает, что мы откладываем загрузку изображений, которые не требуются немедленно. Как правило, любое изображение, которое не видно для пользователей в текущем просмотре, может быть загружено в более позднем моменте во времени, когда изображение входит или вот входит в систему просмотра.
Независимо от того, какие рамки, которые вы используете, вы можете найти плагин, который может лениться – загружать изображения для вас (например, V-Lazy-image в Vuejs), однако вы также сможете создать собственную реализацию. Просто убедитесь, что вы используете современный способ обнаружить, когда элемент входит или выходит из просмотра браузера, Intersesecientobserver API Отказ
Бонус: используйте CDN для доставки изображения
Если вы уже оптимизировали размер и количество изображений, которые нагрузятся на ваш сайт, и особенно если он будет доступен во всем мире, вы также можете использовать Сеть доставки контента (CDN) служить им.
Через несколько слов CDN кэширует ваши изображения на глобально распределенной сети серверов. Поэтому, если пользователь из Австралии запрашивает изображение с вашего сайта, вместо того, чтобы извлекать это изображение с вашего сервера в Европе, CDN собирается доставить его с другого, ближе к этому пользователю в Австралии. Это сокращает время кругового времени, необходимое для загрузки изображения.
CSS, JS и HTML
Все современные рамки оптимизируют ваш код во время производственного времени сборки (кодовое расщепление, встряхивание деревьев, минификацию и т. Д.). Что вы можете сделать на этом?
1. Оптимизировать основной HTML-документ
HTML – это позвоночник почти каждого веб-приложения. Когда дело доходит до ссылки на ресурсы в вашем документе HTML, есть несколько лучших практик, которые вы должны следовать. Рекомендуется:
- Поместите ссылки CSS в верхней части заголовка документа HTML, чтобы обеспечить прогрессивный рендеринг.
- Поместите атрибуты JavaScript в нижней части вашего HTML-тела и Предпочитаю нагрузку Async Script . Это предотвратит любой
2. Убедитесь, что вы загружаете только то, что вам нужно
Angular, React и Vuejs все обеспечивают вам функции Lazy-loading. Вам нужно только правильно разделить свой код, в соответствии с вашими собственными потребностями и загружать только модули, которые вам нужны, как только вы действительно нуждаетесь в них. Например, если у вас есть приложение электронной коммерции, вы должны убедиться, что модуль корзины или модуль платежей не загружаются, когда пользователь находится на домашней странице.
Сжатие и кэширование
В целом, для всех активов, которые необходимы для вашего интерфейса (изображения и кода), вам следует применить сжатие и правильно кэшировать их.
Сжатие файлов сделает активы вашего приложения немного легче и уменьшают время туда, необходимое для их обслуживания. Один из наиболее часто Используемые методы сжатия файлов – Гzip. , отличный способ сокращения кусков кода, документов, изображений и аудиофайлов.
Броти Это еще один алгоритм сжатия файлов, и он растет популярностью. Этот алгоритм с открытым исходным кодом регулярно обновляется инженерами программного обеспечения от Google и других организаций. Он доказал себя сжать файлы на гораздо лучшее соотношение чем другие существующие методы.
Вы можете включить предпочтительный метод сжатия на Nginx, Apache или в какой сервере, который вы используете, путем изменения файлов конфигурации ( Включение броти на Nginx или Включение броти на Apache ).
Когда дело доходит до кэширования, наиболее часто используемая техника кэширования (также рекомендованная маяком) называется Кэширование браузера рычаги Отказ Опять же, вы можете включить его, модифицируя файлы конфигурации вашего сервера ( Включение кэширования браузера плеча ).
Резюме
Когда дело доходит до веб-сайтов и приложений Frontend, производительность – огромная тема, и мы должны серьезно относиться к ней.
Я надеюсь, что эта статья помогла вам понять и позволить вам решить некоторые из самых важных вещей, которые нам нужно позаботиться о том, когда мы хотим улучшить производительность приложения.
Для подробного контрольного списка убедитесь, что вы проверили Фронт-спектакль-контрольный список Отказ
Ваше здоровье! ?
Оригинал: “https://www.freecodecamp.org/news/how-to-boost-your-front-end-applications-performance-72ce872b08c/”