📑 Ответ
Anonymous Quiz
10%
pending
25%
fulfilled
44%
successful
5%
rejected
16%
Все вышеперечисленное есть
💡 Удаляйте ненужные пользовательские шрифты
▍Часть 1
Пользовательские шрифты весьма популярны, ведь они придают сайту индивидуальность. Но их применение сказывается на производительности.
Пользовательские шрифты могут быть довольно большими по размеру, а веб-шрифты, например, от Google, добавляют HTTP-запросы ко внешним ресурсам. Это снижает скорость рендеринга страницы.
▍Поэтому, работая со шрифтами на сайте:
— Конвертируйте шрифты в наиболее эффективный формат. Шрифты в современном формате, например WOFF2, могут быть приблизительно на 30% меньше по размеру, чем в других форматах.
Продолжение следует...
WebDEV #советы #web
▍Часть 1
Пользовательские шрифты весьма популярны, ведь они придают сайту индивидуальность. Но их применение сказывается на производительности.
Пользовательские шрифты могут быть довольно большими по размеру, а веб-шрифты, например, от Google, добавляют HTTP-запросы ко внешним ресурсам. Это снижает скорость рендеринга страницы.
▍Поэтому, работая со шрифтами на сайте:
— Конвертируйте шрифты в наиболее эффективный формат. Шрифты в современном формате, например WOFF2, могут быть приблизительно на 30% меньше по размеру, чем в других форматах.
Продолжение следует...
WebDEV #советы #web
📖 Vue on Rails
🖋 Bryan Lim, Richard LaFranchi, 2019
Создавайте современные и прогрессивные веб-приложения с помощью Vue.js и Ruby on Rails. Поскольку сообщество Rails принимает JavaScript, эта книга отвечает на ваши самые насущные вопросы, в том числе о том, как интегрировать интерфейсные технологии с Rails, нужно ли создавать одностраничное приложение, когда и как использовать JavaScript в вашем проекте, как создать основу для Vue. компонент в Rails и как настроить Vue.js в проекте Rails.
💾 Скачать книгу
WebDEV #book #vue #js
🖋 Bryan Lim, Richard LaFranchi, 2019
Создавайте современные и прогрессивные веб-приложения с помощью Vue.js и Ruby on Rails. Поскольку сообщество Rails принимает JavaScript, эта книга отвечает на ваши самые насущные вопросы, в том числе о том, как интегрировать интерфейсные технологии с Rails, нужно ли создавать одностраничное приложение, когда и как использовать JavaScript в вашем проекте, как создать основу для Vue. компонент в Rails и как настроить Vue.js в проекте Rails.
💾 Скачать книгу
WebDEV #book #vue #js
🛠 GTMetrix позволяет узнавать о том, что замедляет ваши веб-проекты. А узнав об этом, их можно исправить, ускорить, улучшить эффективность их работы. Иногда проблемы сайтов связаны с серверами, иногда — со слишком большими изображениями, иногда — с кодом. GTMetrix позволяет выявлять и эти, и многие другие проблемы сайтов.
WebDEV #инструменты #web
WebDEV #инструменты #web
💡 Удаляйте ненужные пользовательские шрифты
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
▍Работая со шрифтами на сайте:
— Делайте поднаборы шрифтов, чтобы удалить ненужные символы. Файлы шрифтов содержат символы для многих языков. Некоторые из них могут вообще никогда на вашем сайте не использоваться. Делая поднаборы шрифтов, мы можем удалить ненужные символы. Останутся лишь те, которые действительно необходимы для отображения контента сайта.
— Делайте предварительную загрузку шрифтов, которые явно требуются на странице.
Использование парочки пользовательских шрифтов может не нанести ощутимого вреда. Но если они используются очень широко, это непременно скажется на скорости загрузки фронтенда. Поэтому стоит еще раз оценить плюсы и минусы использования пользовательских шрифтов на своем сайте.
WebDEV #советы #web
▍Часть 2
Перед прочтением рекомендуем ознакомиться с первой частью.
▍Работая со шрифтами на сайте:
— Делайте поднаборы шрифтов, чтобы удалить ненужные символы. Файлы шрифтов содержат символы для многих языков. Некоторые из них могут вообще никогда на вашем сайте не использоваться. Делая поднаборы шрифтов, мы можем удалить ненужные символы. Останутся лишь те, которые действительно необходимы для отображения контента сайта.
— Делайте предварительную загрузку шрифтов, которые явно требуются на странице.
Использование парочки пользовательских шрифтов может не нанести ощутимого вреда. Но если они используются очень широко, это непременно скажется на скорости загрузки фронтенда. Поэтому стоит еще раз оценить плюсы и минусы использования пользовательских шрифтов на своем сайте.
WebDEV #советы #web
🔥 Лучшее на канале за неделю
1. Vue on Rails.
2. GTMetrix позволяет узнавать о том, что замедляет ваши веб-проекты.
3. Удаляйте ненужные пользовательские шрифты.
1. Vue on Rails.
2. GTMetrix позволяет узнавать о том, что замедляет ваши веб-проекты.
3. Удаляйте ненужные пользовательские шрифты.
💡 Сжимайте файлы
Чем больше размер файла, тем дольше происходит его загрузка. А современные сайты часто содержат большие пакеты HTML, CSS и JavaScript.
Сжимая эти файлы подходящим способом, вы можете легко улучшить время загрузки фронтенда. По части сжатия файлов есть два хороших варианта:
● Gzip. Самый популярный метод сжатия и распаковки данных. В настоящее время поддерживается всеми современными браузерами. Gzip сжимает пакеты HTML, CSS и JavaScript на сервере, еще до отправки их браузеру. А на стороне клиента происходит распаковка файлов и доставка контента.
● Brotli. Наилучший уровень сжатия по сравнению с другими доступными вариантами. Согласно исследованию CertSimple, файлы JavaScript, сжатые при помощи Brotli, на 14% меньше файлов, сжатых Gzip. В файлы HTML и CSS сжимаются лучше, чем с использованием Gzip, на 21% и 17% соответственно.
WebDEV #советы #web
Чем больше размер файла, тем дольше происходит его загрузка. А современные сайты часто содержат большие пакеты HTML, CSS и JavaScript.
Сжимая эти файлы подходящим способом, вы можете легко улучшить время загрузки фронтенда. По части сжатия файлов есть два хороших варианта:
● Gzip. Самый популярный метод сжатия и распаковки данных. В настоящее время поддерживается всеми современными браузерами. Gzip сжимает пакеты HTML, CSS и JavaScript на сервере, еще до отправки их браузеру. А на стороне клиента происходит распаковка файлов и доставка контента.
● Brotli. Наилучший уровень сжатия по сравнению с другими доступными вариантами. Согласно исследованию CertSimple, файлы JavaScript, сжатые при помощи Brotli, на 14% меньше файлов, сжатых Gzip. В файлы HTML и CSS сжимаются лучше, чем с использованием Gzip, на 21% и 17% соответственно.
WebDEV #советы #web
Верстка сайта - Как ускорить сайт 6 простых шагов
Каждый хоть раз задумывался как оптимизировать и ускорить сайт. В этом видео показываются 6 простых шагов как ускорить сайт, даже если вы начинающий у вас получится сделать эти действия. Верстка сайта иногда получается очень громоздкой с большим количеством лишних стилей и JavaScript кода. Это все мешает сайту загружаться быстро и качественно, поэтому момент скорости сайта нужно также прорабатывать и не забывать о нем. Скорость загрузки сайта очень влияет на отображение сайта в поисковой выдаче ближе к первым местам.
📺 YouTube
WebDEV #видео #web
Каждый хоть раз задумывался как оптимизировать и ускорить сайт. В этом видео показываются 6 простых шагов как ускорить сайт, даже если вы начинающий у вас получится сделать эти действия. Верстка сайта иногда получается очень громоздкой с большим количеством лишних стилей и JavaScript кода. Это все мешает сайту загружаться быстро и качественно, поэтому момент скорости сайта нужно также прорабатывать и не забывать о нем. Скорость загрузки сайта очень влияет на отображение сайта в поисковой выдаче ближе к первым местам.
📺 YouTube
WebDEV #видео #web
YouTube
Верстка сайта - Как ускорить сайт 6 простых шагов
Думаю каждый хоть раз задумывался как птимизировать и ускорить сайт. В этом видео я покажу 6 простых шагов как ускорить сайт, даже если вы начинающий у вас получится сделать эти действия. Верстка сайта иногда получается очень громоздкой с большим количеством…
🛠 Responsively даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройствах. Несложно представить себе то, как много времени позволяет сэкономить этот инструмент.
WebDEV #инструменты #web
WebDEV #инструменты #web
💡 Оптимизируйте изображения
Картинки — жизненно важная часть сайтов. 93,7% сайтов в интернете используют хотя бы один формат изображений, потому что картинки привлекают пользователей. Но изображения на сайте влияют на время загрузки. Конечно, если они не оптимизированы. Есть несколько способов оптимизации изображений.
▍Используйте WebP или AVIF
Использование новых форматов изображений, например WebP и AVIF, способствует улучшению производительности (по сравнению с использованием более старых форматов, таких как JPEG и PNG).
WebP на 26% меньше, чем PNG, и на 25-35% меньше, чем JPEG. AVIF на 50% меньше, чем JPEG, и на 20% меньше, чем WebP.
Но тут есть загвоздка: поддержка в браузерах. WebP получил эту поддержку недавно, так что в более старых версиях браузеров ее может не быть. А формат AVIF поддерживается только в Chrome и Opera.
Продолжение следует...
WebDEV #советы #web
Картинки — жизненно важная часть сайтов. 93,7% сайтов в интернете используют хотя бы один формат изображений, потому что картинки привлекают пользователей. Но изображения на сайте влияют на время загрузки. Конечно, если они не оптимизированы. Есть несколько способов оптимизации изображений.
▍Используйте WebP или AVIF
Использование новых форматов изображений, например WebP и AVIF, способствует улучшению производительности (по сравнению с использованием более старых форматов, таких как JPEG и PNG).
WebP на 26% меньше, чем PNG, и на 25-35% меньше, чем JPEG. AVIF на 50% меньше, чем JPEG, и на 20% меньше, чем WebP.
Но тут есть загвоздка: поддержка в браузерах. WebP получил эту поддержку недавно, так что в более старых версиях браузеров ее может не быть. А формат AVIF поддерживается только в Chrome и Opera.
Продолжение следует...
WebDEV #советы #web
🔥 Лучшее на канале за неделю
1. Верстка сайта - Как ускорить сайт 6 простых шагов.
2. Responsively даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройствах.
3. Сжимайте файлы.
1. Верстка сайта - Как ускорить сайт 6 простых шагов.
2. Responsively даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройствах.
3. Сжимайте файлы.
💡 Оптимизируйте изображения
▍Часть 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. Применяйте ленивую загрузку.