Клиентская оптимизация — это набор методик, которые сделают сайт быстрее для пользователя без существенных изменений на серверной стороне. Прирост в скорости может достигать десятикратного улучшения. При этом техники довольно простые.
Что происходит, когда пользователь открывает сайт? Браузер шлет запрос на сервер, получает содержимое сайта и показывает его посетителю:
Такой простой случай характерен для сайта без картинок, стилей и скриптов. Сегодня это почти невозможно. Открытие сайта, который использует современные технологии, выглядит так:
Понятно, что скорость сайта зависит от:
Все методы ускорения Web сайтов направлены на снижение количества запросов и уменьшение объема данных.
Обязательно устанавливайте HTTP заголовки Expires и Cache-control для того, чтобы CSS/JS файлы кешировались на клиентском браузере. Т.о. клиент будет запрашивать уникальные файлы только один раз на время действия кеша.
По возможности склеивайте все CSS файлы в один. Тоже самое стоит делать и для JS. Тогда будет всего два внешних файла: 1 javascript и 1 CSS.
Основное правило — загружайте любые внешние ресурсы максимально близко к концу HTML. Исключение составляет только CSS, его нужно грузить в теге <head>. Javscript нужно грузить перед закрывающимся тегом </body>. Сначала загружайте Javascipt для приложения, а только потом счетчики.
Большое количество мелких картинок на одной странице приведут к большому количеству запросов к Web серверу. Используйте CSS спрайты. Мелкие картинки на сайте нужно объединить в одну. А для отображения нужно использовать свойство “background” в CSS.
Обязательно использовать. Практически все современные браузеры поддерживают сжатие gzip или deflate. Сжатие имеет смысл только для текстовых файлов (HTML, CSS, JS). Сжатие обычно включается на Web сервере, например в Nginx:
server { ... gzip on; gzip_disable "msie6"; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; ... }
Все известные Web серверы имеют модули для сжатия.
Сжатие также можно использовать в приложениях. Например в PHP, компрессия включается в php.ini:
zlib.output_compression On;
Потенциально существенный прирост. Картинки могут занимать более 80% всего размера страницы. Сжатие картинок без потери качества может уменьшить размер в 2…3 раза. Есть целая куча инструментов для lossless сжатия.
Уделите внимание выбору формата картинок:
Подробнее о выборе правильного формата картинки.
Используйте механизм minify (минификация) для получения более компактного размера JS и CSS (и HTML). Сам процесс минификации очень простой. Это вырезание всех комментариев и необязательных пробельных символов (переносов, табов и т.п.).
Размер современных страниц может быть очень большим из-за сложной верстки и большого количества элементов. Чем больше размер HTML тем хуже. Поэтому соблюдайте правила:
Правильное использование клиентского кеширования и сжатия gzip могут ускорить сайт в 3…5 раз. Особое внимание обратите на картинки, их оптимизация также может дать существенный прирост в скорости.
Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…