Ускорение сайта, как подружить сайт с PageSpeed Insights


Рубрика: Opencart -> Создание сайта
Метки: | | | |
Просмотров: 170

Как ускорить сайт

Была уже статья на блоге, написанная моим коллегой. Я просто дополню немного. Примером будет Opencart, хотя эти методы актуальны для ЛЮБОГО сайта.
Итак, сделали сайт и сразу идёте на PageSpeed Insights, проверяете и с огорчением видите какую-то жёлто-оранжевую невысокую оценку скорости, типа 75.
Ниже идёт куча рекомендаций. Рассмотрим и устраним некоторые. Самые, наверно, ключевые рекомендации Используйте кеш браузера и Включите сжатие. Исправить просто, это расписано на миллионах сайтов: в корне сайта, мол, есть файл .htaccess. Качаем его к себе на компьютер, открываем блокнотом или чем Вы там пользуетесь и правим.
И тут куча разночтений. Давайте так, я Вам просто даю код, который нужно добавить в .htaccess. Вы его туда добавляете, сохраняете, загружаете назад на сайт, радуетесь и бежите за пивом (для меня).
 

  # сжатие text, html, javascript, css, 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>

#Сжимаем компоненты сайта путем включения Gzip

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

# remove browser bugs

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

 

# кеширование в браузере на стороне пользователя

# Включаем кэш в браузерах посетителей

<ifModule mod_headers.c>

    # Все html и htm файлы будут храниться в кэше браузера один день

    <FilesMatch "\.(html|htm)$">

        Header set Cache-Control "max-age=43200"

    </FilesMatch>

    # Все css, javascript и текстовые файлы будут храниться в кэше браузера одну неделю

    <FilesMatch "\.(js|css|txt)$">

        Header set Cache-Control "max-age=604800"

    </FilesMatch>

    # Все флэш файлы и изображения будут храниться в кэше браузера один месяц

    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">

        Header set Cache-Control "max-age=2592000"

    </FilesMatch>

    # Отключаем кеширование php и других служебных файлов

    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">

        Header unset Cache-Control

    </FilesMatch>

</IfModule>

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access plus 1 week"

ExpiresByType image/jpeg "access plus 1 week"

ExpiresByType image/gif "access plus 1 week"

ExpiresByType image/png "access plus 1 week"

ExpiresByType text/css "access plus 1 week"

ExpiresByType application/pdf "access plus 1 week"

ExpiresByType text/x-javascript "access plus 1 week"

ExpiresByType application/x-shockwave-flash "access plus 1 week"

ExpiresByType image/x-icon "access plus 1 week"

ExpiresDefault "access plus 1 week"

</IfModule>

## EXPIRES CACHING ##

 
Следующая рекомендация Оптимизируйте изображения
Тут либо фотошопом, либо через сервисы compressjpeg.com/ru и compresspng.com/ru. А если уж очень много изображений, то скачайте бесплатную программу FileOptimizer с сайта http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer. Установите её, запустите и всю папку с картинками мышью на неё кидайте, только учтите, что она файлы перезапишет, сделайте резервную копию.
Дальше глянем на пункт Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Здесь не всё так просто. В нашем примере Opencart. Если открыть файл header.tpl пути \catalog\view\theme\шаблон\template\common, то увидим целую кучу скриптов js стилей css
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
и ниже:
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
Начинаем по одному вырезать их и вставлять в footer.tpl перед </body></html> Вырезали- вставили, погоняли сайт, для Opencart не забываем обновлять модификаторы. Сразу скажу, не всё гладко будет. Скажем 
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
Вы вряд ли перенесёте, перестаёт работать сайт нормально.

По пункту Сократите JavaScript

Просто погуглить сервис сжатия js и также по одному сжимать, обновлять модификаторы и смотреть. В общем результат будет, даю 146%
Добавлю ещё, что я вырезаю из основного файла стилей css (для Opencart это stylesheet.css) все стили для верха страницы, то бишь для header, включаю стили для верхнего меню, если оно выше шапки и ДО основного меню, которое обычно после header идёт. Ну здесь от шаблона зависит. Вырезав, я вставляю все эти стили в отдельный файл и прогоняю его через сервис сжатия, использую максимальное сжатие, что бы стал в одну строчку.
А потом из этого файла все эти сжатые стили вставляю в header, заключив в тег <style>код css</style>  Для Opencart это выглядит так (самый верх файла header.tpl)
 <!DOCTYPE html>
<!--[if IE]>Ваш браузер устарел и Вас будут доступны не все функции магазина<![endif]-->
<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8">Ваш браузер устарел и Вас будут доступны не все функции магазина<![endif]-->
<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9">Ваш браузер устарел и Вас будут доступны не все функции магазина<![endif]-->
<!--[if (gt IE 9)|!(IE)]>Ваш браузер устарел и Вас будут доступны не все функции магазина<!-->
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $title;  ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
<style>.media .fa{border:2px solid #7a0202;border-radius:100px;color:#7a0202;display:inline-block;font-size:3.0rem;padding:6px 7px;}.media span{font-size:2.6rem;color:#b81e0d;font-weight:600;text-align:left;text-transform:uppercase;}.media{font-size:1.4rem;line-height:1.3;text-align:left;text-transform:uppercase;margin-bottom:5px;background-color:#f5f5f5;padding:8px 0;}.media-left,.media > .pull-left{padding:5px 15px 0 10px;}.info{margin-top:10px;}#top{border-bottom:1px solid #e2e2e2;padding:1px 0px 0px 0;margin:0 0 20px 0;min-height:30px;}#top .container-fluid{padding:0 20px;}#top .list-inline{margin-bottom:5px;margin-top:0;}#top .fa{color:#b81e0d;}#top #form-currency .currency-select,#top #form-language .language-select{text-align:left;}#top #form-currency .currency-select:hover,#top #form-language .language-select:hover{text-shadow:none;color:#ffffff;background-color:#229ac8;background-image:linear-gradient(to bottom, #23a1d1, #1f90bb);background-repeat:repeat-x;}#top .btn-link, #top-links li, #top-links a{color:#000000;cursor:pointer;font-size:0.9em;text-decoration:none;text-transform:uppercase;}#top .btn-link:hover, #top-links a:hover{color:#444;}#top-links .dropdown-menu a{text-shadow:none;}#top-links .dropdown-menu a:hover{color:#FFF;}#top .btn-link strong{font-size:14px;line-height:14px;}#top-links{padding-top:6px;}#top-links a + a{margin-left:15px;}#logo{margin:0 0 10px 0;}</style>
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:type" content="website" />
 и так далее...
Для любого сайта это даст ощутимый прирост скорости, если в самом начале загрузки сайта стили верха страницы будут грузиться сразу же.
 Вот, собственно, что хотел сказать. Будет время и желание, дам более развёрнутый и уже сложный материал.
 Ну и хорошей музыки кусок, настоящей музыки от Бет Харт
 
Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)