Как оптимизировать сайт по предложениям PageSpeed Insights

УрокиКомментариев нет

В данной статье коротко разберем основные вопросы касающиеся оптимизации сайта с помощью сервиса

PageSpeed Insights. Я опишу какие решения мне помогли для улучшения рейтинга сайта в глазах гугла.

1. Удалите код JavaScript, препятствующий отображению

Для решения данной проблемы можно перенести код js из шапки в подвал, а можно просто добавить атрибут «async«, который сделает асинхронную загрузку вашего js кода.

Пример:

<script async src=»my.js»>

Внимание! Проверьте что бы после внесения правок ваш код работал правильно, использование async не всегда является лучшим вариантом.

Данная доработка дала мне + 5% по рейтингу PageSpeed Insights.

2. Оптимизируйте работу CSS

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

Или перенести стили в подвал, но для нормального отображения составить маленький файл .css с основными стилями, что бы сайт не прыгал при загрузке. CSS стили долны быть обязательно выше js файлов.

Также возможно

3. Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

Важным моментом при переноси стилей и файлов js в подвал сайта(footer.php) является то что все стили .css обязательно! должны быть выше файлов js. В противном случае, гуглу будет все равно перенесли вы стили и js в подвал или нет. Весь css обязательно должен располагаться выше js кода, тем самым не мешая визуальному отображению сайта.

 4. Сократите(сжатия) CSS

Для сокращения(сжатия) можно использовать вот этот скрипт: http://www.phpied.com/cssmin-js/. Так же можно обойтись бес скрипта а сразу отдавать браузеру сжатый скрипт, сжати можно тут: http://tools.w3clubs.com/cssmin/. Это то же самый скрипт, только в работе. Он удалит лишние пробелы и переходы на новую строку. При этом помните что у вас должна храниться полная версия кода, которую можно будет отредактировать и опять сжать. Сжатую версию .css файла проблематично будет править.

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

Полезные ресурсы:

http://highloadtools.com/gzip  — проверяет включен ли на сервере gzip

http://last-modified.com/ru/if-modified-since.html  —  Проверка If-Modified-Since

 


Будь первым кто прокомментирует статью.

Добавить комментарий

Войти с помощью: