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

В данной статье рассмотрим способ оптимизаций скорости сайта.

У компаний Google есть инструмент для проверки скорости: PageSpeed Insights.

Посмотрим как можно каждый совет от Google применить на свой сайт.

Используйте кеш браузера

Включить кэширование данных можно при помощи добавления следующих строчек в файле .htaccess вашего сайта:

# Включаем кэш в браузерах посетителей
<ifModule mod_headers.c>
    # Все html и htm файлы будут храниться в кэше браузера 43200 секунд
    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=43200"
    </FilesMatch>
    # Все css, javascript и текстовые файлы будут храниться в кэше браузера 604800 секунд (одну неделю)
    <FilesMatch "\.(js|css|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    # Все флэш файлы и изображения будут храниться в кэше браузера 604800 секунд (одну неделю)
    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    # Отключаем кеширование php и других служебных файлов
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header unset Cache-Control
    </FilesMatch>
</IfModule>

При включение кэша нужно учитывать что на серверах Apache это не работает. Например:

  • Хостинг McHost использует сервера nginx. (можно включить кэш)
  • Хостинг Reg.ru использует сервера Apache. (нельзя использовать кэш, читать тут)

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

Это проблему я труднее всего решил.
Но всё очень просто.
Нужно просто код CSS и JavaScript писать прямо в файл. А не подключать их.
Но тут тоже можно схитрить.
Если подключать их через PHP на сервере то результат будет тот-же.
Например у нас есть файл CSS:

body {
   font-family: Arial;
}
/* много много много стилей */

Его нужно сохранить с расширением .php и добавить тэги <style>

<style>
body {
   font-family: Arial;
}
/* много много много стилей */
</style>

И где нам понадобиться подключать стили то будем пользоваться инструкцией include или require.

Так-же нужно поступить и с файлами JavaScript.

Сократите время ответа сервера

Тут есть несколько влиятельных факторов.

  • Хостинг, это не главное но есть сервера быстрые соответственно и Ваш сайт быстрее будет работать. Рекомендую McHost у них сервера на SSD.
  • SQL запросы. Нужно стараться не выбирать лишнюю информацию. Вообще не должно быть ничего лишнего. Не забываете про оператор LIMIT, он полезен при оптимизаций. Так-же лишних колонок из таблицах выбирать не нужно.
  • Если это возможно не подключайте фалы из внешних серверах.

Включите сжатие

Это можно сделать при помощи добавления следущего кода в .htacces

# сжимаем html, javascript, css, text, xml
<ifModule mod_deflate.c>
     AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Но опять-же не работает на все хостинги.

Valeriu :