Перейти к содержимому


Фотография
* * * * - 3 Голосов

Ускоряем ресурс с Jbzoo часть 1/3

рецепт оптимизация ускорение оптимизация ускорение css javascript cdn

Сообщений в теме: 23

#1 ripcord

ripcord

Отправлено 10 October 2013 - 10:17

*
Популярное сообщение!

Привет!
 
Сеть переполнена толковыми, но часто разрозненными или слишком "общими" советами по увеличению быстродействия веб-ресурсов. Судя по темам на форуме и эпизодическим наблюдениям за открытыми сайтами с Jbzoo в основе, запрос на subj будет только расти.
 
Этот пост первый из запланированных трех, задуманных как перечень действий для неизбежного ускорения наших ресурсов на Jbzoo, экономии нервов наших юзернэймов и более лучшей элитарности нашего чатика в целом )
 
В этом посте намеренно использовались только методы, доступные пользователю любого уровня подготовки.
Все описанные действия были проведены успешно на тестовом сайте, расположенном по адресу
www.ripcord.ru
На пустой виртуальный хостинг, в его корневую директорию был залит архив
jbzoo_demo_2.0.2.zip 
с последней доступной версией Jbzoo и демонстрационными данными от разработчиков.
После разархивирования и перехода по адресу
www.ripcord.ru/installation/
запустился процесс восстановления данных. Процесс незамысловатый, напоминает стандартную установку Joomla.
По окончании удаляем папку /installation и проверяем наш ресурс. На этом этапе он должен выглядеть как оригинал по адресу
demo.jbzoo.com/
Проверяем доступ в административную панель и функционирование публичных разделов ресурса.
Идем на сайт
gtmetrix.com/
и делаем бенчмарк нашего сайта.
Для сохранения результатов, полезных опций и других плюшек разумно завести там регу.
 
Полученный результат:
 
1381383256-aa0d064889828eade60c0f73d941d
Подробный отчет в PDF
 
 
 
Наши действия:
1. Редактируем .htaccess из корня и добавляем в конец *
Options +FollowSymLinks

RewriteEngine On


<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

#<IfModule mod_setenvif.c>
#   <IfModule mod_headers.c>
#        <FilesMatch "\.(gif|ico|jpe?g|png|svgz?|webp|jpg|js|css)$">
#            SetEnvIf Origin ":" IS_CORS
#            Header set Access-Control-Allow-Origin "*" env=IS_CORS
#        </FilesMatch>
#    </IfModule>
#</IfModule>


<IfModule headers_module>
Header set X-Content-Type-Options nosniff
</IfModule>

RewriteCond %{QUERY_STRING} mosConfig_[a-zA-Z_]{1,21}(=|\%3D) [OR]
RewriteCond %{QUERY_STRING} base64_encode.*\(.*\) [OR]
RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%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,L]

RewriteCond %{query_string} concat.*\( [NC,OR]
RewriteCond %{query_string} union.*select.*\( [NC,OR]
RewriteCond %{query_string} union.*all.*select [NC]
RewriteRule ^(.*)$ index.php [F,L]

SetEnvIf user-agent "Indy Library" stayout=1
SetEnvIf user-agent "libwww-perl" stayout=1
SetEnvIf user-agent "Wget" stayout=1
deny from env=stayout

RewriteBase /


########## Begin - Joomla! core SEF Section
############# Use this section if using ONLY Joomla! core SEF
## ALL (RewriteCond) lines in this section are only required if you actually
## have directories named 'content' or 'component' on your server
## If you do not have directories with these names, comment them out.
#
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
#RewriteCond %{REQUEST_URI} ^(/component/option,com) [NC,OR] ##optional - see notes##
RewriteCond %{REQUEST_URI} (/|\.htm|\.php|\.html|/[^.]*)$ [NC]
#RewriteRule ^(content/|component/) index.php
#
########## End - Joomla! core SEF Section


########## Begin - 3rd Party SEF Section
############# Use this section if you are using a 3rd party (Non Joomla! core) SEF extension - e.g. OpenSEF, 404_SEF, 404SEFx, SEF Advance, etc
#
#RewriteCond %{REQUEST_URI} ^(/component/option,com) [NC,OR] ##optional - see notes##
#RewriteCond %{REQUEST_URI} (/|\.htm|\.php|\.html|/[^.]*)$ [NC]
#RewriteCond %{REQUEST_FILENAME} !-f
#RewriteCond %{REQUEST_FILENAME} !-d
#RewriteRule (.*) index.php
#
########## End - 3rd Party SEF Section

# cache images/pdf docs for 10 days
#<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif)$">
#  Header set Cache-Control "max-age=8640000, public, must-revalidate"
#  Header unset Last-Modified
#</FilesMatch>
 
# cache html/htm/xml/txt diles for 2 days
#<FilesMatch "\.(html|htm|xml|txt|xsl)$">
#  Header set Cache-Control "max-age=7200, must-revalidate"
#</FilesMatch>

# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with cachebusting query params like
#   <script src="application.js?20100608">
# Additionally, consider that outdated proxies may miscache
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS  and JS to something like
#   "access plus 1 week" or so.


AddType application/x-font-ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
AddType application/vnd.ms-fontobject .eot


<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault                          "access plus 1 month"
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
  ExpiresByType text/html                 "access plus 0 seconds"
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"
  ExpiresByType image/x-icon              "access plus 5 month"
  ExpiresByType image/gif                 "access plus 5 month"
  ExpiresByType image/png                 "access plus 5 month"
  ExpiresByType image/jpg                 "access plus 5 month"
  ExpiresByType image/jpeg                "access plus 5 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
  ExpiresByType text/x-component          "access plus 8 month"
  ExpiresByType application/x-font-ttf    "access plus 12 month"
  ExpiresByType font/opentype             "access plus 12 month"
  ExpiresByType application/x-font-woff   "access plus 12 month"
  ExpiresByType image/svg+xml             "access plus 12 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 12 month"
  ExpiresByType text/css                  "access plus 5 month"
  ExpiresByType application/javascript    "access plus 5 month"
  ExpiresByType text/javascript           "access plus 5 month"
</IfModule>

<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf|eot|ttf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>

<ifModule mod_headers.c>
  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\\.(js)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\\.(xml|txt)$">
    Header set Cache-Control "public, must-revalidate"
  </filesMatch>
  <filesMatch "\\.(html|htm|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>



<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$"> 
Header set Cache-Control "max-age=25920000, public" 
</FilesMatch>

FileETag None
Header unset X-Powered-By
Header unset ETag


<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz|ttf|eot|svg|woff)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>


<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=Edge,chrome=1"
  <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
    Header unset X-UA-Compatible
  </FilesMatch>
</IfModule>

#<IfModule mod_rewrite.c>
#  RewriteCond %{REQUEST_FILENAME} !-f
#  RewriteCond %{REQUEST_FILENAME} !-d
#  RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
#</IfModule>

Options -MultiViews


AddDefaultCharset utf-8
AddCharset utf-8 .css .js .xml .json .rss .atom


<IfModule mod_autoindex.c>
  Options -Indexes
</IfModule>


<IfModule mod_rewrite.c>
  RewriteCond %{SCRIPT_FILENAME} -d
  RewriteCond %{SCRIPT_FILENAME} -f
  RewriteRule "(^|/)\." - [F]
</IfModule>


<FilesMatch "(\.(bak|config|sql|fla|psd|ini|log|sh|inc|swp|dist)|~)$">
  Order allow,deny
  Deny from all
  Satisfy All
</FilesMatch>


<IfModule php5_module>
  php_value session.cookie_httponly true
</IfModule>
*Содержимое будет дорабатываться


По ссылке качаем и устанавливаем JB Library Plugin
www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin
В его настройках:

Use Script Loader              yes
Move Scripts to Bottom    yes
Enable Lazy Load?             Enabled


Все остальные пункты во всех оставляем табах

No или Disabled


На этом этапе можно включить доступный механизм кэширования и опубликовать соответствующий плагин.
Если на Вашем хостинге доступен кэширующий модуль APС, то он появится в списке доступных. В моем случае там оказался только "файл".

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


Если этого мало, продолжаем (-;


2. Теперь установим на Jbzoo наш личный CDN. Главное, чтоб Ваш ресурс имел записи DNS, т.е. был работающим и на постоянном хостинге.

Регистрируемся на
cdn77.com/
У них есть сервер в Москве, только SSD, триал 14 дней и не втюхивают пакеты по стогигов.
100 Гб трафика по CDN стоит 150 руб. Все сопутствующие удовольствия включены. Раньше давали бонусом хостинг в Восточной Европе на 50Гб, сейчас не нашел об этом.

В кабинете создаем новый ресурс по аналогии с cdn.ripcord.ru:
 
1381383257-3552773d929dc519c66f0a1a9182b

и получаем настройки после сохранения:
 
1381383257-1bc0e604c0d4333d23f669f0aec9a
 
Во вкладке Datacenter Locations выключаем лишние регионы и города.

Теперь необходимо добавить каноническое имя псевдонима ресурса, полученного от cdn777.com
Делаем это в панели управления хостингом.
Ищите название раздела с терминами Хостинг/Настройки ДНС/Управление ДНС-зонами/Создание синонима/Добавление записи
и к уже существующим там записям, вроде

ftp.ripcord.ru.         CNAME                                    ripcord.ru.

по аналогии добавляете полученное выше, чтоб появилась запись вроде моей:

cdn.ripcord.ru.         CNAME            ХХХХХХХХХ.r.cdn77.net.
 
 
Скачиваем и устанавливаем бесплатную версию CDN for Joomla
www.nonumber.nl/extensions/cdnforjoomla/
настраиваем:
1381383256-9f042526c20140d6a1b273712653b
включаем и ставим вторым с конца после кэша.
Какое-то время должно пройти до обновления записей, поэтому не торопясь опять открываем .htaccess
и добавляем:
<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteCond %{HTTP_HOST} !^www.ripcord.ru$ [NC]        
   RewriteCond %{HTTP_HOST} !^cdn.ripcord.ru$ [NC]
   RewriteRule ^(.*)$ http://www.ripcord.ru/$1 [R=301,QSA,L]
</IfModule>
заменяя ripcord.ru на имя Вашего сайта

Поле обновления зон результат должен выглядеть не хуже, чем у меня:
 
1381388827-5320226ac6da650473ddb242b40c9
Подробный отчет в PDF
 
 
 
Принимая во внимание сравнительно высокие результаты, и учитывая что:
 
1) Применена оригинальная сборка демо-сайта, с полным комплектом фирменных модулей, а так же комплектными плагинами и скриптами сторонник разработчиков
2) Ресурс хостится на "100-рублевом" виртуальном тарифе без ништяков
3) Воспроизведение описанных шагов предельно доступно
 
Предлагаю приравнять одновременное употребление слов "Jbzoo" и "томозит" в публикуемых юзернэймами сообщениях и иных словарных конструкциях к действиям, направленным на возбужение напрасных переживаний, пропаганду бессоницы и разжигание нематериалистических взглядов на природу происхождения Кода.
 
 
ЗЫ: Во второй части трилогии попытаемся научить что-нибудь старое и ненужное ходить по ночам на ftp и искать несжатые js/css и неоптимизированные jpg с целью их автоматического сжатия и оптимизации
  • 8
Абгемахт, славяне!

#2 Василий

Василий

Отправлено 10 October 2013 - 12:25

Редактируем .htaccess из корня и добавляем в конец *

У меня если весь код вставить выводится ошибка 404. Корень сайта - это же одноимённая папка: сайт к примеру называется mir.ru - файл .htaccess есть в этой папке - вот его и редактируем. Верно?


Сообщение отредактировал Василий: 10 October 2013 - 12:25

  • 0

#3 pholex315

pholex315

Отправлено 10 October 2013 - 12:26

Спасибо, интересно. Надеюсь, полезно будет.

 

Во только у меня после замены .htaccess на ваш, перестали открываться подпункты меню. Хотя главная страница стала грузиться намного лучше. Пришлось вернуть старый. Ногами прошу не бить, структуру этого файла представляю плохо.

 

Сайт kwintet.ru

 

Подскажете, что можно или нужно сделать?


Сообщение отредактировал pholex315: 10 October 2013 - 12:32

  • 0

#4 ripcord

ripcord

Отправлено 10 October 2013 - 12:54

Возможно что-то пошло не так.

Вот рабочая версия, проверил сейчас.

Ее контент лучше добавить, а не затирать свой файл целиком.

Хотелось бы добавить, что на рабочий сайт нежелательно копировать без осознания происходящего.

В идеале желательно погуглить все строчки, чтоб понять, что это все такое )

 

Все-таки методика проверена в комплексе с дефолтным дистрибутивом, описанным в посте.

Кроме того, на некоторых хостингах банально .htaccess игнорируется или переписывается другими конфигами, или на Вашем хостинге может не быть установлен какой-нибудь модуль из перечисленных.

 

Обратите внимание. что в имени файла первый символ - "."

Для редактирования не используйте, например, какой-нить левый эдитор типа блокнота )

(на всякий случай, мало ли, лучше пользоваться Notepad++)

Сохраняйте все всегда в кодировке UTF-8 без BOM (-;


  • 0
Абгемахт, славяне!

#5 ripcord

ripcord

Отправлено 10 October 2013 - 13:12

Подскажете, что можно или нужно сделать?

 

Не видя Вашу версию, предположений может быть бесконечно много.

Самое вероятное, противоречие в правилах переписывания ссылок.

 

попробуйте взять из моего все, кроме того, где встречается слово Rewrite в названии

Это тоже сразу не берите:

Options +FollowSymLinks

У меня если весь код вставить выводится ошибка 404. Корень сайта - это же одноимённая папка: сайт к примеру называется mir.ru - файл .htaccess есть в этой папке - вот его и редактируем. Верно?

 

 

Как правило да. 

Попробуйте тоже взять все, что без Rewrite

Копируйте порциями, проверяя функциональность. Изменения носят мгновенный характер.


Сообщение отредактировал ripcord: 10 October 2013 - 13:11

  • 0
Абгемахт, славяне!

#6 pholex315

pholex315

Отправлено 10 October 2013 - 13:55

Ага, спасибо!

С рабочей версией все получилось как надо ^-^

 

Ну естественно, сохраняю с правильным именем и в верной кодировке.

 

И пусть изменение скорости загрузки у меня не такое существенное, но эффект есть.


  • 0

#7 ripcord

ripcord

Отправлено 10 October 2013 - 14:19

И пусть изменение скорости загрузки у меня не такое существенное, но эффект есть.

 

Мои поздравления!

Это хороший подъем

Date	YSlow Grade (%)	Page Speed Page Load Time (s)
2013-10-10 05:18:23	71	69	2.7030
2013-10-10 05:19:49	71	69	2.6180
2013-10-10 06:09:47	78	84	2.8200

Скорость загрузки не коррелирует с правильностью настроек, можно 100/100 продавить, а откуда-то он будет полминуты грузиться.

Я было хотел подсказать убрать Etags, но Вы сами уже )


Сообщение отредактировал ripcord: 10 October 2013 - 14:20

  • 0
Абгемахт, славяне!

#8 Евген Аватарович

Евген Аватарович

Отправлено 11 October 2013 - 04:55

Какое-то время должно пройти до обновления записей, поэтому не торопясь опять открываем .htaccess и добавляем: RewriteEngine On RewriteCond %{HTTP_HOST} !^www.ripcord.ru$ [NC] RewriteCond %{HTTP_HOST} !^cdn.ripcord.ru$ [NC] RewriteRule ^(.*)$ http://www.ripcord.ru/$1 [R=301,QSA,L] заменяя ripcord.ru на имя Вашего сайта

 

Здравствуйте уважаемый ripcord.

Спасибо Вам, за решимость помочь всем нам в таком важном вопросе!

 

Если я правильно понимаю, то это действие должно заменить в адресе изображения вот это cdn.ripcord.ru вот на это ripcord.ru и путь должен получиться не такой src="cdn.ripcord.ru/cache/com_zoo/images/3_3823e6b666a290e1bb2a610f3da63c60.jpg" , а такой src="ripcord.ru/cache/com_zoo/images/3_3823e6b666a290e1bb2a610f3da63c60.jpg" , то есть что бы поисковик индексировал картинки и считал, что они расположены на Вашем сайте.

Если я ошибаюсь, то подскажите пожалуйста - возможно ли реализовать такое?

Или домена третьего уровня в виде cdn.ripcord.ru - достаточно для правильной индексации изображений.

Извините, если вопрос покажется Вам глупым.


Сообщение отредактировал Евген: 11 October 2013 - 05:00

  • 0

#9 Olegtlt

Olegtlt

Отправлено 13 October 2013 - 21:34

У них есть сервер в Москве, только SSD, триал 14 дней и не втюхивают пакеты по стогигов. 100 Гб трафика по CDN стоит 150 руб.

 

На сайте не нашел про ~150 рублей 

 

В Datacenter Locations необходимо оставить  4 города - верно?


  • 0

#10 ripcord

ripcord

Отправлено 16 October 2013 - 14:25

Если я правильно понимаю, то это действие должно заменить в адресе изображения вот это cdn.ripcord.ru вот на это ripcord.ru и путь должен получиться не такой............что бы поисковик индексировал картинки и считал, что они расположены на Вашем сайте.

 

Это сделано чтоб происходил редирект на адрес с "www" кроме условий, когда уже есть "www" или "cdn" в адресе.

 

Если я ошибаюсь, то подскажите пожалуйста - возможно ли реализовать такое? Или домена третьего уровня в виде cdn.ripcord.ru - достаточно для правильной индексации изображений.

 

Гугл, по моим наблюдениям, считает такие ссылки внутренними.


На сайте не нашел про ~150 рублей

 

http://www.cdn77.com/pricing

 

В Datacenter Locations необходимо оставить 4 города - верно?

 

Можно выставить любое количество. Зависит от целевой аудитории ресурса.


  • 1
Абгемахт, славяне!





Темы с аналогичным тегами рецепт, оптимизация ускорение, оптимизация, ускорение, css, javascript, cdn

Click to return to top of page in style!