*

Gile

  • ***
  • 42 posts
Theme optimization
« on: March 19, 2017, 03:05:20 PM »

Hi,
I recently noticed issue in optimization refer to:
- HTML not minimized
- Render blocking CSS / JS
- CSS not minimized
- Javascript not minified
- Images not optimized, All images in "footer-sponsor" section not Optimized , Also the images that comes in Premium blocks on front page not Optimized too.
This greatly affects to page speed and search engines.
Whether this can be fixed in the next themes update , I'm not sure how to deal with this issue.


Regards

*

MB Themes

Re: Theme optimization
« Reply #1 on: March 19, 2017, 04:19:42 PM »
@Darko
It cannot.
- HTML not minimized
you need plugin
- Render blocking CSS / JS
until you do not develop own script, you cannot fix this
- CSS not minimized
as far as we deliver themes that can be modified by end users, we will never minify our JS or CSS. None of plugins has CSS minified as well
- Javascript not minified
as far as we deliver themes that can be modified by end users, we will never minify our JS or CSS. None of plugins has JS minified as well
- Images not optimized, All images in "footer-sponsor" section not Optimized , Also the images that comes in Premium blocks on front page not Optimized too.
you cannot optimize image for responsive web, not on 100%. You can resize footer sponsor logos if you want, you can set different size on item images, if you want.

I recommend to check Minifier plugin (free) that can do some tricks, not sure if all of them, but we will never take any action on minification, this has minimum impact on website speed and is just for rating of websites. Negative impact on end-user that wants to modify theme/plugin is much higher.
Any kind of optimization is in your hands.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

Carlos Carcamo

  • ****
  • 105 posts
  • LaKompra.com
Re: Theme optimization
« Reply #2 on: March 19, 2017, 04:32:12 PM »
As @frosticek said, they cannot deliver the theme with minimized CSS or JS, we as a developer need to have the code in the best way possible to made some changes.

For CSS, if you need to minimize the CSS you can use http://csscompressor.com/ and update the style.css, you can use this tool https://varvy.com/pagespeed/ to know more about the CSS and JS delivery process.

For images, are you using a shared hosting? if yes, you can ask your provider to install or enable Imagick PHP, or if you are using VPS you can install Imagick, more basically modification are under the .htaccess

Code: [Select]
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A86400
ExpiresByType image/jpg A86400
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/x-shockwave-flash A2592000
#
<FilesMatch "\.(gif¦jpe?g¦png¦ico¦css¦js¦swf)$">
Header set Cache-Control "public"
</FilesMatch>
</IfModule>


## EXPIRES CACHING ##
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>



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



#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript application/xml x-font/otf x-font/ttf x-font/eot
</ifmodule>
#End Gzip



<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>


You can use https://gtmetrix.com/ and they will give you the optimize images just click on download and replace the zara/images/ remember that the listing images are handled by the osclass core.

This are my recommendations, my PERSONAL recommendation.
LaKompra.com

*

Gile

  • ***
  • 42 posts
Re: Theme optimization
« Reply #3 on: March 19, 2017, 05:37:22 PM »

Thanks Michal,



I wanted to hear your opinion to know what to do, because optimization requires a deep analysis.
And I want to know whether the modification by my side will undermine some tips on next theme updates.


Regards

@Darko
It cannot.
- HTML not minimized
you need plugin
- Render blocking CSS / JS
until you do not develop own script, you cannot fix this
- CSS not minimized
as far as we deliver themes that can be modified by end users, we will never minify our JS or CSS. None of plugins has CSS minified as well
- Javascript not minified
as far as we deliver themes that can be modified by end users, we will never minify our JS or CSS. None of plugins has JS minified as well
- Images not optimized, All images in "footer-sponsor" section not Optimized , Also the images that comes in Premium blocks on front page not Optimized too.
you cannot optimize image for responsive web, not on 100%. You can resize footer sponsor logos if you want, you can set different size on item images, if you want.

I recommend to check Minifier plugin (free) that can do some tricks, not sure if all of them, but we will never take any action on minification, this has minimum impact on website speed and is just for rating of websites. Negative impact on end-user that wants to modify theme/plugin is much higher.
Any kind of optimization is in your hands.

*

Gile

  • ***
  • 42 posts
Re: Theme optimization
« Reply #4 on: March 19, 2017, 05:48:06 PM »

Hi Carlos,



Thank you for your helpful hints, I use a shared hosting with high performance and all possible options are enabled including Imagick PHP.
In the next few days I'll to do some modifications and we'll see how it will affect the optimization.
I hope that the more people will involved in the debate, so we can collected experiences and apply them for the best possible optimization.


Cheers

As @frosticek said, they cannot deliver the theme with minimized CSS or JS, we as a developer need to have the code in the best way possible to made some changes.

For CSS, if you need to minimize the CSS you can use http://csscompressor.com/ and update the style.css, you can use this tool https://varvy.com/pagespeed/ to know more about the CSS and JS delivery process.

For images, are you using a shared hosting? if yes, you can ask your provider to install or enable Imagick PHP, or if you are using VPS you can install Imagick, more basically modification are under the .htaccess

Code: [Select]
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A86400
ExpiresByType image/jpg A86400
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/x-shockwave-flash A2592000
#
<FilesMatch "\.(gif¦jpe?g¦png¦ico¦css¦js¦swf)$">
Header set Cache-Control "public"
</FilesMatch>
</IfModule>


## EXPIRES CACHING ##
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>



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



#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript application/xml x-font/otf x-font/ttf x-font/eot
</ifmodule>
#End Gzip



<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>


You can use https://gtmetrix.com/ and they will give you the optimize images just click on download and replace the zara/images/ remember that the listing images are handled by the osclass core.

This are my recommendations, my PERSONAL recommendation.