Блог

Хорошая скорость загрузки сайта – один из факторов ранжирования в Google с 2010 г.  Она увеличивает желанные конверсии, повышает позиций сайта в поисковой выдаче и, конечно, влияет на психику пользователей. И несмотря на то, что на дворе уже 2015 г., у каждого владельца сайта – своё представление об идеальной скорости: для одних это менее 1 секунды, для вторых 5 секунд, а для других все 10. Кто же прав?


Пусть все точки над «i» расставят исследования:


1. Akamai Technologies в 2009 г. провела исследование по скорости загрузки сайта и получила следующие результаты:


•    в 47% случаев пользователи готовы ждать загрузки страницы в течение двух секунд


•    три секунды – это край. 40% пользователей уходят со страницы по истечении этого времени 


•    52% опрошенных заявили о том, что скорость загрузки влияет на их отношение к компании и сайту. Угадайте, как именно?


2. По данным The Web Performance Division of Compuware Gomez и Aberdeen Group:


•    задержка в открытии страницы на одну секунду снижает конверсию на 7%


•    увеличение скорости загрузки страницы  с двух до восьми секунд повышает показатель отказов на 33% 


•    лишь 12% пользователей готовы вернуться на медленный сайт


3. Исследования QuBit и Rackspace


•    лишь 62% британских пользователей готовы продолжить работу с сайтом, который загружается более 10 секунд


•    около 75% пользователей уходят с мобильной версии сайта, скорость загрузки которой превышает 5 секунд


 

7 проверенных способов увеличить скорость загрузки сайта

 


1. Работайте над весом страницы


Чем меньше вес страницы, тем быстрее она загружается. Всё просто. На этом поприще крупнейшие отечественные интернет-магазины добились значительных успехов. По данным исследования компании «1С-Битрикс»,  среднее время загрузки таких сайтов составляет 1,6 секунды.  Это крупные сайты. А за счёт чего можно увеличить производительность конкретно вашего сайта? Мы советуем начать с использования компрессии HTTP + GZIP.


GZIP – технология, которая минимизирует размер HTTP-запросов до 70% от исходного объёма данных. Включить её можно тремя способами:


1.1. Добавить следующий код в .htachess 

 
# compress text, 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>


1.2. Добавить в верхнюю часть HTML-кода следующее:


 <?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>


1.3. Установить GZIP-плагин на вашу CMS

 

1.4. Используйте заголовки Expires. 


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



Sprite.png



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


1.5. Удаляйте неиспользуемые стили и скрипты


Прежде чем загружать всё на  хостинг – убедитесь в том, что размер ненужного HTML-кода уменьшен настолько, насколько это возможно. Либо удалите его вовсе.

 

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

 

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


•    используйте формат JPEG вместо PNG.  Разницы в качестве  вы практически не увидите, зато увидите разницу в скорости загрузки и размере. Сервисы TinyPNG и IMGopt (Mozilla Firefox) для сжатия PNG вам в помощь. 


PNG.png


PNG (16,7 KB)


JPEG.jpg


JPEG (7,5 KB)


 

•    уменьшайте размеры изображений. Например, не стоит сразу загружать исходник с вашей новенькой зеркальной камеры на сайт . Обработайте их  фоторедактором.


•    подчищайте мета-атрибуты изображений. Кому интересна информация об авторах, оценках или фоторедакторе?



Meta-атрибуты.jpg



3. Ускоряйте генерацию страниц


Быстрая генерация страниц в окне браузера – залог хорошего настроения ваших пользователей и подобающего отношения поисковиков. Например, в интернет-магазине Wildberries.ru время загрузки страницы составляет всего 0.046 с (исследование  компании «1C-Битрикс» 2014 г.). 


Слагаемые быстрой генерации страницы:


•    установка веб-сервера nginx


•    настройка сервера в соответствии с рекомендациями используемой CMS. Как правило, вся информация содержится в руководствах по настройке


•    использование встроенной функции кэширования в CMS


•    использование PHP-акселераторов. Например, Alternative PHP Cache, eAccelerator, PhpExpress и др.


Speed.png


 

4. Сокращайте JavaScript и CSS


Уменьшение веса CSS-стилей и Java-скриптов помогает порой в разы увеличить скорость загрузки страниц сайта. Для этого используйте специальные компрессоры:


• CSS-компрессор


• JavaScript-компрессор


Дополнительно:  


•    избегайте использования @import. Это правило позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. Но в то же время файлы, загруженные с помощью @import, нельзя загрузить в качестве основного стиля, что увеличивает время загрузки страницы. Альтернатива - <link> теги.


•    перемещайте CSS-стили во внешний файл. Он загружается в кэш браузера пользователя всего один раз, а, следовательно, делает загрузку быстрее. 


5. Уменьшайте число запросов браузера


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


•    объединение CSS-стилей или JavaScript в один файл – верный способ устранить лишние HTTP-запросы. Вместо множества подключений к серверу – запрос к одному файлу. 


•    использование CSS-спрайтов – файлов, содержащих коллекции изображений. Актуально тогда, когда вам необходимо загрузить на сайт множество маленьких иконок, но не хочется перегружать код. Вот, кстати, и сервис для их создания. 


6. Минимизируйте редиректы


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


Redirect.png


 

7. Используйте технологию CDN


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

 

 

 

 

 

 


Возврат к списку