Как ускорить загрузку сайта

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

Как ускорить загрузку сайта

Дополнительным стимулом для ускорения загрузки сайта является учет времени открытия страниц при ранжировании в поисковых системах.

Во-первых, сайты которые не укладываются в определенные нормы по скорости, автоматом понижаются в выдаче поисковиками.

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

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

1. Уменьшайте количество файлов

Снижение количества файлов на странице, приводит к уменьшению необходимых HTTP соединений для их загрузки, тем самым ускоряя этот процесс. Но как же это сделать? Можно использовать следующие техники:

Используйте CSS спрайты

Вместо того, чтобы использовать раздельные изображения для фона различных элементов, можно объединить их в одно и использовать технику CSS спрайтов для этого файла. Это заметно уменьшит количество загружаемых файлов и ускорит загрузку страницы.

Объединяйте CSS/JS файлы в один

Если страницы содержат множество CSS/JS файлов, то их объединение может значительно уменьшить количество запросов.

2. Уменьшайте размер файлов

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

Уменьшайте HTML файл

Используйте HTML-минификатор, например HTML Tidy, он уберет лишние пробелы и переносы строк.

Уменьшайте CSS/JS файлы

Использование инструментов вроде jscompress, помогут уменьшить размер ваших JavaScript/CSS файлов за счет их оптимизации. Проблема в том, что разобраться со сжатыми таким образом кодами будет почти нереально, поэтому стоит вести разные версии файлов, одну оптимизированную выгружать на сайт, а вторую, в читаемом виде, использовать для разработки.

Упаковывайте JavaScript

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

Оптимизируйте изображения для Web

Перед добавление изображений на страницу, оптимизируйте ее для Web. При создании изображения графическим редактором, таким как Photoshop, используйте пункт «Сохранить изображение для Web» и выбирайте оптимальные настройки.

Так же вы можете использовать инструменты для оптимизации своих изображений, которые я описывал в статье Как уменьшить вес картинки.

3. Оптимизации серверной стороны

Кэшируйте динамические страницы

При использовании кэширования динамических страницы сервер отдает браузеру статические файлы, что занимает гораздо меньше времени, чем генерация страницы. Веб-серверы, такие как Apache оптимизированы для очень эффективного обслуживания статического контента. При использовании WordPress для кэширования страниц вам подойдут плагины Hyper Cache или WP-Super Cache. Для других CMS ищите аналогичные варианты.

Включите GZip

Большинство современных браузеров умеют работать с GZip, использование которого на стороне сервера позволяет уменьшить размер HTML, CSS/JS файлов до отправки их браузеру, за счет чего сокращается объем передаваемого трафика.

Используйте заголовки Expires для статического контента

Для контента который изменяется не часто, например, изображения, CSS, JS файлы, добавление заголовка Expires позволит использовать кэширование браузера. Установка Expires на дату в будущем позволяет заставить браузер не запрашивать ресурсы повторно, а брать их из кэша.

С помощью следующего кода можно установить заголовки Expires в Apache используя файл .htaccess (тут подробнее про настройку файла htaccess):

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 31 Dec 2016 12:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

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

Используйте косую черту в URLах

Этот метод мало известен, однако известно что он увеличивает производительность. Всегда добавляйте косую черту (/) в конце адресов гиперссылок. Это уменьшит накладные расходы сервера при необходимости 301 HTTP Redirect, т.е. при перенаправлении на адрес с косой чертой в конце, если вы заходили по адресу без нее.

Избавьтесь от ошибок 404

Error 404

404 ошибка (Страница не найдена) приводит к накладным расходам как на стороне сервера, так и в браузере. Проверьте серверные логи или найдите битые ссылки и исправьте их. Как правильно настроить страницу ошибки 404 описано здесь.

Всегда используйте favicon.ico

Большинство браузеров пытаются найти favicon.ico для домена, чтобы добавить маленькую иконку сайта, вне зависимости от того указана ли она в html. Если вы не хотите использовать favicon.ico, то просто разместите прозрачную иконку в корень своего сайта, и браузер не будет получать 404 ошибку при попытке ее открыть.

4. Оптимизация HTML

Другой хороший способ улучшить скорость Вашего сайта, это оптимизация html Вашей страницы таким образом, чтобы она выводилась на экран так быстро, на сколько это возможно, улучшая восприятие посетителем Вашего сайта. Далее мы рассмотрим несколько советов по HTML оптимизации ускоряющих рендер.

Загружайте таблицы стилей в верху страницы

Всегда размещайте ссылки на файлы таблиц стилей в верхней части вашей страницы, в теге <head>, это приведет к постепенной загрузки страницы. По мере получения браузером HTML контента, он будет выводить его, применяя CSS стили.

Размещайте JavaScript в низу страницы

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

Избегайте использования @import

Если вы используете @import для внешних таблиц стилей, то прекратите это делать, т.к. @import может приводить к последовательной загрузке таблиц стилей, вместо параллельной, а при большом количестве подключений таблиц порядок их загрузки также может измениться. Всегда используйте <link> для подключения таблиц стилей.

Избегайте CSS выражений

css выражение

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

Указывайте высоту и ширину изображений

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

Избегайте масштабирования изображений в браузере

Если вы используете свойства ширины и высоты тэга img для отображения большого изображения как небольшого, вы вынуждаете браузер делать дополнительную работу для вывода страницы. Лучше использовать миниатюру изображения со ссылкой.

Очевидно, что оба последних совета не применимы в случае использования адаптивности.

Выделяйте JS/CSS код во внешние файлы.

Старайтесь выделять весь JS/CSS код во внешние файлы, вместо того, чтобы размещать его прямо в HTML. Браузеры умеют кэшировать JS/CSS файлы, что будет полезно при возвращении посетителя.

5. Прочие оптимизации

Кроме техник о которых было сказано выше, существуют и другие способы ускорить загрузку страницы.

Сокращайте DNS запросы

Браузеру для разрешения доменного адреса в IP-адрес требует примерно 20-120 милисекунд для каждого нового адреса. Поэтому, если вы используете ресурсы на множестве доменов, например, изображения, скрипты и т.п. то старайтесь перенести их на свой сайт, это уменьшит число DNS запросов.

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

Как известно у браузеров существует ограничение на количество одновременно принимаемых файлов с одного домена, поэтому использование поддоменов поможет распараллелить загрузку Вашей страницы. Например если Ваш сайт называется мойсайт.рф, то статичный контент может отдаваться например с доменов стат1.мойсайт.рф и стат2.мойсайт.рф. Это не приведет к увеличению числа DNS запросов, поскольку запрос для мойсайт.рф уже выполнен.

Используйте домены без cookies для статического контента

Если Ваш сайт использует куки, как это делает большинство сайтов сегодня, то вы должны знать, для каждого запроса к серверу, вместе с запросом отправляются и куки. Это просто накладные расходы для статического контента вроде JS/CSS/изображений. Раздавайте статический контент с доменов без куки, чтобы избежать этого. Многие крупные сайты пользуются этой техникой, например Yahoo использует yimg.com для обслуживания статического контента. YouTube использует ytimg.com для статики.

Используйте сети доставки контента

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

Используйте оптимизационные инструменты

pingdom

Используйте инструменты вроде PingDom, Google PageSpeed для проверки своего сайта. Они будут очень полезны для вас, т.к. покажут время загрузки сайта и покажут проблемные области с советами по их устранению, все это поможет сделать ваш сайт «мгновенным».

В конкретных случаях могут быть использованы и другие способы ускорить загрузку сайта, как и что предпринять дополнительно смотрите по вашей CMS. Остались вопросы — задавайте их в комментариях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *