В этой статье я решил написать несколько советов, которые помогут максимально снизить время загрузки страниц вашего сайта. Любая поисковая система стремится предоставить пользователям комфортный поиск, так как это делает Google, поэтому быстрый сайт повышает качество и удовлетворение пользователей.
«Эксперименты показывают, что увеличение задержки страницы с 100 до 400 мс снижает ежедневное число поисков на одного пользователя от 0,2% до 0,6%.» Более того, чем дольше загружается страница, тем меньше она появляется в поиске. Для более длительной задержки, проблемы с поиском сайта могут продолжаться даже после того, когда задержка вернется на прежний уровень» говорит Google.
Я перечислю несколько факторов (+ полезные советы от Yahoo и Google).
a) Сервер
Выбор подходящего хостинга — это первый шаг в запуске веб-сайта. Хостинг с профессиональной конфигурацией может очень вам помочь.
1. Используйте кэширование браузера
Заголовки срока действия сообщают браузеру, нужно ли запрашивать страницу сайта из источника, или ее можно получить из кэша браузера. Устанавливая заголовок срока действия для ресурса, например, для JPEG-изображений, вы разрешаете браузеру хранить эти ресурсы в кэш. В следующий раз, когда посетитель вернется на страницу, она будет загружаться быстрее, поскольку браузер уже будет иметь эти изображения.
2. Проверка ссылок
«Сигнал проверки ссылок зачастую отправляется через определенный интервал времени и играет важную роль в интернет. После отправки сигнала, если ответ не получен, ссылка считается мертвой, и в последующем данные будут направлены по другому пути, пока ссылка не будет восстановлена», сообщает Википедия (англ.).
На самом деле, проверка ссылок по протоколу HTTP позволяет TCP-соединениям оставаться «на плаву», снижая задержку обработки последующих запросов. Так что свяжитесь с вашим провайдером хостинга и скажите им, чтобы они об этом хорошенько подумали! Большинство провайдеров отключают эту функцию (если она передает менее 60 байт на один запрос).
3. Сжатие в формат GZIP
* Изображение с точки зрения betterexplained.com
«GZIP — это самый попyлярный и эффективный метод сжатия из всех доступных, позволяющий уменьшать размер получаемых данных до 70%. Примерно 90% сегодняшнего интернет-трафика проходит через браузеры, которые поддерживают GZIP», сообщает Yahoo.
GZIP-сжатие снижает размер передаваемых HTTP-данных и время отклика. Это простой способ снизить вес страницы. Включить GZIP-сжатие можно путем добавления следующего кода в файл .htaccess:
# сжимать текст, HTML, javascript, CSS, XML:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Либо сжимать определенные типы файлов по расширению:
<files *.html>
SetOutputFilter DEFLATE
</files>
Либо разместить следующий PHP-код в верхней части HTML/PHP-файла:
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
Либо просто использовать CMS-плагины (например, WP HTTP-плагин сжатия для WordPress).
4. Кэшируемые перенаправления с главной страницы
Мобильные страницы перенаправляют пользователей на другой URL-адрес, поэтому кэширование перенаправления может повысить скорость загрузки для следующего раза, когда эти же посетители будут загружать страницу. Используйте директиву 302 со сроком действия в один день. Директива должна включать код Vary: User-Agent, а также Cache-Control: private. В этом случае перенаправляться будут только посетители с мобильных устройств.
5. Используйте CDN
Сеть доставки содержимого (CDN) — это группа веб-серверов, распределенных по нескольким местоположениям, чтобы пользователи быстрее получали нужный контент. Сервер, выбранный для доставки содержимого определенному пользователю, обычно должен находиться как можно ближе к пользователю. Например, будет выбран сервер с наименьшим числом посетителей или сервер с наиболее быстрым временем отклика.
Управлять кэшем и многими другими полезными средствами можно в WordPress с помощью средства W3 Total Cache.
b) Элементы контента
Это самая важная часть, которой вы можете управлять:
1. Минимизация перенаправляющих директив
Иногда, для того чтобы указать новое местоположение URL-адреса, отслеживать клики, собирать разные части сайта вместе или резервировать несколько доменов, нужно перенаправлять браузер с одного URL-адреса на другой. Перенаправляющие директивы добавляют дополнительный HTTP-запрос и увеличивают задержку. Оставляйте только те директивы, которые технически необходимы, и вместо них нельзя использовать что-то другое. Вот рекомендации Google:
- Никогда не указывайте ссылки на URL-адреса страниц, которые выполняют перенаправление на другие URL-адреса. Ваше приложение должно уметь обновлять URL-ссылки каждый раз, когда изменяется их местоположение.
- Никогда не указывайте более одной директивы для перехода на один определенный ресурс. Например, если В — это целевая страница, и есть две разные стартовые страницы А и Б, то и А и Б должны показывать только на С. И не должны указывать на Б.
- Минимизируйте число дополнительных доменов, которые создают директивы, но не формируют содержимое для пользователя. Иногда есть соблазн перенаправлять с нескольких доменов для того, чтобы зарезервировать пространства имен и улавливать неверный ввод пользователя (т.е. ошибки при вводе URL-адреса в адресной строке). Однако если вы даете понять своим пользователям, что на ваш сайт можно попасть по нескольким URL-адресам, вам придется оплачивать огромное число доменов, лишь бы заполучить все возможные слова, связанные с вашим сайтом.
2. Удаление строк запроса для статичных запросов
Нельзя кэшировать ссылку со знаком «?» в URL-адресе, даже если добавить заголовок Cache-control: public. Этот знак вопроса работает так же как Ctrl+F5. Строки запроса можно использовать только для динамических ресурсов.
3. Указание кодировки
Укажите кодировку в HTTP-заголовках для ускорения работы браузера. Это можно сделать простым добавлением следующего кода в заголовки:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4. Уменьшение кода
Если удалить HTML-комментарии, разделы CDATA, пробелы и пустые элементы, можно уменьшить размер страницы и уменьшить задержку загрузки.
Воспользуйтесь онлайн-средствами, например, Will Peavy minifier; если вы работаете с WordPress. Autoptimize оптимизирует и сжимает код, при этом он поддерживает CDN.
5. Удаление неработающих запросов
Битые ссылки приводят к ошибкам 404/410. Как результат — неработающие запросы. Исправьте битые URL-адреса (особое внимание обращайте на картинки). Воспользуйтесь онлайн-средством проверки битых ссылок или средством проверки ссылок WordPress бесплатно.
6. Указывайте на один ресурс с помощью одной ссылки
Из рекомендаций Google:
«Ресурсы, которые используются на нескольких страницах, должны иметь ссылки с одинаковым URL-адресом. Если ресурс используется на нескольких страницах/сайтах, которые линкуют друг друга, но располагаются на разных доменах или хостах, лучше использовать файл с одного хоста, чем выдавать этот ресурс отдельно из каждого родительского документа. В этом случае преимущества кэширования могут превысить полезные затраты на поиск DNS. Например, если оба сайта мойсайт.пример.ком и вашсайт.пример.ком используют один и тот же JS-файл, при этом мойсайт.пример.ком ссылается на вашсайт.пример.ком (и для этого в любом случае потребуется поиск DNS), проще использовать JS-файл только с моегосайта.пример.ком. В этом случае файл, скорее всего, будет уже в кэше браузера, когда пользователь перейдет на вашсайт.пример.ком.»
7. Уменьшение поисков DNS
Поиск DNS занимает приличное время, которое необходимо для сопоставления IP-адреса с именем хоста. Браузер не может сделать что-либо до завершения поиска. Уменьшение числа уникальных имен может увеличить время отклика. Свой поиск можно замерить с помощью Средств Pingdom.
c) CSS, JS и изображения
1. Размеры изображения
Браузер начинает формировать страницу до загрузки изображений. Указание размеров изображений позволяет правильно размещать их на странице. Если размеры не указаны, браузер «переплавляет» страницу еще раз после загрузки изображений. Используйте свойства height и width в тэге <img>.
2. Оптимизация изображений
Изображения могут содержать дополнительные комментарии и использовать бесполезные цвета. Размеры изображений должны быть минимальными, чтобы пользователи со слабым соединением «не парились» с их загрузкой. Старайтесь сохранять изображения в формате JPEG. Используйте сочетание клавиш CTRL+SHIFT+ALT+S, чтобы сохранить оптимизированное изображение в Adobe Photoshop, или используйте Yahoo! Smush.it. Либо если вы работаете в WordPress, установите плагин WP Smush.it.
3. Размещайте CSS в верхней части страницы, а JS — в нижней
Размещение файлов стилей в верхней части документа на странице мешает прогрессивному формированию страницы, так что браузеры заблокируют формирование, чтобы избежать повторной прорисовки элементов. В большинстве случаев пользователи будут смотреть на белую страницу, пока она не загрузится полностью. Также вы сможете создать стандартную веб-страницу в соответствии со W3-стандартами. А также, размещайте код javascript в конце страницы, и этому тоже есть объяснение.
Существуют и другие способы ускорения загрузки страницы, однако я постарался рассказать о наиболее важных, которыми даже профессиональные блоггеры иногда пренебрегают. Разумеется, скорость сайта не является основной целью, однако даже идеальный сайт с плохим временем загрузки не сможет пробиться в топ. Создавайте как можно более быстрый сайт для достижения реального результата.
И в конце еще разок: НЕ забывайте создавать резервные копии сайта, прежде чем вносить изменения, и не забывайте делиться своими советами или задавать вопросы в комментариях. :)
