[Разработка веб-сайтов, Анализ и проектирование систем] Шесть принципов создания производительных веб-приложений (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
С момента появления интернета веб-разработка прошла очень длинный путь. Это было удивительное путешествие от модемов до оптоволоконных схем. С ростом скорости передачи данных пользователи стали нетерпеливы. Люди ожидают, что их повседневные задачи будут решены здесь и сейчас. Это привело к необходимости создавать сайты, которые работают быстро и без задержек.Но есть большая проблема, которую мы, как разработчики, должны как-то решать: мы не можем контролировать конфигурацию устройств, с которых пользователи обращаются к нашим сайтам. Это могут быть как мощные, так и слабые машины, с быстрым или медленным подключением к интернету. Поэтому мы должны как можно лучше оптимизировать свои сайты, чтобы они удовлетворяли требованиям любых пользователей.Веб-разработчики выработали несколько принципов создания сайтов, которые быстро работают даже на самых слабых устройствах. Здесь описаны некоторые из этих принципов. Подчеркну, что они размещены в произвольном порядке.И последнее: чтобы сохранять баланс между оптимизацией и своевременной поставкой функционала, всегда делитесь и переиспользуйте свой код, точнее — компоненты. Это можно делать с любым репозиторием безо всякой специальной подготовки, достаточно лишь воспользоваться инструментом вроде Bit (Github).Сжатие изображение с помощью современных форматовВ наши дни изображения и видео стали высокого качества и прекрасно доставляются. Но главной проблемой является размер файлов. Согласно Jecelyn, в среднем веб-страница состоит из 5 Мб одних только изображений. В некоторых странах это может быть очень дорого для пользователя, особенно при использовании мобильного интернета. К тому же большой объём данных может приводить к проблемам со скоростью загрузки сайта, особенно при низкой скорости подключения. Всё это негативно влияет на ваш сайт.WebPWebP — современный графический формат, позволяющий хранить изображения как с потерей качества, так и без потерь, ещё больше уменьшая размер файлов. Он разработан в Google. В последнее время формат набирает популярность, особенно среди крупных технологических компаний, в основном благодаря своей эффективности и поддержке со стороны Google. WebP напрямую конкурирует с форматами вроде JPG и PNG.Достоинства:
- Размер WebP-изображений без потери качества на 26 % меньше PNG.
- Размер WebP-изображений с потерей качества на 25–34 % меньше JPEG при эквивалентном качестве SSIM.
- WebP без потерь также поддерживает прозрачность.
Сравнение WebP без потери качества и PNG. Источник:InsaleLab.Здесь вы можете подробнее почитать о WebP и других новых форматах.Кешируйте по возможностиВеб-кеширование — это ключевая архитектурная возможность HTTP-протокола, предназначенная для снижения сетевого трафика с одновременным улучшением предполагаемой отзывчивости системы в целом. Кеши есть на всех стадиях пути данных от сервера к браузеру.Простыми словами, веб-кеширование позволяет повторно использовать HTTP-ответы, сохранённые в кеше, для однотипных HTTP-запросов.В жизни мы не можем внедрять агрессивное кеширование, поскольку кеши наверняка будут чаще всего возвращать устаревшие данные. Поэтому для сохранения баланса между долговременным кешированием и реагированием на потребности меняющегося сайта необходимо применять собственную политику кеширования, внедряя подходящие алгоритмы очистки кеша. Поскольку каждая система уникальна и обладает своим набором требований, нужно потратить достаточное количество времени на создание политик кеширования.Чтобы добиться идеальной политики кеширования, необходимо найти тонкую грань между использованием агрессивного кеширования, и возможностью сбрасывать конкретные записи при изменениях.Здесь вы можете больше узнать об основах кэширования.Подходящая стратегия загрузки содержимогоБывают сайты, на которых отображается контент огромных объёмов. Например, изображения в высоком разрешении, большая коллекция аудиозаписей и т.д. Большой размер файлов может сильно повлиять на длительность загрузки страницы. Но ваши пользователи не заходят ждать, пока всё загрузится. Стратегия под названием «ленивая загрузка» поможет снизить объём первично загружаемых данных, а также ускорить загрузку страницы, не уменьшая содержимое. Методика подразумевает откладывание загрузки некритичной информации при загрузке самой страницы, это делается позже, по мере необходимости.Но бывают и ситуации, когда может потребоваться заранее загрузить содержимое. В этом случае можно прибегнуть к «жадной загрузке». Есть ещё предварительная загрузка, при которой содержимое грузится после первичной загрузки страницы. Не существует одного идеального подхода для всех сайтов. Вам придётся проанализировать и выбрать стратегию наиболее подходящую под ваши требования.Здесь вы можете подробнее почитать о стратегиях загрузки.Оптимизация алгоритмовНет смысла делать стабильно работающее веб-приложение, если оно долго выполняет свои задачи. Могут возникать ситуации, когда серверу приходится обрабатывать тяжёлые задачи, на которые тратится значительное время. Очевидно, что пользователям не понравится ждать завершения этого процесса.Ускорить вычисления можно двумя способами. Во-первых, масштабируя и расширяя архитектуру, чтобы она могла быстрее обрабатывать такие задачи. Но этот подход значительно повышает расходы на эксплуатацию серверов. Во-вторых, вы можете оптимизировать алгоритмы. Этим нужно заняться до масштабирования архитектуры. Оптимизированные алгоритмы могут значительно ускорить обработку, а значит и ускорить отклик системы.Но помните, что оптимизации должны быть тщательно продуманы. Вам придётся проанализировать имеющееся решение и понять, можно ли его усовершенствовать. Это потребует времени и терпения.Правильная архитектура APIЭффективный API — один из ключевых факторов универсального веб-приложения. Одна из главных ошибок неопытных разработчиков заключается в том, что они начинают проектировать API, не понимая его концепции. Вы обязаны разбираться в преимуществах и компромиссах разных архитектур, а также понимать последствия применения стилистических ограничений в создаваемом продукте.Очевидно, что не бывает универсальной архитектуры, способной решить любые проблемы. Разным продуктам требуются разные схемы, удовлетворяющие бизнес-целям и требованиям.Сегодня одной из самых популярных тем является GraphQL. Вам всегда найдут аргументы в пользу GraphQL и REST. Очень рекомендую почитать эту статью, чтобы лучше разобраться в проектировании API. Асинхронные скриптыВы можете грузить скрипты синхронно или асинхронно. В первом случае загрузка страницы может замедлиться. Если хотя бы с одним файлом возникнет проблема или он будет долго грузиться, то система не запустится и будет ждать завершения. Браузер остановит отрисовку страницы в ожидании завершения исполнения JavaScript-кода. Такой подход чреват задержками при загрузке сайта.А при асинхронной загрузке, даже если какой-то один файл будет загружаться долго, остальные продолжат загружаться приложением. Параллельная загрузка скриптов сильно ускоряет загрузку приложения, и проблемы с отдельными скриптами не влияют на исполнение всех остальных скриптов.Здесь можно почитать об этом подробнее.Заключение: одно улучшение не ускорит ваш сайтВам не хватит одной оптимизации, чтобы обеспечить нужную скорость загрузки сайта. Придётся позаботиться обо всех аспектах вашего веб-приложения, чтобы добиться нужного прироста производительности. И это может быть связано со всем, что находится между сервером и браузером.Представьте несколько порезов на теле, через которые вы теряете кровь. Нужно найти и перевязать все порезы, чтобы полностью остановить кровопотерю. Ваше тело сможет залечить несколько порезов, но если их слишком много, то выжить будет затруднительно. Так и с веб-приложением: чтобы легко достичь бизнес-целей, вам придётся удерживать на минимальном уровне все эти «утечки производительности».
===========
Источник:
habr.com
===========
===========
Автор оригинала: Mahdhi Rezvi
===========Похожие новости:
- [Разработка веб-сайтов, Open source, Angular] Angular: Показываем скелетон страницы за три шага
- [Разработка веб-сайтов, Python, Django] Новое тестирование фичей в Django 3.2 (перевод)
- [Разработка веб-сайтов, Разработка мобильных приложений] 10 инструментов для разработки, которые вам стоит попробовать (перевод)
- [Информационная безопасность, Разработка веб-сайтов, Google Chrome, Браузеры] Разработчики Chrome внедряют принудительное открытие сайтов через HTTPS
- [Анализ и проектирование систем, Работа с 3D-графикой, CAD/CAM, IT-компании] Третий день 3DEXPIRIENCE World 2021: как это было
- [Анализ и проектирование систем, Учебный процесс в IT] Пример модели знаний о требованиях
- [Анализ и проектирование систем, Интерфейсы] Нужна ли России своя операционная система и другое ПО?
- [Программирование, Анализ и проектирование систем, Проектирование и рефакторинг] Эффективная конструкция агрегатов. Понимание через исследование (перевод)
- [Анализ и проектирование систем, Управление проектами, Дизайн, Инженерные системы] Архитектура архитектуры архитектора
- [SaaS / S+S, Карьера в IT-индустрии] Почему технические собеседования в России до сих пор оторваны от реальной жизни?
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_analiz_i_proektirovanie_sistem (Анализ и проектирование систем), #_vebrazrabotka (веб-разработка), #_blog_kompanii_domklik (
Блог компании ДомКлик
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_analiz_i_proektirovanie_sistem (
Анализ и проектирование систем
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:59
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 С момента появления интернета веб-разработка прошла очень длинный путь. Это было удивительное путешествие от модемов до оптоволоконных схем. С ростом скорости передачи данных пользователи стали нетерпеливы. Люди ожидают, что их повседневные задачи будут решены здесь и сейчас. Это привело к необходимости создавать сайты, которые работают быстро и без задержек.Но есть большая проблема, которую мы, как разработчики, должны как-то решать: мы не можем контролировать конфигурацию устройств, с которых пользователи обращаются к нашим сайтам. Это могут быть как мощные, так и слабые машины, с быстрым или медленным подключением к интернету. Поэтому мы должны как можно лучше оптимизировать свои сайты, чтобы они удовлетворяли требованиям любых пользователей.Веб-разработчики выработали несколько принципов создания сайтов, которые быстро работают даже на самых слабых устройствах. Здесь описаны некоторые из этих принципов. Подчеркну, что они размещены в произвольном порядке.И последнее: чтобы сохранять баланс между оптимизацией и своевременной поставкой функционала, всегда делитесь и переиспользуйте свой код, точнее — компоненты. Это можно делать с любым репозиторием безо всякой специальной подготовки, достаточно лишь воспользоваться инструментом вроде Bit (Github).Сжатие изображение с помощью современных форматовВ наши дни изображения и видео стали высокого качества и прекрасно доставляются. Но главной проблемой является размер файлов. Согласно Jecelyn, в среднем веб-страница состоит из 5 Мб одних только изображений. В некоторых странах это может быть очень дорого для пользователя, особенно при использовании мобильного интернета. К тому же большой объём данных может приводить к проблемам со скоростью загрузки сайта, особенно при низкой скорости подключения. Всё это негативно влияет на ваш сайт.WebPWebP — современный графический формат, позволяющий хранить изображения как с потерей качества, так и без потерь, ещё больше уменьшая размер файлов. Он разработан в Google. В последнее время формат набирает популярность, особенно среди крупных технологических компаний, в основном благодаря своей эффективности и поддержке со стороны Google. WebP напрямую конкурирует с форматами вроде JPG и PNG.Достоинства:
 Сравнение WebP без потери качества и PNG. Источник:InsaleLab.Здесь вы можете подробнее почитать о WebP и других новых форматах.Кешируйте по возможностиВеб-кеширование — это ключевая архитектурная возможность HTTP-протокола, предназначенная для снижения сетевого трафика с одновременным улучшением предполагаемой отзывчивости системы в целом. Кеши есть на всех стадиях пути данных от сервера к браузеру.Простыми словами, веб-кеширование позволяет повторно использовать HTTP-ответы, сохранённые в кеше, для однотипных HTTP-запросов.В жизни мы не можем внедрять агрессивное кеширование, поскольку кеши наверняка будут чаще всего возвращать устаревшие данные. Поэтому для сохранения баланса между долговременным кешированием и реагированием на потребности меняющегося сайта необходимо применять собственную политику кеширования, внедряя подходящие алгоритмы очистки кеша. Поскольку каждая система уникальна и обладает своим набором требований, нужно потратить достаточное количество времени на создание политик кеширования.Чтобы добиться идеальной политики кеширования, необходимо найти тонкую грань между использованием агрессивного кеширования, и возможностью сбрасывать конкретные записи при изменениях.Здесь вы можете больше узнать об основах кэширования.Подходящая стратегия загрузки содержимогоБывают сайты, на которых отображается контент огромных объёмов. Например, изображения в высоком разрешении, большая коллекция аудиозаписей и т.д. Большой размер файлов может сильно повлиять на длительность загрузки страницы. Но ваши пользователи не заходят ждать, пока всё загрузится. Стратегия под названием «ленивая загрузка» поможет снизить объём первично загружаемых данных, а также ускорить загрузку страницы, не уменьшая содержимое. Методика подразумевает откладывание загрузки некритичной информации при загрузке самой страницы, это делается позже, по мере необходимости.Но бывают и ситуации, когда может потребоваться заранее загрузить содержимое. В этом случае можно прибегнуть к «жадной загрузке». Есть ещё предварительная загрузка, при которой содержимое грузится после первичной загрузки страницы. Не существует одного идеального подхода для всех сайтов. Вам придётся проанализировать и выбрать стратегию наиболее подходящую под ваши требования.Здесь вы можете подробнее почитать о стратегиях загрузки.Оптимизация алгоритмовНет смысла делать стабильно работающее веб-приложение, если оно долго выполняет свои задачи. Могут возникать ситуации, когда серверу приходится обрабатывать тяжёлые задачи, на которые тратится значительное время. Очевидно, что пользователям не понравится ждать завершения этого процесса.Ускорить вычисления можно двумя способами. Во-первых, масштабируя и расширяя архитектуру, чтобы она могла быстрее обрабатывать такие задачи. Но этот подход значительно повышает расходы на эксплуатацию серверов. Во-вторых, вы можете оптимизировать алгоритмы. Этим нужно заняться до масштабирования архитектуры. Оптимизированные алгоритмы могут значительно ускорить обработку, а значит и ускорить отклик системы.Но помните, что оптимизации должны быть тщательно продуманы. Вам придётся проанализировать имеющееся решение и понять, можно ли его усовершенствовать. Это потребует времени и терпения.Правильная архитектура APIЭффективный API — один из ключевых факторов универсального веб-приложения. Одна из главных ошибок неопытных разработчиков заключается в том, что они начинают проектировать API, не понимая его концепции. Вы обязаны разбираться в преимуществах и компромиссах разных архитектур, а также понимать последствия применения стилистических ограничений в создаваемом продукте.Очевидно, что не бывает универсальной архитектуры, способной решить любые проблемы. Разным продуктам требуются разные схемы, удовлетворяющие бизнес-целям и требованиям.Сегодня одной из самых популярных тем является GraphQL. Вам всегда найдут аргументы в пользу GraphQL и REST. Очень рекомендую почитать эту статью, чтобы лучше разобраться в проектировании API. Асинхронные скриптыВы можете грузить скрипты синхронно или асинхронно. В первом случае загрузка страницы может замедлиться. Если хотя бы с одним файлом возникнет проблема или он будет долго грузиться, то система не запустится и будет ждать завершения. Браузер остановит отрисовку страницы в ожидании завершения исполнения JavaScript-кода. Такой подход чреват задержками при загрузке сайта.А при асинхронной загрузке, даже если какой-то один файл будет загружаться долго, остальные продолжат загружаться приложением. Параллельная загрузка скриптов сильно ускоряет загрузку приложения, и проблемы с отдельными скриптами не влияют на исполнение всех остальных скриптов.Здесь можно почитать об этом подробнее.Заключение: одно улучшение не ускорит ваш сайтВам не хватит одной оптимизации, чтобы обеспечить нужную скорость загрузки сайта. Придётся позаботиться обо всех аспектах вашего веб-приложения, чтобы добиться нужного прироста производительности. И это может быть связано со всем, что находится между сервером и браузером.Представьте несколько порезов на теле, через которые вы теряете кровь. Нужно найти и перевязать все порезы, чтобы полностью остановить кровопотерю. Ваше тело сможет залечить несколько порезов, но если их слишком много, то выжить будет затруднительно. Так и с веб-приложением: чтобы легко достичь бизнес-целей, вам придётся удерживать на минимальном уровне все эти «утечки производительности». =========== Источник: habr.com =========== =========== Автор оригинала: Mahdhi Rezvi ===========Похожие новости:
Блог компании ДомКлик ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ), #_analiz_i_proektirovanie_sistem ( Анализ и проектирование систем ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:59
Часовой пояс: UTC + 5