Топ-10 советов о том, как увеличить скорость загрузки страницы

Юрий Чернышев

В этой статья собраны топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.

Итак, поехали:

1. Уменьшите количество HTTP-запросов

80% загрузки страницы ориентировано на загрузку компонентов страницы: скриптов, фотографий, файлов CSS, flash.

Спецификация HTTP/1.1 советует, чтобы браузеры

параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Уменьшив количество этих компонентов, мы уменьшаем количество HTTP-запросов к серверу и, как результат, увеличиваем скорость загрузки страницы.

Но как уменьшить количество запросов к серверу, не затрагивая внешний вид страницы?

На самом деле есть несколько способов.

Использование CSS-спрайтов. 

CSS-спрайт – это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются, используя свойства: background-image и background-position.

Использование Inline-картинок. Inline-картинки

используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей, вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.

Объединение нескольких файлов в один. 

Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер. О том, как это делать на лету я писал в своей заметке здесь «Разгони свой сайт. Статическое сжатие css- и js- файлов на лету»

2.Помещайте CSS файлы в начале страницы

Помещая подключение к css файлам в хедере страницы, мы получаем постепенный рендеринг страницы, т.е. страница будет загружаться постепенно — сначала заголовок, потом лого наверху, навигация и т.д. – а это, в свою очередь, служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта.

Если размещать CSS файлы внизу страницы, то это не позволяет многим браузерам рендерить страницу постепенно. Это объясняется тем, что браузер «не хочет» перерисовывать элементы, у которых после загрузки страницы может измениться стиль. Так что все свои CSS файлы всегда подключайте в верхней части страницы в секции HEAD.

3. Помещайте javascript в конец страницы

Помещая javascript-файлы вниз страницы, мы позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов. Если же Ваш сайт идет в ногу со временем и содержит все возможные интерактивные «примочки», то этих javascript-файлов может быть несколько и весить они могут несколько сотен килобайт, поэтому перед загрузкой страницы заставлять пользователя ждать, пока загрузятся все Ваши javascipt-файлы, губительно.

Кроме того, внешние .js-файлы блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более 2-х компонентов веб-страницы с одного хоста. Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. А когда загружается скрипт, браузер не будет начинать никаких других загрузок, даже с других хостов.

4. Минимизируйте CSS и javascript

Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода.

5. Используйте поддомены для параллельного скачивания

Как я уже говорил выше, согласно спецификации HTTP/1.1, на браузеры накладываются ограничения на количество одновременно загружаемых компонентов сайта, а именно, не более 2-х компонентов с одного хоста. Поэтому если на Вашем сайте много графики, то ее лучше вынести на отдельный поддомен или поддомены. Для Вас это будет один и тот же сервер, а для браузера – разные. Чем больше поддоменов Вы создадите, тем больше файлов браузер сможет одновременно загрузить и тем быстрее загрузится вся страница сайта. Вам остается лишь изменить адрес картинок на новый. Очень простой, но действенный способ.

6. Используйте кэш браузера

Кеширование становится крайне важным для современных веб-сайтов, которые используют обширное подключение JavaScript и CSS. Дело в том, что когда посетитель зашел на Ваш сайт в первый раз, то браузер выполнит загрузку всех javascript и CSS-файлов, также загрузит всю графику и флэш, однако правильно выставив HTTP-заголовок Expires, вы сделаете компоненты страницы кешируемыми. Таким образом, когда посетитель зайдет на Ваш сайт снова или перейдет на следующую страницу Вашего сайта, в кэше его браузера уже будут находится некоторые нужные файлы и браузеру не потребуется загружать их снова. Отсюда и выигрыш в скорости загрузки сайта.

Ускорение сайта с помощью кэширования Nginx

Этот вебсервер имеет очень мощный механизм кэширования ответа от любого бэкенда — будь то apache или php-fpm. Мне доводилось настраивать кэширование и нестандартного бэкенда на Ruby и другие варианты.

Работает это следующим образом:

Пока кэш пуст, nginx запрашивает обработку у Apache или Php-fpm, как обычно. И такие страницы грузятся для первого обращения с обычной для сервера скоростью. Но одновременно с этим, nginx кладет эту готовую страницу в виде HTML-кода на диск, то есть сохраняет в виде статического файла. Затем, когда к этой же странице обращаются другие пользователи (или этот же повторно) — nginx уже не обращается к бэкенду, а отдает готовую страницу из кэша, и это занимает гораздо меньше времени, ведь nginx отдает статику мгновенно. На этой схеме я показал 1-2 секунды для обычной загрузки и 0,1-0,2 секунды для ответа из кэша. Эти цифры вполне реальны.

Таким образом, сервер отдает страницу, даже не обращаясь к медленному бэкенду, что, кроме самого ускорения, в разы, а то и на порядки, снижает нагрузку на сервер и потребление его ресурсов. Очевидно — чем большая нагрузка на страницу сайта, тем большую выгоду от кэширования мы получаем. Поэтому такой вариант может быть ощутимо производительней кэширующих плагинов, поскольку при кэшировании с помощью них обращение к Apache (php-fpm) все же происходит.

А при ответе менее 0,3 секунды Google Pagespeed Insights будет показывать статус «Ваш сервер ответил» быстро в секции «Сократите время ответа сервера».

Как я уже говорил, кэширование довольно сложно настроить для админок, сервисов и интернет магазинов.  Но если у вас высоконагруженный контентный проект на какой-то из известных CMS, вы сможете ускорить сайт с помощью этого способа.

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Сервер, который непосредственно будет отдавать контент пользователю, выбирается на основании некоторых показателей. Например, выбирается сервер с наименьшим числом промежуточных хопов до него, либо с наименьшим временем отклика. Кроме того, браузер кэширует javascript-файлы, и если Вы посещали сайты, на которых используется такой метод, то эта библиотека уже есть в кэше Вашего браузера, и он не будет загружать её снова.

Одним из таких CDN – является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит трафик на ваш сервер.

О том, как загружать jQuery с репозитория Google, я писал вот в этой заметке «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google».

8. Оптимизируйте ваши изображения

Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения может существенно увеличить размер файла.

GIF – идеально подходят для изображений с несколькими цветами, например логотип.

JPEG – отлично подходят для детализированых изображений с большим количеством цветов, таких как фотографии.

PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.

Оптимизировать изображение можно двумя способами: используя программы или онлайн сервисы в Интеренете для сжатия изображений. В первом случае от Вас потребуются определенные знания для работы с той или иной программой, а вот воспользоваться онлайн сервисами может каждый. От Вас лишь требуется загрузить нужные изображения, а сервис сам оптимизирует их и выдаст ссылку на скачивание уже сжатиых файлов. Вот несколько онлайн сервисов для оптимизации изображений:

- www.punypng.com

- Smush.it

- www.jpegmini.com

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip-сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.

Начиная с версии протокола HTTP/1.1, веб-клиенты указывают, какие типы сжатия они поддерживают, устанавливая заголовок Accept-Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.

Content-Encoding: gzip

Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание. Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле .htaccess прописать следующие строки кода:


AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:


AddOutputFilterByType DEFLATE text/html text/plain 
text/xml application/xml application/xhtml+xml 
text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$ 

Но опять таки, данный код работает не на всех серверах, поэтому лучше обратиться в службу поддержки Вашего хостинг-провайдера и уточнить этот вопрос.

Статья взята с сайта: habrahabr.ru