Объединение css файлов уменьшает количество http запросов не рекомендуется для сайтов с http 2
Как я вижу, есть несколько вариантов:
Объедините все файлы, которые используются на сайте, и каждая страница получает один и тот же комбинированный файл. Недостатком является неиспользуемый контент, загромождающий скрипт (и более тяжелый первый загрузчик (также перезагружаемый при изменении любого скрипта компонента) )
Объедините файлы на странице основы - недостатком является каждая страница с различными требованиями получает другой комбинированный файл (более тяжелый первая загрузка для каждого типа страницы)
Заключение
Кому не понравится сайт, который быстро грузится? Надеюсь, статья убедила вас, что время загрузки страницы важно.
Для оценки производительности своего веб-сайта можно использовать множество инструментов, таких как Google Pagespeed Insights, Pingdom, YSlow и т.д. Они дадут некоторое представление о том, в каком месте сайт тормозит.
Важнейшим моментом является устранение основных проблем, а не поиск решения всех предлагаемых инструментами оценки.
Выявив наиболее важные области, нужно принять соответствующие меры, чтобы сократить время загрузки страницы и улучшить взаимодействие с пользователем.
И пять соответствующих недостатков, с которыми можно столкнуться:
На рисунке показано время до начала отрисовки — то есть, время до момента, когда пользователя видит первое содержание веб-страницы. Это время часто рассматривается как определяющее значение для восприятия пользователями отзывчивости веб-сайта.
Более подробно с процессом тестирования и результатами можно ознакомиться в презентации с конференции nginx.conf 2015.
Тем не менее, все веб-страницы и сеансы пользователей отличаются друг от друга. Например, если у вас есть стриминг видео или большие загружаемые файлы, то ваши результаты могут отличаться или даже быть противоположными.
При использовании отдельных серверов, появляется возможность перейти к мультисерверной архитектуре. Сервера могут разделяться физически, виртуально или может использоваться облачное окружение, такое как AWS. Это усложняет архитектуру, по сравнению с односерверным решением или комбинацией cервер+база данных, но дает много преимуществ и является необходимостью для высоконагруженных сайтов.
Узнать больше
Эта свободная электронная книга очень хорошая для прочтения, если хотите углубится в детали протокола как плана или стратегии.
Эта замечательная подборка слайдов больше раскрывает некоторые пункты этой статьи.
2. Отсутствие CDN
Использование CDN сокращает время загрузки страницы.
Использование CDN позволит пользователям получать ресурсы, необходимые для веб-страницы, с сервера, ближайшего к их местоположению. Серверы в CDN распределены по разным географическим точкам. Этот способ может быть немного дорогим, но эффективным.
Например, если ваш исходный сервер находится в Калифорнии, ваша CDN может выглядеть следующим образом.
Однако также важно правильно настроить CDN для кэширования контента с правильными значениями TTL для эффективного использования.
Но что происходит с самым первым запросом или когда срок действия кэша CDN истечет?
Здесь все становится интереснее. Если вы работаете в масштабе, где велико влияние загрузки данных из источника, вы можете время от времени прогревать свою CDN, чтобы повторно заполнить кэш.
Также имейте в виду, что большинство сервисов CDN владеют своей сетевой магистралью, где они могут обеспечить более высокое качество обслуживания по сравнению с Интернетом. Это уменьшит потерю пакетов, что приведет к сокращению времени загрузки.
Совет: делитесь повторно используемыми компонентами между проектами с помощью Bit (Github).
Он необходим для повторного использования кода, сохранения единообразия дизайна, совместной работы в команде, ускорения доставки и создания масштабируемых приложений.
Bit поддерживает Node, TypeScript, React, Vue, Angular и др.
Распределение ресурсов между хостами: sharding
Упорядочьте ассеты по разделам сайта
Приоритеты
В первом подходе каждый поток получает определённый вес. Потом на основе веса сервер распределяет нагрузку между потоками. Такой подход уже использовался в протоколе SPDY.
Создайте индивидуальные ассеты, дополнительно до спрайтов и data uri
Если вы создаете спрайты, позаботьтесь также о создании и оптимизации мелких ассетов, или меньших спрайтов под индивидуальные страницы, если видите, что это улучшит производительность. Это упростит переход от больших спрайтов до более мелких, если будет необходимо.
Это также касается и data uri. Если используете в css, подготовьте также картинки для того времени, когда вы откажетесь от этой техники.
Полезные ссылки
В заключение приведём для заинтересованных читателей несколько полезных ссылок по теме:
-
; — краткая, но информативная выдержка из спецификаций по ссылке выше; , написанные разработчиком утилиты curl Даниэлем Стернбергом (см. также русский перевод); .
Читателей, которые по тем или иным причинам не могут оставлять комментарии здесь, приглашаем в наш блог.
Apache
После этого перезапустите Apache. Вот и всё — для базовой настройки этого вполне достаточно.
Немного истории
Начните с использования SPDY
- Сделать так, чтобы доменные имена для шардинговых ресурсов резолвились в одинаковые IP-адреса.
- Убедиться в том, что используется wildcard-сертификат — в таком случае он будет валидным для всех доменных имен, используемых при шардинге. Либо убедиться, в наличии соответствующего мультидоменного сертификата.
Встраивание изображений за счет использования data uri
С оптимизацией HTTP-запросов у HTTP/2, эта "лучшая практика" будет больше мешать, нежели помогать улучшению производительности.
Nginx
После этого откройте конфигурационный файл /etc/nginx/nginx.conf и найдите в секции server следующую строку:
и замените её на:
Сохраните внесённые изменения и перезагрузите Nginx:
Когда переключиться?
1. Запустите проект, или перейдите но TLS сейчас.
Это должно быть вашим приоритетом.
3. Проверьте вашу статистику
4. Проверьте свой хостинг
Доменное шардирование
4 ответа
Вариант 1 является лучшим. В конечном итоге большинство пользователей посещают большинство «типов» вашего сайта, поэтому все равно выгодно объединить все в один файл, возможно, за исключением больших JS-файлов, которые нужны в немногих, редко посещаемых страницах.
Первое попадание страницы может быть медленнее, чем с разными файлами, но это все равно стоит делать, так как каждый другой постраничный сайт будет использовать кешированный глобальный JS.
Один совет; слейте их автоматически, если вы еще этого не сделали!
Я обычно объединяю «глобальный Javascript» - jQuery и общие плагины - в один файл, а затем при необходимости загружаю дополнительные плагины в виде отдельных файлов.
Например, на одном сайте, на котором я запускаю многие страницы, есть таблицы данных, поэтому у меня есть global.js с jQuery, DataTables и SuperFish (для моего меню). На сайте есть две страницы, которые используют «лайтбокс», поэтому у меня есть отдельный скрипт для этих двух страниц.
Для CSS я просто обслуживаю один файл для всего сайта и стараюсь сделать CSS максимально общим - на большинстве страниц есть только несколько уникальных элементов CSS.
В то время как определенно рекомендуется использовать как можно меньше файлов, вы можете обнаружить, что у вас есть разделение между функциональными возможностями, которые требуются при загрузке страницы, и функциями, которые можно отложить с помощью асинхронной загрузки.
Если ваше JS может быть перенесено во вторую категорию, вы можете улучшить воспринимаемую начальную скорость загрузки страницы, создав лучший опыт для своих пользователей.
Я бы не предложил объединить их все. Если вы используете общую библиотеку, вы можете использовать CDN для доставки ваших javascripts. Затем вы можете воспользоваться кешированием браузера (при условии, что другие сайты используют один и тот же CDN) и распределенной доставкой. Microsoft и Google у каждого есть решения (я тоже не пользуюсь честью, но я, безусловно, собираюсь начало), и могут быть и другие. В соответствующей заметке SO имеет такой вопрос:
Ваш сайт слишком медленный? Тогда самое время предпринять какие-то действия для решения этой проблемы. Даже если это не так, вам может быть интересно узнать, какие ошибки делают разработчики, влияющие на время загрузки страницы.
Заключение
Конкатенация JS и CSS
Однако при использовании конкатенации может возникнуть та же проблема, что и со спрайтами: зайдя на какую-то одну страницу сайта, пользователь загрузит все используемые на нём СSS- и JS-файлы (при этом очень вероятно, что большинство из этих файлов ему никогда не понадобятся). Конечно, можно тщательно отбирать файлы для каждой страницы сайта, но это будет занимать слишком много времени.
Ещё одна сложность заключается в том, что все элементы конкатенированного файла нужно вычищать из кэша одновременно. Невозможно сделать так, чтобы для одних элементов была выставлена одна дата истечения срока действия, а для других (которые к тому же и используются гораздо чаще) — другая. Если изменить хотя бы одну строку в CSS — срок действия истечёт сразу у всех элементов.
Факторы, влияющие на время загрузки страницы, а также советы и рекомендации по оптимизации
На время загрузки страницы влияет множество факторов. Я перечислил пять основных, с которыми сталкивался при создании сайтов.
Браузер обычно ограничивает количество одновременных запросов от 4 до 8. Следовательно, нельзя делать много запросов параллельно.
Объединение файлов CSS / JS - файлы CSS, а также файлы JS можно объединить в один файл, а не получать несколько файлов с сервера. Поскольку все файлы CSS блокируют рендеринг, уменьшение количества файлов CSS значительно сократит время загрузки страницы.
Загружать только то, что необходимо - вместо загрузки всех изображений сразу загружайте их только тогда, когда они необходимы. Этот способ называется отложенной загрузкой или загрузкой по требованию. Например, когда пользователь заходит на сайт, вместо загрузки изображения, находящегося внизу страницы, вы можете загрузить его, когда пользователь прокручивает до этого конкретного места.
Управление domain sharding
Мультиплексирование
В современных браузерах количество одновременных TCP-соединений ограничено. Поэтому страницы с большим количеством статического контента загружаются не так быстро, как хотелось бы.
5. Большое количество переадресаций
Можно использовать такой инструмент, как Screaming Frog, чтобы идентифицировать все перенаправления в приложении. Анализируя результат, вы сможете убрать ненужные.
Что касается переадресации, существует два типа:
на стороне сервера - быстрые и кэшируемые
на стороне клиента - медленные и не кэшируемые
Лучше избегать переадресаций на стороне клиента и сводить к минимуму переадресации на стороне сервера, чтобы оптимизировать время загрузки веб-страницы.
Объединение CSS и Javascript
Если вы делаете это, посетитель, открыв главную страницу, загрузит все css- и javascript файлы, необходимы для работы сайта, даже если не использует большинство из них. Как разработчик, вы можете уменьшить проблему путем тщательного подбора подключаемых файлов для каждой страницы сайта, но для этого требуется слишком много работы.
Еще одна дополнительная проблема с объединением файлов - очистка кэша: чистится все вместе. Вы не можете указать файлам, которые никогда не меняются, долгое время жизни, и короткое часто изменяемым. Весь кэш должен быть обновлен, даже если поменялась одна строка в css-файле.
Для дальнейшего прочтения
HTTP - старый протокол, изначально описан в 1991, последнее крупное обновление HTTP/1.1 вышло в 1999. В 1999 году сайты очень сильно отличались от современных. В статье http2 explained, Daniel Sternberg объясняет, что при открытии страницы современного сайта, в среднем нужно загрузить 1.9 Мб контента из порядка 100 разных ресурсов, где "ресурсы" - что угодно, начиная картинками и шрифтами, и заканчивая js- и css-файлами.
Встраивание изображений с помощью DataURI
Когда переходить?
Это далеко не все
Объединение изображений в спрайты
Спрайт возвращался в ответ на единственный запрос. Даже если пользователь заходил на страницу, на которой находится всего одно небольшое изображение, нужно было загрузить весь спрайт.
Перейдите на TLC
Для многих сайтов тяжелее всего не перейти на HTTP/2, а использовать защищенное соединение. Если вы разрабатывает новый, или обновляете старый сайт, первое, что вы должны сделать как можно скорее - это использовать https. Это важно не только для HTTP/2, Google выше ранжирует сайты с https-соединением, браузеры помечают не https-сайты как "небезопасные". В будущем вы обнаружите, что множество html5 фич, к примеру, геолокация, недоступны без защищенного соединения.
Нужно ли нам менять наши сайты?
Объединение множества изображений в спрайты
SPDY
- разрешит параллельные запросы через одно TCP соединение, известно как мультиплексирование;
- позволит браузерам загружать ассеты с разным приоритетом, что позволит серверу отдавать вначале жизненно важные ресурсы;
- будет сжимать/уменьшит количество http хедеров;
- реализует "серверный пуш", посредством которого сервер сможет отправлять жизненно важные ресурсы до их запроса браузером.
Как видим, SPDY имеет определенный успех, приобретая приятие как серверами, так и браузерами. Однако, вы также могли заметить, что несмотря на то, что Internet Explorer 11 поддерживает SPDY, у Microsoft’s Edge поддержка упразднена. Что же произошло?
3. Большие размеры файлов и размер страницы
Получение большого файла или страницы с веб-сервера занимает много времени. Выборка нескольких таких больших файлов увеличивает размер страницы и увеличивает время загрузки страницы.
Уменьшение размеров файлов за счет сжатия может сократить время загрузки страницы.
Сжатие файлов - лучший способ уменьшить размер файлов и ускорить загрузку. Для этого обычно используется Gzip. Он находит похожий код в ваших файлах и временно заменяет их. Большинство веб-серверов поддерживают сжатие Gzip.
Доступна другая схема сжатия, сжатие Brotli, которую вы также можете использовать в зависимости от типов файлов.
Сжатие файлов HTML или CSS обычно экономит около 50% или 70% размера файла, что приводит к меньшему времени загрузки страницы и меньшей пропускной способности.
Вы можете еще больше сократить время загрузки страницы, уменьшив размер изображений, используемых в приложении.
Почему время загрузки страницы важно?
Время загрузки страницы напрямую связано с производительностью сайта.
Если загрузка занимает более 3 секунд, вы потеряете половину посетителей еще до того, как они попадут на ваш сайт.
Видимость - Google учитывает время загрузки страницы при ранжировании в результатах поиска. Следовательно, время загрузки сайта влияет на то, насколько легко пользователи смогут найти его в Интернете.
Конверсия - чем быстрее загружается страница, тем больше пользователи взаимодействуют с сайтом. Медленные сайты убивают конверсии. Потенциальные клиенты будут неохотно пользоваться сайтом и следовать призывам к действию (CTA), если ваша веб-страница будет долго загружаться. Это приведет к разочарованным пользователям, они будут уходить с сайта, не покупая ваш продукт или не используя ваши услуги.
Удобство использования - чем меньше время загрузки, тем больше будет удовлетворен пользователь. В результате, удержание клиентов будет выше.
Давайте рассмотрим несколько примеров, основанных на исследовании, проведенном HubSpot.
Если Yahoo сократит время загрузки страницы на 0,4 секунды, трафик может увеличиться на 9%.
Замедление загрузки страницы на 1 секунду может стоить Amazon 1,6 миллиарда долларов продаж в год.
2-секундная задержка поиска Bing приведет к потере дохода на 4,3% на посетителя, уменьшению числа кликов на 3,75% и сокращению количества запросов на 1,8%.
Согласно приведенным выше фактам, можно увидеть, насколько важно время загрузки страницы.
4. Загрузка всех ресурсов одновременно
Одновременная загрузка всех файлов HTML, CSS и JS увеличивает время загрузки страницы, так как отрисовка будет заблокирована до тех пор, пока не будут загружены все эти ресурсы.
Загрузка файлов JS после других элементов улучшает время загрузки страницы.
Отложенная загрузка JavaScript - это механизм загрузки больших файлов JS после других элементов. Этот метод гарантирует, что остальная часть вашего контента загружается без каких-либо блокировок большими JS-файлами.
Пусть у вас есть HTML, вам нужно сделать вызов внешнего JS-файла (defer.js) перед тегом .
Смысл приведенного выше кода: «Подождите, пока загрузится весь документ, затем загрузите файл defer.js».
Читайте также: