Journal3, Webp no support in Safari and LSCache

AndreyPopov

AndreyPopov

Well-Known Member
#1
#1
next problem:
- first opportunity of Google PageSpeed Insights is:
Serve images in next-gen formats
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
Click to expand...

Journal3 has option to convert "on fly" all images to webp format. converted images stored in image cache.

but Safari not support webp image format and Journal3 dynamic detect Safari and use for it originally jpg(png) images.

and when enable LSCache all pages in Safari with no images :(

is the way to make separate cache for Safari(and others browsers) with no webp support?


[UPDATE]
solution found.
LSCache 2.1.0 solve problem
and also you can try these rewrite rules in .htaccess
Code: 
### LITESPEED_CACHE_START - Do not remove this line
<IfModule LiteSpeed>
CacheLookup on
## Uncomment the following directives if you has a separate mobile view
RewriteEngine On
## Uncomment the following directives if you has a separate Safari browser view
RewriteCond %{HTTP_USER_AGENT} Macintosh [NC]
RewriteRule .* - [E=Cache-Control:vary=isMac]
RewriteCond %{HTTP_USER_AGENT} "iPhone|iPad|Petal" [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobileapple]
RewriteCond %{HTTP_USER_AGENT} "bot|yandeximages|cfnetwork|favicon|facebook" [NC]
RewriteCond %{HTTP_USER_AGENT} !Chrome [NC]
RewriteCond %{HTTP_USER_AGENT} !Mobile [NC]
RewriteCond %{HTTP_USER_AGENT} !Macintosh [NC]
RewriteRule .* - [E=Cache-Control:vary=isBot]
RewriteCond %{HTTP_USER_AGENT} Android [NC]
RewriteCond %{HTTP_USER_AGENT} "Chrome|Firefox|Opera|OPR" [NC]
RewriteCond %{HTTP_USER_AGENT} !Bot [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]
RewriteCond %{HTTP_USER_AGENT} Android [NC]
RewriteCond %{HTTP_USER_AGENT} Chrome [NC]
RewriteCond %{HTTP_USER_AGENT} Bot [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobilebot]
</IfModule>
they must be placed BEFORE Opencart SEO rewrite rules
### LITESPEED_CACHE_END


[/UPDATE]
 
Last edited:
serpent_driver

serpent_driver

Well-Known Member
#2
#2
[UPDATE]
For everybody who has same issue with Journal3 and Webp plugin if LScache is used, this issue can't be fixed by LScache plugin for OpenCart. Disable Lscache or Webp plugin, both are not compatible. To get Webp function work, this plugin must be re-developed to work with Client-Side-Includes (Javascript) for device dectection instead of PHP.
[/UPDATE]



"on the fly" needs PHP, but if page is cached there is no PHP, but you can exclude specific browser from getting cached pages. This is the only way to make such function available. Cache && on the fly image conversion isn't possible. A self-describing consequence.....

AndreyPopov said:
is the way to make separate cache for Safari(and others browsers) with no webp support?
Click to expand...
Test it
Apache config: 
<IfModule LiteSpeed>
RewriteCond %{HTTP_USER_AGENT} "AppleWebKit|Mac OS" [NC]
RewriteRule .* - [E=Cache-Control:vary=is_safari]
</IfModule>
 
Last edited:
AndreyPopov

AndreyPopov

Well-Known Member
#3
#3
"on the fly" - in quotas ;) it's means that I only check option in Journal3 settings.

converted images stored in image cache.
Click to expand...


