amigo

Instantcms - Оптимизация кода

29 posts in this topic

Добрый вечер, уважаемые форумчане. В связи с появлением свободного времени, публикую небольшую статью. Речь в данной статье пойдёт, о оптимизации кода в Instantcms и движках в целом. Подробно прочитав эту статью, не исключено использование полученных знаний в других cms. Для обзора выбрал Инстант. Но в дальнейшим будем разбирать и другие cms. Пока что планирую сделать обзор оптимизации для Wordpress, но Ваши комментарии конечно же могут изменить ход событий.

Итак, начнём.

Ссылки на фото До и После в анализе через Webtestpage . org и Google page speed.

http://pastenow.ru/ISG6- Google page speed (До)

http://pastenow.ru/ISJC- После

http://pastenow.ru/ISGF- Webtestpage (До)

http://pastenow.ru/ISJH- После

 

В чём заключается оптимизация. Её я разделил на 3 пункта.

 

  1. Front-end - Оптимизация того, что видит пользователь. То есть конечный итог.
  2. Back-end - Оптимизация пути от машины (сервера) до браузера пользователя. То есть запросы в бд и непосредственно на сервер.
  3. Оптимизация самой машины (сервера).

Первый пункт к счастью можно исправить с помощью онлайн-сервисов, почти не залезая в код.

 

1) Оптимизируем стили. Тут 2 варианта. Либо мы создаём куча стилей и для каждой страницы подгружаем свой стиль, таким образом разделив стиль сайта на мелкие кусочки, которые будут запрашиваться только на необходимых страницах. Либо пихаем все стили в один css файл. Для начинающих веб мастеров больше подойдёт второй вариант. Далее вне зависимости от выбранного варианта прогоняем стили через csscompressor.com

Также поступаем и с js файлами. Используемые картинки скачиваем в самом инструменте Google Page Speed.

Далее лезем в код сайта и убираем все лишние пробелы, отсутпы и комментарии в html разметке. В случае с Instantcms убираем лишние пробелы в template.php, в шаблонизаторах всех подгружаемых модулей (mod_menu.tpl, mod_auth.tpl и.т.д.). В файлах .tpl главное не убирать пробелы которые находятся в фигурных скобках {}. Так как это уже Smarty, и убранные пробелы в этих скобках могут вызвать ошибки.

 

2) Back-end. Лезим в код и убираем все не нужные условия. К примеру в index.php стоит условия с переходом на страницу /install, /migrate и.т.д.. Его после установки движка можно спокойно удалять. Также удаляем не нужные php функции. В template.php очень много функций и переменных, которые лучше всего заменить. К примеру <?php echo date('Y'); ?> - лучше всего заменить на "2016", <?php $this->printSitename(); ?> - на название вашего сайта, переменную шаблона .TEMPLATE.' меняем на название шаблона и т.д.

 

3) Оптимизация самого сервера будет заключаться в использовании модулей. То есть правкой файла .htaccess

Добавив вот такой кусок в .htaccess (взято из плагина W3 total cache мы подключаем модуль, который так рекомендует включить Google Page Speed

RewriteCond %{REQUEST_URI} !\.(ico|css|js|txt)$ [NC]
RewriteCond %{REQUEST_FILENAME} !^/admin
RewriteCond %{REQUEST_FILENAME} !^/migrate
RewriteCond %{REQUEST_FILENAME} !^/install
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /index.php [L]
FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 7 day"
</filesmatch>
</ifmodule>

	AddEncoding gzip .gz
	 <FilesMatch "\.js.gz$">
	  ForceType text/javascript 
	  Header set Content-Encoding: gzip
	</FilesMatch>

	<FilesMatch "\.js$">
	  RewriteEngine On
	  RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
	  RewriteCond %{HTTP:Accept-Encoding} gzip
	  RewriteCond %{REQUEST_FILENAME}.gz -f
	  RewriteRule (.*)\.js$ $1\.js.gz [L]
	  ForceType text/javascript
	</FilesMatch>

	<FilesMatch "\.css.gz$">
	  ForceType text/css
	  Header set Content-Encoding: gzip
	</FilesMatch>

	<FilesMatch "\.css$">
	  RewriteEngine On
	  RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
	  RewriteCond %{HTTP:Accept-Encoding} gzip
	  RewriteCond %{REQUEST_FILENAME}.gz -f
	  RewriteRule (.*)\.css$ $1\.css.gz [L]
	  ForceType text/css
	</FilesMatch>

<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>
<ifModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 5 seconds"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    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"
    ExpiresByType text/html "access plus 43200 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

AddHandler Last-modifed .js .css .html
AddHandler mod-deflate .css .js .html .jpg .jpeg .png
AddHandler Last-modifed js

<IfModule mod_mime.c>
    AddType text/css .css
    AddType text/x-component .htc
    AddType application/x-javascript .js
    AddType application/javascript .js2
    AddType text/javascript .js3
    AddType text/x-js .js4
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg .svgz
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType application/json .json
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.ms-opentype .otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType application/vnd.ms-opentype .ttf .ttc
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/font-woff .woff
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/json A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/font-woff A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
         Header set X-Powered-By "W3 Total Cache/0.9.4.1"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
         Header set X-Powered-By "W3 Total Cache/0.9.4.1"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|WOFF|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
         Header set X-Powered-By "W3 Total Cache/0.9.4.1"
    </IfModule>
</FilesMatch>

Заранее извиняюсь за "не красиво" оформленную статью. Пишу в не привычных мне условиях) Значения Google Page Speed улучшены с 67 до 97. А скорость по Webtestpage улучшена на 30-50%.

