WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Уменьшайте число вызовов сервера

В общем, чем чаще ваш фронтенд обращается к серверу, тем больше времени потребуется на загрузку. Дело в том, что какой бы запрос вы ни отправили на сервер, перед рендерингом страницы потребуется полная коммуникация.

Чтобы снизить число обращений к серверу до необходимого минимума, можно сделать следующее:

— Используйте CSS-спрайты. Это один из самых простых способов снизить число вызовов сервера. Вместо загрузки на сайт десяти отдельных изображений спрайт загружает один графический файл, содержащий набор картинок. Для отображения желаемого сегмента изображения можно использовать CSS-свойства background-image и background-position. Это позволит вам уменьшить количество запросов к серверу.

Продолжение следует...

WebDEV #советы #web

Основы CSS3. Полный курс

В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.

📺 YouTube

WebDEV #видео #css

🛠 Расширение Web Developer Form Filler пригодится тем разработчикам, кому надоедает заполнять всяческие формы, тестируя их в ходе создания сайтов. Благодаря этому расширению можно сэкономить время и сделать своё дело быстрее.

WebDEV #инструменты #web

💡 Уменьшайте число вызовов сервера

▍Часть 2

Чтобы снизить число обращений к серверу до необходимого минимума, можно сделать следующее:

— Используйте CSS-спрайты (подробнее в первой части).
— Ограничивайте число сторонних плагинов, совершающих много внешних запросов.
— Следите за тем, чтобы на сайте не было сломанных ссылок на несуществующие файлы.

Кроме того, чтобы увеличить скорость начальной загрузки приложения, можно рассмотреть возможность рендеринга на сервере.

Если при загрузке первой страницы также будет загружаться не много данных, это очень сильно улучшит производительность.

WebDEV #советы #web

💡 Подборка книг по веб-разработке

▫️ CSS для профи

▫️ Django 3.0. Практика создания веб-сайтов на Python

▫️ Новая большая книга CSS

▫️ Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML 5

WebDEV #подборка #book

🔥 Лучшее на канале за неделю

1. Основы CSS3. Полный курс.

2. Расширение Web Developer Form Filler пригодится тем разработчикам, кому надоедает заполнять всяческие формы, тестируя их в ходе создания сайтов.

3. Уменьшайте число вызовов сервера.

WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Удаляйте ненужные пользовательские шрифты

▍Часть 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

🛠 GTMetrix позволяет узнавать о том, что замедляет ваши веб-проекты. А узнав об этом, их можно исправить, ускорить, улучшить эффективность их работы. Иногда проблемы сайтов связаны с серверами, иногда — со слишком большими изображениями, иногда — с кодом. GTMetrix позволяет выявлять и эти, и многие другие проблемы сайтов.

WebDEV #инструменты #web

💡 Удаляйте ненужные пользовательские шрифты

▍Часть 2

Перед прочтением рекомендуем ознакомиться с первой частью.

▍Работая со шрифтами на сайте:

— Делайте поднаборы шрифтов, чтобы удалить ненужные символы. Файлы шрифтов содержат символы для многих языков. Некоторые из них могут вообще никогда на вашем сайте не использоваться. Делая поднаборы шрифтов, мы можем удалить ненужные символы. Останутся лишь те, которые действительно необходимы для отображения контента сайта.
— Делайте предварительную загрузку шрифтов, которые явно требуются на странице.

Использование парочки пользовательских шрифтов может не нанести ощутимого вреда. Но если они используются очень широко, это непременно скажется на скорости загрузки фронтенда. Поэтому стоит еще раз оценить плюсы и минусы использования пользовательских шрифтов на своем сайте.

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. Vue on Rails.

2. GTMetrix позволяет узнавать о том, что замедляет ваши веб-проекты.

3. Удаляйте ненужные пользовательские шрифты.

WebDEV #test #css

Выберите правильный вариант 👇🏼

💡 Сжимайте файлы

Чем больше размер файла, тем дольше происходит его загрузка. А современные сайты часто содержат большие пакеты 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

🛠 Responsively даёт веб-разработчику инструмент для одновременной проверки внешнего вида его сайта на разных устройствах. Несложно представить себе то, как много времени позволяет сэкономить этот инструмент.

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