💡 Оптимизируйте изображения
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
▍Сохраняйте изображения в правильных размерах
Еще один способ уменьшить время доставки картинок и улучшить производительность сайта — использовать адаптивные изображения. На смартфоны и планшеты приходится больше половины всего веб-трафика. Подгонка размеров под разрешения популярных устройств и подача их при помощи srcset позволит еще больше оптимизировать время загрузки фронтенда.
Однако выбор подходящего формата и размеров изображений — не единственное, что можно сделать. Вы можете:
— сжимать изображения
— использовать progressive JPEG
— показывать пользователям с медленным интернетом
— картинки поменьше
— использовать HTTP/2 вместо HTTP/1.1
— использовать image-set.
WebDEV #советы #web
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
▍Сохраняйте изображения в правильных размерах
Еще один способ уменьшить время доставки картинок и улучшить производительность сайта — использовать адаптивные изображения. На смартфоны и планшеты приходится больше половины всего веб-трафика. Подгонка размеров под разрешения популярных устройств и подача их при помощи srcset позволит еще больше оптимизировать время загрузки фронтенда.
Однако выбор подходящего формата и размеров изображений — не единственное, что можно сделать. Вы можете:
— сжимать изображения
— использовать progressive JPEG
— показывать пользователям с медленным интернетом
— картинки поменьше
— использовать HTTP/2 вместо HTTP/1.1
— использовать image-set.
WebDEV #советы #web
📖 The Design of Web APIs
🖋 Arnaud Lauret, 2019
Хорошо спроектированные API приносят удовольствие при использовании. Плохо спроектированные API-интерфейсы громоздки, часто сбивают с толку и разочаровывают. The Design of Web APIs - это практическое руководство по созданию необычных API. Автор демонстрирует принципы и методы проектирования, которые можно применять как в общедоступных, так и в частных веб-API.
💾 Скачать книгу
WebDEV #book #web
🖋 Arnaud Lauret, 2019
Хорошо спроектированные API приносят удовольствие при использовании. Плохо спроектированные API-интерфейсы громоздки, часто сбивают с толку и разочаровывают. The Design of Web APIs - это практическое руководство по созданию необычных API. Автор демонстрирует принципы и методы проектирования, которые можно применять как в общедоступных, так и в частных веб-API.
💾 Скачать книгу
WebDEV #book #web
🛠 Compressor можно использовать для оптимизации изображений, снятых на телефон или на зеркальную камеру. Обычно их размеры превышают 1 Мб, что для веб-применений слишком много. Этот инструмент позволяет хорошо сжимать изображения, уделяя внимание не только их размерам, но и качеству.
WebDEV #инструменты #web
WebDEV #инструменты #web
💡 Применяйте ленивую загрузку
Lazy loading помогает ускорить загрузку фронтенда. При ленивой загрузке на странице сперва загружается только необходимый контент, а остальное подгружается по мере того, как у пользователя возникает в этом необходимость.
Например, когда вы делаете поиск по изображениям в Google, сперва загружается только маленький набор картинок. Для недостающего контента загружаются плейсхолдеры. Это уменьшает время загрузки. Настоящий контент рендерится только когда пользователь начинает прокручивать страницу внизу.
Помимо плейсхолдеров, можно использовать эффект размытия и нативную ленивую загрузку.
WebDEV #советы #web
Lazy loading помогает ускорить загрузку фронтенда. При ленивой загрузке на странице сперва загружается только необходимый контент, а остальное подгружается по мере того, как у пользователя возникает в этом необходимость.
Например, когда вы делаете поиск по изображениям в Google, сперва загружается только маленький набор картинок. Для недостающего контента загружаются плейсхолдеры. Это уменьшает время загрузки. Настоящий контент рендерится только когда пользователь начинает прокручивать страницу внизу.
Помимо плейсхолдеров, можно использовать эффект размытия и нативную ленивую загрузку.
WebDEV #советы #web
🔥 Лучшее на канале за неделю
1. The Design of Web APIs.
2. Compressor можно использовать для оптимизации изображений, снятых на телефон или на зеркальную камеру.
3. Применяйте ленивую загрузку.
1. The Design of Web APIs.
2. Compressor можно использовать для оптимизации изображений, снятых на телефон или на зеркальную камеру.
3. Применяйте ленивую загрузку.
📑 Ответ
Anonymous Quiz
70%
getComputedStyle()
18%
style()
9%
getBoundingClientRect()
2%
defaultView()
💡 Кэширование
При каждом уникальном посещении веб-страницы должно загружаться всё, от HTML до JavaScript. Из-за этого скорость загрузки снижается.
Лучший способ бороться с этой проблемой — использовать кэширование. При должной настройке браузеры сохраняют файлы в своем локальном кэше и не загружают их заново при повторном посещении страницы.
Но помимо кэша браузеров есть и другие варианты:
— Кэш-сервер. Запрос пользователя отправляется на ближайший кэширующий сервер из набора подобных серверов.
— Кэширование в памяти. Некоторые части данных (например, переменные JavaScript) сохраняются в памяти и не загружаются повторно.
— Кэш страницы. Похоже на кэширование в памяти, но для хранения данных используется файловое хранилище, обычно управляемое браузером.
WebDEV #советы #web
При каждом уникальном посещении веб-страницы должно загружаться всё, от HTML до JavaScript. Из-за этого скорость загрузки снижается.
Лучший способ бороться с этой проблемой — использовать кэширование. При должной настройке браузеры сохраняют файлы в своем локальном кэше и не загружают их заново при повторном посещении страницы.
Но помимо кэша браузеров есть и другие варианты:
— Кэш-сервер. Запрос пользователя отправляется на ближайший кэширующий сервер из набора подобных серверов.
— Кэширование в памяти. Некоторые части данных (например, переменные JavaScript) сохраняются в памяти и не загружаются повторно.
— Кэш страницы. Похоже на кэширование в памяти, но для хранения данных используется файловое хранилище, обычно управляемое браузером.
WebDEV #советы #web
CSS Flexbox. Полный курс
В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.
📺 YouTube
WebDEV #видео #css
В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.
📺 YouTube
WebDEV #видео #css
YouTube
CSS Flexbox. Полный курс
#YauhenK #webDev #CSS #Flexbox
В данном видеокурсе мы с вами рассмотрим технологию Flexbox.
Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль…
В данном видеокурсе мы с вами рассмотрим технологию Flexbox.
Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль…
🛠 DrawKit помогает находить бесплатные векторные изображения для ваших проектов. Это — качественные, профессиональные рисунки, которые можно использовать на сайтах без ссылки на их источник.
WebDEV #инструменты #web
WebDEV #инструменты #web
💡 Используйте префетчинг
Предварительная выборка ресурсов (prefetching) — еще один способ улучшения производительности и оптимизации загрузки данных фронтенда.
Вы, разработчик, знаете свое приложение лучше, чем какой-то браузер. Префетчинг использует эту информацию, чтобы подсказывать браузеру, какие ресурсы могут понадобиться в будущем.
При предварительной выборке ресурс загружается заранее, до того, как в нем возникает необходимость, чтобы уменьшить время ожидания этого ресурса.
Есть три основных вида префетчинга. Самый популярный и широко используемый — префетчинг ссылок. Но DNS-префетчинг и предварительный рендеринг тоже весьма полезны.
WebDEV #советы #web
Предварительная выборка ресурсов (prefetching) — еще один способ улучшения производительности и оптимизации загрузки данных фронтенда.
Вы, разработчик, знаете свое приложение лучше, чем какой-то браузер. Префетчинг использует эту информацию, чтобы подсказывать браузеру, какие ресурсы могут понадобиться в будущем.
При предварительной выборке ресурс загружается заранее, до того, как в нем возникает необходимость, чтобы уменьшить время ожидания этого ресурса.
Есть три основных вида префетчинга. Самый популярный и широко используемый — префетчинг ссылок. Но DNS-префетчинг и предварительный рендеринг тоже весьма полезны.
WebDEV #советы #web
Кодинг — умер. Пора переходить на простые способы обучения.
Обучиться программировать сейчас нереально — ютуберы затирают про создание телеграм-ботов, курсы учат проё*ывать деньги.
Оглянитесь вокруг: джуны поголовно учат айти по картинкам. Они запоминаются в разы лучше, чем пресловутые статейки и часовые видео.
Вы тоже можете стать частью этого тренда. Достаточно читать канал Гайды программиста.
Там найдёте полезные гайды по программированию на любую тему: Python, JS, C++, хакинг, подборки книг. И всё это в картинках.
Короче, держите и изучайте, потом себе спасибо скажете: @it_guides
Обучиться программировать сейчас нереально — ютуберы затирают про создание телеграм-ботов, курсы учат проё*ывать деньги.
Оглянитесь вокруг: джуны поголовно учат айти по картинкам. Они запоминаются в разы лучше, чем пресловутые статейки и часовые видео.
Вы тоже можете стать частью этого тренда. Достаточно читать канал Гайды программиста.
Там найдёте полезные гайды по программированию на любую тему: Python, JS, C++, хакинг, подборки книг. И всё это в картинках.
Короче, держите и изучайте, потом себе спасибо скажете: @it_guides
💡 Подборка советов по уменьшению времени загрузки сайта
▫️ Минимизируйте ресурсы
▫️ Уменьшайте число вызовов сервера
▫️ Удаляйте ненужные пользовательские шрифты
▫️ Сжимайте файлы
▫️ Оптимизируйте изображения
▫️ Применяйте ленивую загрузку
▫️ Кэширование
▫️ Используйте префетчинг
WebDEV #подборка #советы
▫️ Минимизируйте ресурсы
▫️ Уменьшайте число вызовов сервера
▫️ Удаляйте ненужные пользовательские шрифты
▫️ Сжимайте файлы
▫️ Оптимизируйте изображения
▫️ Применяйте ленивую загрузку
▫️ Кэширование
▫️ Используйте префетчинг
WebDEV #подборка #советы
🔥 Лучшее на канале за неделю
1. CSS Flexbox. Полный курс.
2. DrawKit помогает находить бесплатные векторные изображения для ваших проектов.
3. Используйте префетчинг.
1. CSS Flexbox. Полный курс.
2. DrawKit помогает находить бесплатные векторные изображения для ваших проектов.
3. Используйте префетчинг.
💡 Используйте префетчинг
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
Предварительная выборка ссылок
Link prefetching позволяет браузеру собрать ресурсы, которые, вероятно, понадобятся пользователю в ближайшем будущем. То есть разработчики могут предположить, в каком месте пользователю может захотеться посетить конкретную веб-страницу.
Однако предварительная выборка ссылок работает только с кэшируемыми ресурсами, такими как изображения и JavaScript.
Предварительная выборка DNS
Когда пользователь запрашивает контент, который хостится по определенному IP-адресу, в DNS осуществляется поиск доменного имени, которому принадлежит адрес.
DNS Prefetching позволяет браузеру заранее провести поиск в DNS по ссылкам, которые есть на странице, просматриваемой пользователем. Таким образом, когда пользователь кликнет на какую-то из этих ссылок, ему не придется ждать поиска в DNS.
WebDEV #советы #web
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
Предварительная выборка ссылок
Link prefetching позволяет браузеру собрать ресурсы, которые, вероятно, понадобятся пользователю в ближайшем будущем. То есть разработчики могут предположить, в каком месте пользователю может захотеться посетить конкретную веб-страницу.
Однако предварительная выборка ссылок работает только с кэшируемыми ресурсами, такими как изображения и JavaScript.
Предварительная выборка DNS
Когда пользователь запрашивает контент, который хостится по определенному IP-адресу, в DNS осуществляется поиск доменного имени, которому принадлежит адрес.
DNS Prefetching позволяет браузеру заранее провести поиск в DNS по ссылкам, которые есть на странице, просматриваемой пользователем. Таким образом, когда пользователь кликнет на какую-то из этих ссылок, ему не придется ждать поиска в DNS.
WebDEV #советы #web
📖 Modern CSS: Master the Key Concepts of CSS for Modern Web Development
🖋 Joe Attardi, 2020
Книга представляет из себя учебник по каскадным таблицам стилей. Вы начнете с самых основ CSS: блочной модели, цветов и селекторов. Затем постепенно перейдете к более продвинутым темам - стилизация текста, позиционирование, Z-индекс и наложение, градиенты, границы, и ближе к концу книги к самым сложным элементам, таким как преобразования, переходы, анимация, flexbox и CSS grid. Некоторые фичи из книги доступны только в современных браузерах (Chrome, Edge, Safari и Firefox), поэтому автор упоминает о совместимости с IE11 везде, где необходимо.
💾 Скачать книгу
WebDEV #book #css
🖋 Joe Attardi, 2020
Книга представляет из себя учебник по каскадным таблицам стилей. Вы начнете с самых основ CSS: блочной модели, цветов и селекторов. Затем постепенно перейдете к более продвинутым темам - стилизация текста, позиционирование, Z-индекс и наложение, градиенты, границы, и ближе к концу книги к самым сложным элементам, таким как преобразования, переходы, анимация, flexbox и CSS grid. Некоторые фичи из книги доступны только в современных браузерах (Chrome, Edge, Safari и Firefox), поэтому автор упоминает о совместимости с IE11 везде, где необходимо.
💾 Скачать книгу
WebDEV #book #css
🛠 CSS Scan сильно упрощает просмотр ваших любимых веб-сайтов. Наведите курсор на любой элемент и мгновенно получите его CSS, цвета, ресурсы, анимацию, шрифт и размеры. Скопируйте, экспортируйте или доработайте их с помощью интуитивно понятного редактора CSS.
WebDEV #инструменты #css
WebDEV #инструменты #css