post-13296-0-44425800-1454257352_thumb.png

Sevrik, k-park and serega800 like this

Share this post


Link to post
Share on other sites

Все довольно таки хорошо, кроме Win XP ))

Я же говорю, в не привычных мне условиях пишу) Тут и на xp то не особо летает всё.

Roman, можно и в DLE. Постарался всё обобщить, чтобы можно было примерно понимать что править. Но если желающих будет много, то я конечно же напишу для Dle.

Share this post


Link to post
Share on other sites
 

Результат Webtestpage очень хороший! Но сайт который сейчас в разработке с не оптимизазицей, на милисекунды проигрывает с весом страницы в 4 мб. Так что, не тратьте время на ерунду типа - Instantcms 

 

1A5bGbNuKkDGar.png

Share this post


Link to post
Share on other sites

Буду готовить DLE)

Буду благодарен, если кто-нибудь по взаимствует свой сайт на DLE для проведения оптимизации.

Единственное условие, чтобы сайт был максимально близок к стандарту DLE. То есть дефотный шаблон, минимум наворочек и.т.д. Хостинг кстати тоже должен быть не зарубежный, а тот который известен в массе.

В этом опыте участвовал Hostinger (дабы любой мог себе позволить) и стандартные функции инстанта.

Share this post


Link to post
Share on other sites

Укажите что это относится к первой ветке Инстант! А вообще, лучше использовать Instantcms2 Пользуюсь 2-й версией, много сайтов на ней сделал

Share this post


Link to post
Share on other sites

Для Instant2 Webman уже постарался) Мою статью по сравнению с его статьёй, даже статьёй не назовёшь ;)

Share this post


Link to post
Share on other sites

Я же говорю, в не привычных мне условиях пишу) Тут и на xp то не особо летает всё.

Roman, можно и в DLE. Постарался всё обобщить, чтобы можно было примерно понимать что править. Но если желающих будет много, то я конечно же напишу для Dle.

Я за дле, ещё один желающий.... Надеюсь поддержат ребята. Давай для дле

Share this post


Link to post
Share on other sites

Для Instant2 Webman уже постарался) Мою статью по сравнению с его статьёй, даже статьёй не назовёшь ;)

можно ссылочку ???

Share this post


Link to post
Share on other sites

Извините что не по-теме,не могу создавать.Требуется дизайнер.Есть сайт,необходимо переделать дизайн под Dle,ну и установить и переделать дизайн форума.Предлагаем цены

Почитайте правила, которые вы сейчас нарушаете

Share this post


Link to post
Share on other sites

можно ссылочку ???

В л.с. написал.

Из желающих есть кто может предоставить сайт на DLE? Там насколько я знаю движок с лицензией нужно брать? или нуленным все пользуются?

Share this post


Link to post
Share on other sites

В л.с. написал.

Из желающих есть кто может предоставить сайт на DLE? Там насколько я знаю движок с лицензией нужно брать? или нуленным все пользуются?

Спасибо

Share this post


Link to post
Share on other sites

В л.с. написал.

Из желающих есть кто может предоставить сайт на DLE? Там насколько я знаю движок с лицензией нужно брать? или нуленным все пользуются?

 

Dle - платный двиг.Но можно и без лицухи пользоваться

Share this post


Link to post
Share on other sites

Хорошо, буду устанавливать.

Share this post


Link to post
Share on other sites

Могу наверное я предоставить сайт, что вам скинуть в личку? Какие доступы нужны?

Share this post


Link to post
Share on other sites

FTP только.

 

Да установи сам и не парься.там делов 10 минут

Share this post


Link to post
Share on other sites

Предоставил доступ )))) Теперь ждем результата.........

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.