Оптимизация сайта — это набор методов, как на стороне сервера, так и на стороне клиента, которые направлены на ускорение загрузки веб-сайтов и рендеринга в браузере для повышения удобства работы пользователей.
Сегодня посетители привыкли к оперативности и реактивности, типичной для нативных приложений. Они ожидают загрузки веб-страницы в течение 1000 мс . Если это займет гораздо больше времени, они могут покинуть сайт.
Поисковые системы, безусловно, догнали эту тенденцию и во многом способствовали этому. Фактически, Google уже некоторое время использует скорость страницы как фактор ранжирования веб-сайтов при поиске на рабочем столе. Google объявил, что с июля 2018 года мобильный поиск также будет очень важен для достижения верхних позиций в своем списке результатов.
Bootstrap часто подвергался критике за добавление ненужных объектов на веб-сайты, поэтому, если вы используете эту популярную интерфейсную библиотеку пользовательского интерфейса в своем проекте, убедитесь, что вы уделяете дополнительное внимание весу страницы и скорости страницы.
В этой статье я расскажу о трех шагах по оптимизации интерфейса, которые вы можете предпринять, чтобы обеспечить быстрый рендеринг и оптимизацию вашего сайта на основе Bootstrap.
Загрузите только нужный вам пакет Bootstrap
Если вы решили работать с предварительно скомпилированным загрузочным пакетом Bootstrap, вам следует серьезно задуматься о том, какие части библиотеки вам действительно нужны.
Папка загрузки содержит как полную библиотеку CSS ( bootstrap.css и bootstrap.min.css ), так и библиотеку компонентов JavaScript со всеми ее зависимостями, кроме jQuery ( bootstrap.bundle.js и bootstrap.bundle.min.js ), а также несколько автономных файлов CSS, содержащих код, необходимый для определенных частей этого популярного набора пользовательского интерфейса.
Если вам просто нужен хороший сброс CSS для вашего проекта, просто используйте bootstrap-reboot.min.css . Если вам нужна только гибкая и простая в использовании bootstrap-grid.min.css система, перейдите к bootstrap-grid.min.css . Там нет необходимости загружать весь каркас. Если, с другой стороны, вы знаете, что собираетесь использовать все в библиотеке, по крайней мере, убедитесь, что вы включили минимизированную версию.
Аналогично с кодом JavaScript. Если вы знаете, что в вашем проекте не будет выпадающих списков, всплывающих окон и всплывающих подсказок, тогда используйте bootstrap.min.js а не bootstrap.bundle.min.js потому что вам не нужно включать Popper.js .
Выберите источник, а не скомпилированный пакет загрузки
Поскольку последняя версия Bootstrap позволяет вам выбирать ее части для включения в проект, предварительно скомпилированные файлы могут по-прежнему содержать то, что вам может не понадобиться.
Браузерам по-прежнему приходится загружать и обрабатывать неиспользуемый код, что может повлиять на производительность веб-сайта, особенно при медленных сетевых подключениях.
Лучше было бы скачать исходный код Bootstrap , потому что:
- вы сможете включить именно те компоненты, которые вам нужны в вашем проекте
- настройка любой части библиотеки становится более чистой и эффективной, без необходимости переопределять стили снова и снова
- таблица стилей, которая заканчивается в производстве, обычно более скудна.
Используйте проверенные методы оптимизации на стороне клиента
Помимо вышеперечисленных соображений, оптимизация веб-сайта, созданного на основе Bootstrap, для повышения производительности по-прежнему должна включать методы повышения производительности, как и любой другой веб-сайт.
Ниже приведены лишь некоторые из важнейших факторов, на которые вы могли бы обратить внимание для эффективной оптимизации интерфейса вашего сайта.
Написать Lean CSS и JavaScript
Каждый символ в вашем коде суммирует с окончательным весом веб-страницы. Написание чистого и краткого кода CSS и JavaScript с сохранением его читабельности не всегда легко. Тем не менее, это должно быть то, к чему нужно стремиться в каждом проекте.
Хорошие методы CSS включают в себя избавление от неиспользуемых селекторов, дубликата кода и чрезмерно вложенных правил. Хорошо держать ваш код хорошо организованным в начале проекта. Например, использование руководств по стилю может принести пользу вашему процессу разработки и качеству вашего кода.
Кроме того, есть отличные инструменты, которые помогут вам очистить ваш код. Такие объекты, как CSS Lint и JSLint, могут проверять ваш документ на наличие синтаксических ошибок, неэффективных шаблонов кодирования, неиспользуемого кода и т. Д.
Сокращение и объединение кода CSS и JavaScript
Важным шагом оптимизации является ограничение количества HTTP-запросов, которые веб-сайт должен сделать для отображения своего контента. Каждое обратное обращение к серверу и обратно для получения ресурсов занимает время, что негативно влияет на пользовательский опыт.
Сокращение (то есть удаление комментариев и пробелов из вашего документа) и объединение файлов CSS и JavaScript теперь стало консолидированной практикой, целью которой является сохранение небольшого размера файла и уменьшение количества HTTP-запросов.
Если вы хотите глубже вникнуть, « Как оптимизировать CSS и JS для более быстрых сайтов» от Гэри Стивенса — отличная статья.
Следите за размером файла изображения
Самая весомая часть веб-страницы часто представлена графическими файлами, но и аудио и видео файлы играют свою роль. Поэтому оптимизация визуальных ресурсов имеет решающее значение для производительности сайта.
Это включает в себя два аспекта:
- Убедитесь, что вы используете правильный формат изображения для работы под рукой.
- Сжатие лишних байтов из ваших активов перед загрузкой их для производства. Есть отличные инструменты, которые могут вам помочь. Проверьте онлайн-инструменты, такие как TinyPNG для растровых изображений (PNG, JPG и т. Д.) И SSVGOMG Джейка Арчибальда для оптимизации SVG. Также рассмотрите инструменты, которые вы можете установить локально, как ваш любимый исполнитель задач (Grunt, Gulp и т. Д.).
Вывод
Сайт с быстрым рендерингом является ключевым фактором, определяющим удобство работы пользователей на сайтах. Это становится еще более важным, когда речь заходит об оценке опыта пользователей Интернета на мобильных устройствах.
В этой статье я перечислил ряд методов, которые играют роль в оптимизации веб-сайта Bootstrap для повышения производительности с точки зрения фронт-энда.
Каковы ваши методы оптимизации для быстро загружаемого сайта Bootstrap? Дай мне знать в комментариях!
Если у вас есть основы Bootstrap за поясом, но вы не знаете, как поднять свои навыки Bootstrap на следующий уровень, ознакомьтесь с нашим курсом «Создайте свой первый сайт с Bootstrap 4», чтобы быстро и весело познакомиться с мощью Bootstrap.