Клиентская оптимизация — это набор методик, которые сделают сайт быстрее для пользователя без существенных изменений на серверной стороне. Прирост в скорости может достигать десятикратного улучшения. При этом техники довольно простые.
Что происходит, когда пользователь открывает сайт? Браузер шлет запрос на сервер, получает содержимое сайта и показывает его посетителю:
Такой простой случай характерен для сайта без картинок, стилей и скриптов. Сегодня это почти невозможно. Открытие сайта, который использует современные технологии, выглядит так:
Понятно, что скорость сайта зависит от:
Все методы ускорения 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 раз. Особое внимание обратите на картинки, их оптимизация также может дать существенный прирост в скорости.
Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…
Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…
В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…
Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…
Дедлайн (от англ. deadline — «крайний срок») — это конечная дата стачи проекта или задачи…