Gatsby
Фреймворк, построенный на базе React. Позволяет создавать очень быстрые сайты. Очень удобен в разработке и поддержке проекта. Появился в 2015 году, получил высокие оценки профессионалов и инвестиции в 35 миллионов долларов.
Предназначение: любые проекты.
Результаты исследования 200 сайтов: сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby
В значениях LCP
Это замедление трафика, который показывает, как поведет себя сайт на разной скорости интернета. В значениях DOMContentLoaded
Сайты Gatsby js работают быстро, потому что они используют технику, называемую «генерация статических сайтов». Это означает, что при создании сайта все HTML, CSS и JavaScript генерируются заранее и готовы к предоставлению пользователю без необходимости дополнительной обработки на стороне сервера. Это устраняет необходимость в запросах к базе данных или сложной логике на стороне сервера, что приводит к ускорению загрузки страниц. Также Gatsby использует такие методы, как разделение кода, ленивая загрузка, кэширование, webP изображения и предварительная выборка для дальнейшего повышения производительности.
Предварительная выборка (pre-fetching) – это техника, которая используется для повышения производительности сайта или приложения. Она заключается в предварительной загрузке контента или данных, которые вероятно будут запрошены в будущем. Это происходит в фоновом режиме после основной загрузки страницы. Gatsby видит какие страницы может посетить пользователь на текущей странице и загружает данные, которые могу потребоваться если он будет переходить на них. Предварительная выборка может существенно улучшить пользовательский опыт и увеличить скорость загрузки сайта.
WebP – это формат изображения, разработанный компанией Google. Он был создан с целью улучшения качества изображений при меньшем размере файла, чем у традиционных форматов, таких как JPEG и PNG. Он экономнее на 25%-34%. На данный момент он поддерживается уже всеми браузерами.
Разделение кода (code splitting) – это техника в разработке программного обеспечения, при которой основной код приложения разделяется на меньшие, отдельные части или блоки. Это позволяет загружать приложение только с необходимым кодом для конкретной страницы или функции, а не загружать вcю кодовую базу сразу. Это приводит к улучшению производительности, поскольку приложение загружает только необходимый код для действий текущего пользователя. Разделение кода также помогает лучше организовать и поддерживать код, поскольку каждый блок кода может быть разработан, протестирован и обновлен независимо.
Наша компания разрабатывает сайты на Gatsby