WebDEV
9.16K subscribers
2.04K photos
10 videos
2.56K links
Сообщество веб-разработчиков.

На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки.

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc, @tatiana_inc

Канал на бирже: telega.in/c/webb_dev

РКН: clck.ru/3L2oTf
Download Telegram
💡Почему оптимизация кода так важна?

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

3 основных способа оптимизировать работу Вашего веб приложения:
— Старайтесь все файлы на сервере содержать в сжатом виде.
— Используйте современные форматы изображений, такие как svg, webp. Если не выходит работать с такими форматами, старайтесь использовать оптимизацию изображений. Для примера можно взять сервис https://tinypng.com/, который выполняет сжатие без потери качества.
— Все скрипты желательно подключать только в конце страницы перед тегом </body>. Это позволит построить сперва DOM, а затем прогрузить сложные сценарии.

#optimization
💡Оптимизация загрузки jQuery

Для оптимизации мы будем использовать CDN (Content Delivery Network).

Основные преимущества CDN:
– Уменьшение задержки – файл грузится с ближайшего к вам сервера
– Распараллеливание загрузки – браузеры ограничивают число одновременных подключений к одному домену, а так файлы могут грузиться параллельно
– Кеширование – есть большая вероятность, что в браузерном кеше посетителя файл уже лежит и это скорейший способ загрузить его.

Пример кода
 src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="UTF-8"> </script>

В атрибуте src, желательно не указывать протокол вообще, тогда можно будет не заботиться о том http это или https.

А что делать в том случае, если CDN от google вдруг стал недоступен? Самый простой вариант — подгрузить локальную копию jQuery.
<script>
window.jQuery ||
document.write('<script src="js/vendor/jquery-3.5.1.min.js"><\/script>')
</script>

#optimization #jquery