[FAQ] Ускоряем загрузку сайта (руководства и инструменты)

  • 107 Ответов
  • 74221 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

dimat84

Скорость наверно не так уж сильно влияет, есть очень популярные сайты с офигительно отстойной скоростью загрузки, так ниче, всё у них окей  ^-^
Например http://www.championat.com

*

Rival

Поборол почти все рекомендации Google
оптимизировал картинки - Google сам их исправил, только заменил,
включил кеш браузера,
ускорил ответ сервера: использовал днс яндекса и opcache в php,
для js на пробу включал async,
получил результат 65/100 и 86/100.
Остается из рекомендаций: удалите из верхней части страницы код JavaScript и CSS, но ума не могу приложить, как можно CSS убрать сверху. Не прокатит если все CSS сложить на поддомен и брать от туда?

*

Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
CSS стоит объединить  в идеальном варианте должен быть один файл. а вот js стоит поиграться

Коллеги, помогите с оптимизацией сайта. Бьюсь уже 3-й день и никак. Google page speed test, gtmetrix.com упорно не хотят видеть активированное на сайте gzip сжатие, кэширование и expiration. Пара картинок.

Enable sprite generator (в JHC Optimize) - ДА, PNG, Maximum



В .htaccess есть такое:

ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType image/jpeg "access plus 7 day"
ExpiresByType image/jpg "access plus 7 day"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
ExpiresByType text/css "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType text/js "access plus 6 months"


Всё равно как мёртвому припарки  :(

Сжатие:

Почему игнорятся js и CSS, не смотря на то, что сжатие включено (в настройках сервера Joomla в админке, в настройках JHC Optimize), а так же прописано в .htaccess:

<IfModule mod_headers.c>
   <FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Serve correct encoding type.
      Header append Content-Encoding gzip

      # Force proxies to cache gzipped &
      # non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>


Пробовал кучу разных вариаций, результат все время тот же:

« Последнее редактирование: 13.05.2015, 15:31:12 от 0xDEFACE »

*

Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
Спрайта нет же. Спрайт это когда несколько маленьких картинок объединены в одну
Наличие кода для сжатия в .htaccess не означает, что ваш хостинг поддерживает данные технологии
Читайте на форуме хостера или обращайтесь к нему
Рекомендую книжки почитать

Наличие кода для сжатия в .htaccess не означает, что ваш хостинг поддерживает данные технологии
Читайте на форуме хостера или обращайтесь к нему
phpinfo говорит, что модуль mod_expires доступен, а mod_headers - нет. Получается все соль в этом? Надо попросить активировать mod_headers?

phpinfo говорит, что модуль mod_expires доступен, а mod_headers - нет. Получается вся соль в этом? Надо попросить активировать mod_headers?

*

ShamilHan

Если Вы закончили создание сайта и более его не будете редактировать (css и т.п.), то вот что требуется вставить в файл .htaccess

##включение кэш
<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/css application/json

AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript

AddOutputFilterByType DEFLATE text/xml application/xml text/x-component

</IfModule>

<IfModule mod_expires.c>
    # Enable expires
    ExpiresActive On

    # Default a cache expiration
    ExpiresDefault "access plus 10 month"

    # Images
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"

    # CSS, JavaScript
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType text/javascript "access plus 1 year"
</IfModule>
## конец кэш

*

kuzvik

Удалять не надо.
Ну и не забыть пере направление сделать в .htaccess с *.css на *.css.gzip и *.js на *js.gzip
RewriteRule ^(.*).css $1.css.gzip [L,QSA]
RewriteRule ^(.*).js $1.js.gzip [L,QSA]


Почему то не работает этот способ, подскажите а что в исходном коде страницы должно отображаться файлы .css и js или  все таки файлы  CSS.gz и js.gz ? подскажите какие еще есть способы перенаправления на сжатые файлы?

*

Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
Не так делать точно не надо. Может это и было актуально для кого то когда то, но не сейчас. Это не самое лучшее решение.
Более если вы пришли к данной проблеме, то стоит искать большинство ошибок в архитектуре, поиск лишнего, то от чего может стоит избавится

*

kuzvik

Не так делать точно не надо. Может это и было актуально для кого то когда то, но не сейчас. Это не самое лучшее решение.
Более если вы пришли к данной проблеме, то стоит искать большинство ошибок в архитектуре, поиск лишнего, то от чего может стоит избавится

Спасибо за ответ! Вот в архитектуре я точно полный "0". А про ускорение загрузки недавно начал задумываться. Просто если такой вариант  со сжатием CSS и js файлов -прокатывал ранее, почему не воспользоватся им и сейчас?


*

filat010

там же есть спецмодуль
color-trade.ru

Установил недавно модуль JHC Optimize как бы я его не настраивал максимум что я мог добиться это показатель 72/100 с мобильной версией и 86/100 с ПК, но при таком раскладе все стили у меня просто напросто не отображались, а также не работали .js
Максимального показателя, которого я добился на одном из сайтов следующий см.скриншот



В файл .htaccess запихнул такую портянку
Спойлер
[свернуть]

*

srg

Добрый день, делаю оптимизацию по рекомендациям developers.google.com/speed/pagespeed/insights  
Пытаюсь включить кеш браузера для статических файлов через .htaccess, для картинок не включается?!
Модули аппача mod_expires.c mod_headers.c mod_setenvif.c установлены и активны

Пробовал способ 1:

Код
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 0 seconds"
ExpiresByType application/javascript "access plus 1 hour"
ExpiresByType text/javascript "access plus 1 hour"
ExpiresByType text/css "access plus 1 hour"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/x-javascript "access 1 hour"
ExpiresByType image/gif "access plus 1 hour"
ExpiresByType image/jpeg "access plus 1 hour"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/jpg "access plus 1 hour"
ExpiresByType image/x-icon "access 1 hour"
ExpiresByType application/x-shockwave-flash "access 1 hour"
</IfModule>
 
# Cache-Control
<ifModule mod_headers.c>
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=60, public"
</filesMatch>
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=60, public, must-revalidate"
</filesMatch>
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=0, private, must-revalidate"
</filesMatch>
</ifModule>


способ 2

Код
FileETag MTime Size

ExpiresActive on
ExpiresDefault "access plus 1 year"

#Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE
<IfModule mod_setenvif.c>
       BrowserMatch "MSIE" force-no-vary
       BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>

В обоих случаях кеш cach-control для jpg и png не устанавливается в заголовках, Google пишет для всех jpg и png "не указан срок действия"
Где, что еще копать?

В настройках Joomla включите кэширование, если не включено, а так же активировать системный плагин кэша.

Очень страно конечно.

Задайте вопрос хостеру, если все сделано правильно.
Подпись - зло и лишний трафик

*

neogeek

Делал вот такой сайт - https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fvilladonjuan.gr&tab=desktop
Может кому пригодится, содержание htacces:
Код
Options +FollowSymLinks

RewriteEngine On

RewriteCond %{QUERY_STRING} base64_encode[^(]*\([^)]*\) [OR]

RewriteCond %{QUERY_STRING} (<|%3C)([^s]*s)+cript.*(>|%3E) [NC,OR]

RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]

RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2})

RewriteRule .* index.php [F]

RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

RewriteCond %{REQUEST_URI} !^/index\.php

RewriteCond %{REQUEST_URI} /component/|(/[^.]*|\.(php|html?|feed|pdf|vcf|raw))$ [NC]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule .* index.php [L]

RewriteCond %{HTTP_HOST} !^vashsite.ru$
RewriteRule ^(.*) http://vashsite.ru/$1 [R=301,L]

RewriteCond %{HTTP_HOST} ^www\.vashsite\.ru$ [NC]
RewriteRule ^(.*)$ http://vashsite.ru/$1 [R=301,L]

RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
RewriteRule ^index\.php$ http://vashsite.ru/ [R=301,L]

AddDefaultCharset utf-8

# compress text, HTML, javascript, CSS, xml:
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
 
# Or, compress certain file types by extension:
 
SetOutputFilter DEFLATE

<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 2 days"
# Включаем кэширование изображений и Flash на месяц
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# Включаем кэширование CSS, javascript и текстовых файлоф на одну неделю
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
# Включаем кэширование HTML и htm файлов на один день
ExpiresByType text/html "access plus 43200 seconds"
# Включаем кэширование XML файлов на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
<ifModule mod_headers.c>
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, private, must-revalidate"
</filesMatch>
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800, private, must-revalidate"
</filesMatch>
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</filesMatch>
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=604800, private, must-revalidate"
</filesMatch>
</ifModule>

<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>
PS Включено стандартное кеширование, обработчик - файл
Показатели сайта 90/100 на мобильных 96/100 на десктопах
« Последнее редактирование: 06.11.2015, 15:15:21 от neogeek »

*

srg

В настройках Joomla включите кэширование, если не включено, а так же активировать системный плагин кэша.

Очень страно конечно.

Задайте вопрос хостеру, если все сделано правильно.

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

*

Gelik

У меня тоже не получалось включить gzip через .htaccess, поэтому решил почитать, как сделать это через настройку сервера, на сервере стоит Ngnix, вот что сделал:

Открываем конфиг nginx (/etc/nginx/nginx.conf), я тупо скачал этот файл из панели управления сервера, отредактировал, а потом залил обратно.

Дальше или вписываем, или раскомменчиваем следующие строки:

Код
http {
<...>

gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
}

Здесь мы включаем сжатие в контексте "http" (первая строка), но можно делать и в других контекстах: "server", "location", "if in location". Я сделал только в "http" и не заморачивался с: "server", "location", "if in location".

Теперь небольшие пояснения:

    gzip on - включает поддержку gzip в целом;
    gzip_disable "msie6" - отключает сжатие для эксплорера 5.5 и 6, т.к. не поддерживается;
    gzip_buffers - устанавливает размер буффера, в котором хранится сжатая информация;
    gzip_complevel - уровень сжатия, 1 - минимальное, 9 - максимальное;
    gzip_proxied any - сжимать данные ответов для proxy-серверов;
    gzip_types - MIME-types ответов, которые должны быть сжаты;
    gzip_vary on - включает добавление в ответ заголовка "Vary: Accept-Encoding", для IE 4-6 это приведёт к некешированию данных из-за бага.

После редактирования не забываем перезагрузить сервер!

У меня в nginx.conf было просто прописано
Код
gzip on;
, я дописал недостающие снизу строки и вуаля, https://developers.google.com перестал писать "Включите сжатие" и добаввил +10 очков моему сайту :)