serpent_driver said:
but you can exclude specific browser from getting cached pages.
Click to expand...
exclude from cache is not right way :(
why enable LSCache if disable it for 10-20% of users?

serpent_driver said:
Test it
Apache config: 
<IfModule LiteSpeed>
RewriteCond %{HTTP_USER_AGENT} "AppleWebKit|Mac OS" [NC]
RewriteRule .* - [E=Cache-Control:vary=is_safari]
</IfModule>
Click to expand...
this code exclude? or make separate cache for Safari?
 
Last edited:
AndreyPopov

AndreyPopov

Well-Known Member
#10
#10
serpent_driver said:
Yes, but purge cache before test.

If you warmup the cache the way how to warmup must be modified to warmup the cache for Safari browser too.
Click to expand...

for separate Mobile View cache already in htaccess:

Code: 
### LITESPEED_CACHE_START - Do not remove this line
<IfModule LiteSpeed>
CacheLookup on
## Uncomment the following directives if you has a separate mobile view
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini" [NC] RewriteRule .* - [E=Cache-Control:vary=ismobile]
</IfModule>
### LITESPEED_CACHE_END
where place code: after or before exist rule?
 
serpent_driver

serpent_driver

Well-Known Member
#11
#11
The existing rewrite rule for mobile devices could cause a conflict with a new rule for Safari browser. Both rules contain "Safari", so you can't use the code for Safari browser to define a cache rule for this browser. At this moment I have no (quick) solution for you. It is possible, but this takes more time to test it to prevent new issues with cache.
 
AndreyPopov

AndreyPopov

Well-Known Member
#12
#12
Safari and Safari Mobile are same keys?

may be remove Safari Mobile from exist rules and add


Code: 
RewriteCond %{HTTP_USER_AGENT} "Safari" [NC]
RewriteRule .* - [E=Cache-Control:vary=is_safari]

RewriteCond %{HTTP_USER_AGENT} "Safari Mobile" [NC]
RewriteRule .* - [E=Cache-Control:vary=is_safari_mobile]

or may be better Safari Mobile first to detect:

Code: 
RewriteCond %{HTTP_USER_AGENT} "Safari Mobile" [NC]
RewriteRule .* - [E=Cache-Control:vary=is_safari_mobile]

RewriteCond %{HTTP_USER_AGENT} "Safari" [NC]
RewriteRule .* - [E=Cache-Control:vary=is_safari]
 
serpent_driver

serpent_driver

Well-Known Member
#13
#13
No, the UA of (mobile) Safari contains "Mobile" && Safari in e.a. iphone or ipad, but not "Safari Mobile", so it doesn't matter if you remove Safari Mobile. The problem is "Mobile" and can be found in every UA of a mobile device, also Android. This wouldn't be a fix.
 
serpent_driver

serpent_driver

Well-Known Member
#14
#14
[EDIT]
This code doesn't work.
[/EDIT]


Let's give it a try:

Change the current one:

Apache config: 
RewriteCond %{HTTP_USER_AGENT} "iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini" [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]
into:

Apache config: 
RewriteCond %{HTTP_USER_AGENT} "BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Android|Opera Mini" [NC]
RewriteCond %{HTTP_USER_AGENT} !"Safari" [NC]
RewriteRule .* - [E=Cache-Control:vary=ismobile]
Set a new one for mobile devices with Safari:

Apache config: 
RewriteCond %{HTTP_USER_AGENT} "Safari" [NC]
RewriteCond %{HTTP_USER_AGENT} "Mobile" [NC]
RewriteRule .* - [E=Cache-Control:vary=isMobileSafari]
And a second for desktop Safari

Apache config: 
RewriteCond %{HTTP_USER_AGENT} "Safari" [NC]
RewriteCond %{HTTP_USER_AGENT} !"Mobile" [NC]
RewriteRule .* - [E=Cache-Control:vary=isDesktopSafari]
Not tested, but if I follow the logic it should work, but it's on you to test it.
 
Last edited:
AndreyPopov

AndreyPopov

Well-Known Member
#17
#17
first I want to check if rules work correctly when webp disable
- for desktop
- for desktop Safari
- for mobile
- for mobile Safari

if all separate four caches work correctly then enable webp.
 
AndreyPopov

AndreyPopov

Well-Known Member
#18
#18
try today again. because edit .htaccess and later...... click Save in LSCache module in Opencart admin, and LSCache module rewrite all my chages to default LSCache :(
and only today find that
 
serpent_driver

serpent_driver

Well-Known Member
#19
#19
LScache plugin for PrestaShop should have an editor mode like in cache plugin for Wordpress. If Presta plugin always overwrites custom settings you can't use the modified code.
 
AndreyPopov

AndreyPopov

Well-Known Member
#20
#20
work only on four or five level

home page (no images)
home page - Common Catalog (no images)
home page - Common Catalog - Turkey Yarn (no images)
home page - Common Catalog - Turkey Yarn - Alize Catalog (no images)
home page - Common Catalog - Turkey Yarn - Alize Catalog - Alize Gold (with images)
home page - Common Catalog - Turkey Yarn - Alize Catalog - Alize Gold - Alize Gold 01 (with images)
 
You must log in or register to reply here.
Top