После проведенного мной анализа веб-сайта setalks.ru я решил написать несколько советов, чтобы уменьшить время загрузки веб-страниц настолько, насколько это возможно. Любая поисковая система выше всего ставит интересы пользователей, а хорошая скорость загрузки веб-сайта скажется на общем качестве этого веб-сайта, что повысит уровень удовлетворенности пользователей, ведь все они заслуживают высокой скорости загрузки страниц того или иного веб-сайта. Несколько следующих советов не будут новыми для setalks.ru, но я все равно уделю им немного внимания, поскольку они весьма полезны.
Представители Google говорят: «Эксперименты показали, что увеличенная задержка веб-поиска от 100 до 400 миллисекунд способна уменьшить число поисковых запросов одного пользователя на 0,2-0,6% в день. Помимо этого, пользователи не так часто прибегают к веб-поиску, если долго подвергаются данному эффекту. При более длительных задержках потеря поисковых запросов сохранится на определенный промежуток времени, даже если задержки вернутся на свой прежний уровень».
Я перечислю множество факторов (+ несколько полезных советов от Yahoo и Google).
Важно: обязательно сделайте резервную копию перед тем, как начать!
1. Хостинг
Выбор подходящего хостинга – это первый шаг в процессе запуска веб-сайта. Отличным вариантом будет хостинг с профессиональной конфигурацией.
1.1. Способ кэширования веб-браузера
Expires-заголовки сообщают веб-браузеру о том или ином ресурсе на веб-сайте: необходим ли запрос к источнику для загрузки этого ресурса или он может быть извлечен из кэша веб-браузера? Если Вы установите expires-заголовки для таких ресурсов, как JPEG-изображения, то они будут храниться в кэше веб-браузера. Если посетитель вернется на веб-страницу, то она будет загружаться быстрее, поскольку все изображения сохранятся в веб-браузере.
1.2. Включите Keep-Alive
Keep-Alive – это сигнал, обладающий заданным интервалом. Он очень важен для Интернета. Если сигнал отправлен, а ответ не поступил, то ссылка будет считаться неисправной, а данные начнут передаваться иным путем до тех пор, пока ссылка не восстановится.
Keep-Alive позволит TCP-соединениям остаться в живых, что, в свою очередь, позволит снизить задержки для последующих поисковых запросов. Таким образом, обратитесь к Вашему хостинг-провайдеру и попросите подумать об этом! Большинство хостинг-провайдеров отключают Keep-Alive, поскольку это дополнительная функция.
1.3. Включите Gzip
* На рисунке изображен процесс Gzip-сжатия.
Представители Yahoo говорят: «Gzip – это наиболее популярный и наиболее эффективный метод сжатия в настоящее время, которому под силу уменьшить размер ответа на 70%. Около 90% современного Интернет-траффика проходит через веб-браузеры, что поддерживают технологию Gzip-сжатия».
Gzip уменьшит не только размер HTTP-ответа, но и время отклика. Это довольно-таки простой способ, позволяющий уменьшить размер веб-страницы в целом. Вы включите Gzip, если добавите следующий код в свой .htaccess:
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
А еще есть такой вариант (Gzip лишь для определенных расширений):
<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.
1.1. Редиректы с целевых веб-страниц и процесс кэширования
Мобильная веб-страница, скорее всего, перенаправит пользователя на другой адрес (к примеру, с www.vk.com на m.vk.com). Таким образом, редиректы, что будут кэшироваться, могут помочь ускорить загрузку веб-страницы в следующий раз, если пользователь решит к ней вернуться. Используйте 302 редирект (User-Agent + Cache-Control) с однодневной жизнью в кэше. Таким образом, будут перенаправляться только посетители, что зашли на веб-сайт с мобильного устройства.
Используйте CDN
* На рисунке изображена работа CDN-хостинга, а точнее – статистика загрузок с различных веб-серверов, в зависимости от региона посетителя.
CDN – это набор веб-серверов, что локально распределены для более эффективной доставки контента пользователям. Веб-сервер выбирают для доставки контента конкретному пользователю, как правило, на основе непосредственной близости к сети. К примеру, еще могут выбрать веб-сервер с наиболее стабильной сетью или веб-сервер с наименьшим временем отклика.
2. Элементы контента
Поскольку Вы не имеете полного доступа к хостингу, элементы контента являются наиболее важной вещью, которой Вы в силах манипулировать.
2.1. Сведите к минимуму количество редиректов
Иногда для указания места нового расположения адреса, отслеживания кликов, соединения некоторых различных частей веб-сайта или резервации нескольких доменов, Вам необходимо перенаправить веб-браузер с одного адреса на другой. Перенаправления вызывают дополнительный HTTP-запрос и увеличивают задержку, поэтому сохраняйте перенаправления, что являются незаменимыми и необходимыми с технической точки зрения.
Рекомендации Google:
- запрещен редирект с известных веб-страниц на другой адрес. Вашему приложению необходимо обновлять адреса, если веб-ресурсы изменили место своего расположения;
- разрешено не более одного редиректа, чтобы добраться до того или иного веб-ресурса. Например, если C – это целевая веб-страница, а A и B – точки старта, то A и B необходимо перенаправить непосредственно на C, иными словами, без промежуточного перенаправления с A на B и только потом на C;
- сведите к минимуму количество дополнительных доменов, что являются причиной всех редиректов, но в действительности пользы не приносят. Иногда есть соблазн для создания перенаправления с нескольких доменов и резервации целого пространства таких доменов, чтобы исправить ошибочный ввод адреса пользователем (опечатка/некорректный адрес). Как бы там ни было, если Вы дадите своим пользователям понять, что они могут попасть на Ваш веб-сайт с нескольких доменов, то в будущем есть вероятность того, что Вам придется покупать все больше и больше дорогостоящих доменов, чтобы остановить мошенников, выдающих себя за Вас.
2.2. Удалите строки запросов от статических веб-ресурсов
Вы не можете кэшировать адреса с «?», даже с помощью Cache-Control. Вопросительный знак по действию аналогичен команде «Ctrl + F5». Используйте строки запросов лишь для динамических веб-ресурсов.
2.3. Укажите набор символов
Укажите набор символов в HTTP-заголовках, чтобы ускорить рендеринг веб-браузера. Для этого необходимо просто добавить следующий код в Ваш заголовок:
<meta http-equiv="Content-Type" content="text/html; charset2=utf-8">
Важно: несколько CMS используют функции для набора символов (например, WordPress с их <?php bloginfo('charset'); ?>). Если Вы уверены в собственном наборе символов, то стоит заменить им PHP-функции. Это сведет к минимуму размер запроса, поэтому старайтесь использовать HTML вместо PHP везде, где это возможно.
2.4. Минимизируйте размеры кодов
Удаляя HTML-комментарии, CDATA-секции, пробелы и множество пустых элементов, Вы уменьшите размер веб-страницы, уменьшите сетевую задержку и ускорите время загрузки веб-страницы.
2.5. Избегайте плохих поисковых запросов
* На рисунке изображена разница во времени и качестве загрузки между оптимизированной веб-страницей и веб-страницей с плохими поисковыми запросами.
2.6. Подача ресурсов от последовательных адресов
Рекомендации Google:
Убедитесь, что все ссылки на ресурсы, что совместно используются несколькими веб-страницами, обладают одинаковым адресом. Если ресурс общий для нескольких веб-страниц/веб-сайтов, что ссылаются друг на друга, но размещены на разных доменах, то лучше всего, чтобы ресурс подавался просто от хостинга, чем передавался от хостинга к каждой единице контента. В подобных случаях преимущества кэширования могут взять вверх над DNS-запросами.
Например, если оба веб-сайта mysite.example.com и yoursite.example.com используют одинаковый JS-ресурс и есть ссылка с mysite.example.com на yoursite.example.com (без DNS-запроса не обойтись при любых раскладах), то лучше производить подачу JS-ресурса только от mysite.example.com. Таким образом, ресурс уже будет в кэше веб-браузера, когда пользователь зайдет на yoursite.example.com!
2.7. Сократите количество DNS-запросов
DNS-запросы отнимают много времени на поиски IP-адреса для хоста. Веб-браузер бессилен до тех пор, пока этот поиск не будет завершен. Уменьшив количество уникальных хостов, можно увеличить время отклика. Чтобы узнать во всех подробностях, что «тормозит» загрузку Вашего веб-сайта – Pingdom Tools.
3. CSS, JS и изображения
3.1. Установите размеры изображений
Принцип отображения веб-страницы веб-браузером: сначала сама веб-страница, а потом уже загружаются изображения. Установив размеры изображений, Вы избавите веб-браузер от лишней работы – необходимо в <img>-элементах использовать атрибуты «height» и «width».
Важно: не устанавливайте размеры для мгновенного масштабирования изображений – пользователю по-прежнему придется загружать исходный размер при любых раскладах.
3.2. Оптимизируйте изображения
* На рисунке изображен процесс оптимизации изображения.
Изображения могут содержать парочку дополнительных комментариев или использовать палитру бесполезных цветов. Сводя размеры изображений к минимуму, Вы окажете огромную помощь пользователям с медленным Интернетом. Постарайтесь сохранять изображения в JPEG-формате. Используйте «Ctrl + Shift + Alt + S» для сохранения оптимизированного изображения в Adobe Photoshop или используйте Yahoo! Smush.it, а для WordPress создан специальный плагин – Smush.it.
3.3. CSS – вверх, JS – вниз
CSS в заголовках веб-страниц будут препятствовать прогрессивному рендерингу, поэтому веб-браузеры начнут блокировать его, чтобы избежать необходимость в перерисовке элементов веб-страницы, чтобы пользователи не столкнулись с абсолютно белой веб-страницей, пока она не загрузится полностью. Таким образом, веб-страницы будут соответствовать W3-стандартам. По этой же причине необходимо разместить JS в нижней части веб-страницы.
Есть еще много различных методов ускорения загрузки веб-страниц, но я попытался рассказать Вам о наиболее важных из них. Конечно же, скорость загрузки веб-сайта – это не цель №1, но даже идеальному веб-сайту с плохим временем загрузки добиться успеха будет нелегко!