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

Konstantin
Konstantin Ostrovsky
2018-09-25 15:02:00
7

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

Базовые требования: наличие мобильной версии, умение работы с 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, либо пропорционально изменить его. Таким образом мы значительно ускорим загрузку страницы. 

Внимание! Иногда бывают случаи, когда пользователю необходимо выводить большое изображение, что бы была возможность рассмотреть все детали. Для этого можно использовать два приема:

  • Lazy Load — это jQuery плагин, который позволяет осуществить отложенную загрузку изображений, что актуально для страниц с большим количеством изображений. Изображения загружаются по мере пролистывания страницы пользователем;
  • fancybox и подобные инструменты для увеличения изображения. Выводиться будет маленькое изображение, а по клику пользователь увидит изображение в полном размере.

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

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

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


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

  • Кеширование. В каждой CMS и фреймворке это делается по разному;
  • Скоращение ображений к базе. Зачастую этому способствует кэширование и правильная архитектура сервеного скрипта.

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

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

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

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