Получаем хороший бал от google

10/02/2018
Константин Островский

Хороший бал оценки сайта позволит получить больше трафика из поисковика и повлияет на вашу позицию в поисковой выдаче.

Базовые требования: наличие мобильной версии, умение работы с php и базовые знания о работе nginx.

Для проверки результата следует использовать специальный инструмент от google. Тык

Когда вы добьетесь удовлетворительного результата, значки оценки загорятся зеленым светом. Что бы удовлетворять требованиям google, сайт должен набрать не менее 80 из 100 баллов.

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

Хорошим результатом считается бал PageSpeed Score более 90% на gtmetrix.

 

 

Для того что бы получить хороший бал Вам потребуется:

1) Включить кеширование ресурсов через nginx. Когда конечный пользователь запрашивает файлы с сервера, в заголовках указывается время их кэширования в браузере пользователя. Эти заголовки не всегда передаются, это скорее недостаток Вашего хостинга. Для того что бы включить кэширование нужно добавить в файл .htaccess, находящийся в корневой директории сайта(чаще всего это public_html) следующий код:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/vnd.ms-fontobject "access plus 916000 seconds"
ExpiresByType application/x-font-ttf "access plus 916000 seconds"
ExpiresByType application/x-font-opentype "access plus 916000 seconds"
ExpiresByType application/x-font-woff "access plus 916000 seconds"
ExpiresByType image/svg+xml "access plus 916000 seconds"
</ifModule>

2) Настроить ресайз картинок под необходимые размеры. Иногда картинки выводятся в полном размере и это существенно замедляет загрузку страницы. В различных фреймворках и CMS ресайз(изменение размера картинок) делается по разному. Размер картинок должен быть оптимальный, не больше чем от того требует дизайн. К примеру, у нас есть новостной листинг, где у каждой статьи выводится превью. Размер блока с превью не привышает 400х200px, но изображение размером 1920х1080. Следует изменить размер изображения на 400х200, либо пропорционально изменить его. Таким образом мы значительно ускорим загрузку страницы. 
Внимание! Иногда бывают случаи, когда пользователю необходимо выводить большое изображение, что бы была возможность рассмотреть все детали. Для этого можно использовать два приема:

3) Оптимизация css,html,javascript кода. Основным из требований google является подключение javascrip непосредственно в footer, а css в head. Если следовать этому совету, то сначала будет отображен документ, а через некоторое время загрузятся скрипты(javascript). Таким образом рендеринг страницы будет происходить быстрее и пользователь быстрее увидит что-то кроме белого экрана и иконки загрузки броузера.

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

4) Сокращение количества изображений, благодаря объединению в спрайты. Спрайт - изображение, зачастую в формате png, в которм собраны все мелкие элементы декора сайта и подобные изображения. Этот прием сократит количество загружаемых изображений. Пример:

5) Сокращение скорости ответа от сервера. Добиться быстрого ответа от сервера можно двумя способами:

Проверить скорость загрузки можно при помощи веб-инспектора, на вкладке network->doc. Хорошим резульатом можно считать ~300ms.

Вот и все! После выполнения этих действий рекомедуется пройти проверку на google и gmetrix для получения дополнительных советов и проверки резульата.

В качестве глубокого анализа можно использовать специальный инструмент в Chrome - Perfomance panel. Здесь Вы можете посмотреть какое содержимое больше всего тормозит скорость загрузки страницы.

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