Jump to content

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


Recommended Posts

Добрый вечер, уважаемые форумчане. В связи с появлением свободного времени, публикую небольшую статью. Речь в данной статье пойдёт, о оптимизации кода в 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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites
 

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

 

1A5bGbNuKkDGar.png

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

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

Спасибо

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...