I have an extention that allows for WEBP.
It worked on all browsers pretty much except Safari, that of course is because Safari doesn't support WEBP.
The developer made Safari ignore the request for webp, and use .jpg, which worked on mobile phone and product pages, but one page it would not work on is the homepage on desktop Safari.
WEBP is well worth it it shrinks the website down 25% product pages and 30% on the homepage.
Which in reality results improves the speed about 10% on Desktop and if using a mobile phone with a bad connection upto 30%.
As well as a fairly nice SEO boost.
So the developer finally fixed that. Every page works, Chrome and supported browsers shows WEBP, and Safari showing .jpg on all pages.
However this fix leads to a new problem.
It makes the website go very slow.
So with the broken safari, the webp on a supported browser such as Chrome would increase the speed by about 10%
With the Safari fix to ignore the webp, it will make the website go 100% slower on all browsers, doubling the load speed. Not good.
The developer is unable to make it both go fast and to serve .jpg to Safari.
I am using latest Journal 3.037
And Opencart 3.0.3.2
Below is the code that I have currently, on the Extentions/Modifications page, this would be for the fixed Safari but slow load times, if needed I can paste the code for the fast load times but broken Safari... But I won't for now as this post is long enough already.
<?xml version="1.0" encoding="utf-8"?>
<modification>
<name>WebP Image Converter</name>
<code>wic</code>
<version>3.0</version>
<author>OCpedia.com</author>
<link>ocpedia.com</link>
<file path="catalog/model/tool/image.php">
<operation>
<search><![CDATA[ModelToolImage]]></search>
<add trim="true" position="after"><![CDATA[
public function webpSupport() {
if ($this->config->get('module_webp_status')) {
$webp = gd_info();
if (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Edge')) {
$status = false;
} elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Safari')) {
$status = false;
$files = array();
$files = array_merge($files, glob(DIR_CACHE . 'journal3.product.image*'));
$files = array_merge($files, glob(DIR_CACHE . 'journal3.products.*'));
$files = array_merge($files, glob(DIR_CACHE . 'journal3.settings.*'));
$files = array_merge($files, glob(DIR_CACHE . 'journal3.master_slider.*'));
if ($files) {
foreach ($files as $file) {
$time = substr(strrchr($file, '.'), 1);
if ($time < time()) {
if (file_exists($file)) {
unlink($file);
}
}
}
}
} elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'MSIE') || (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Trident/7'))) {
$status = false;
} else {
$status = false;
}
if (isset($this->request->server['HTTP_ACCEPT']) && strpos($this->request->server['HTTP_ACCEPT'], 'webp')) {
$status = true;
}
if ($webp['WebP Support'] && $status) {
return true;
} else {
return false;
}
}
return false;
}
]]></add>
</operation>
<operation>
<search><![CDATA[if ($this->request->server['HTTPS']) {]]></search>
<add trim="true" position="before"><![CDATA[
$image_webp = false;
$webp_support = $this->webpSupport();
if ($webp_support && strtolower($extension) != 'gif') {
$image_webp = 'cache/webp/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . $type . '.webp';
if (!is_file(DIR_IMAGE . $image_webp) || (filemtime(DIR_IMAGE . $image_new) > filemtime(DIR_IMAGE . $image_webp))) {
$path = '';
$directories = explode('/', dirname($image_webp));
foreach ($directories as $directory) {
$path = $path . '/' . $directory;
if (!is_dir(DIR_IMAGE . $path)) {
@mkdir(DIR_IMAGE . $path, 0777);
}
}
if (strtolower($extension) == 'jpg' || strtolower($extension) == 'jpeg') {
$image_default = imagecreatefromjpeg(DIR_IMAGE . $image_new);
}
elseif (strtolower($extension) == 'png') {
$image_default = imagecreatefrompng(DIR_IMAGE . $image_new);
}
imagewebp($image_default, DIR_IMAGE . $image_webp, ($this->config->get('module_webp_quality') ? $this->config->get('module_webp_quality') : 80));
imagedestroy($image_default);
if (filesize(DIR_IMAGE . $image_webp) % 2 == 1) {
file_put_contents(DIR_IMAGE . $image_webp, "\0", FILE_APPEND);
}
}
}
]]></add>
</operation>
<operation>
<search><![CDATA['image/' . $image_new;]]></search>
<add trim="true" position="replace"><![CDATA[
'image/' . ($image_webp ? $image_webp : $image_new);
]]></add>
</operation>
</file>
</modification>
Also, since WebP is a 3rd party commercial extension, have you been in touch with the authors of it?
Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
And if you're refering to compatability, all third party themes have compatability issues with extentions. So that wouldn't be a good excuse either.
The extention I am using is specificly for Journal, so it would not work on other themes or default store.
I mentioned numberous times about the developer trying to fix the issues, I started my post saying please read carefully.
So of course I've been in contact with the developer, you didn't read carefully at all.
Either way, since both Journal3 and WebP are commercial extensions, you can't expect free support because others don't necessarily use these extensions. Perhaps you best bet is to find a developer in the commercial support forum section. In general, merely excluding Safari from the WebP optimization shouldn't slow your site down for other browsers, rather, the only side effect should be that for Safari it runs at the original OpenCart speeds. Without someone digging deeper into your extension it won't be possible to find the issue.
Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
Yes, exactly what I said to the developer.
All he needs to do is tell the extention to work as it is, but not function on Safari. I don't see how that makes the extention go from super fast to super slow on every other browser.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
All he needs to do is tell the extention to NOT send WEBP images to Safari, only use WEBP for supported browsers...
Let me post the version of the code that worked fine on supported browers, but had the safari issue. (Forcing Safari to show WEBP, when Safari doesn't support webp, meaning no images.)
<?xml version="1.0" encoding="utf-8"?>
<modification>
<name>WebP Image Converter</name>
<code>wic</code>
<version>3.0</version>
<author>OCpedia.com</author>
<link>ocpedia.com</link>
<file path="catalog/model/tool/image.php">
<operation>
<search><![CDATA[ModelToolImage]]></search>
<add trim="true" position="after"><![CDATA[
public function webpSupport() {
if ($this->config->get('module_webp_status')) {
$webp = gd_info();
if (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Opera') || (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'OPR/'))) $browser_support = true;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Edge')) $browser_support = false;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Chrome')) $browser_support = true;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Safari')) $browser_support = false;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Firefox')) $browser_support = true;
elseif (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'MSIE') || (isset($this->request->server['HTTP_USER_AGENT']) && strpos($this->request->server['HTTP_USER_AGENT'], 'Trident/7'))) $browser_support = false;
else $browser_support = false;
if ($webp['WebP Support'] && ((isset($this->request->server['HTTP_ACCEPT']) && strpos($this->request->server['HTTP_ACCEPT'], 'webp')) || $browser_support)) {
return true;
} else {
return false;
}
}
return false;
}
]]></add>
</operation>
<operation>
<search><![CDATA[$image_new = str_replace(' ', '%20', $image_new);]]></search>
<add trim="true" position="before"><![CDATA[
$image_webp = false;
$webp_support = $this->webpSupport();
if ($webp_support && strtolower($extension) != 'gif') {
$image_webp = 'cache/webp/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . $type . '.webp';
if (!is_file(DIR_IMAGE . $image_webp) || (filemtime(DIR_IMAGE . $image_new) > filemtime(DIR_IMAGE . $image_webp))) {
$path = '';
$directories = explode('/', dirname($image_webp));
foreach ($directories as $directory) {
$path = $path . '/' . $directory;
if (!is_dir(DIR_IMAGE . $path)) {
@mkdir(DIR_IMAGE . $path, 0777);
}
}
if (strtolower($extension) == 'jpg' || strtolower($extension) == 'jpeg') {
$image_default = imagecreatefromjpeg(DIR_IMAGE . $image_new);
}
elseif (strtolower($extension) == 'png') {
$image_default = imagecreatefrompng(DIR_IMAGE . $image_new);
}
imagewebp($image_default, DIR_IMAGE . $image_webp, ($this->config->get('module_webp_quality') ? $this->config->get('module_webp_quality') : 80));
imagedestroy($image_default);
if (filesize(DIR_IMAGE . $image_webp) % 2 == 1) {
file_put_contents(DIR_IMAGE . $image_webp, "\0", FILE_APPEND);
}
}
}
]]></add>
</operation>
<operation>
<search><![CDATA[$image_new = str_replace(' ', '%20', $image_new);
]]></search>
<add trim="true" position="after"><![CDATA[
if ($image_webp) $image_new = $image_webp;
]]></add>
</operation>
</file>
</modification>
Every browser sends a header which indicates if they accept webp images.
second, I do not know how journal caches pages but if they cannot handle changes and merely page cache the whole lot then it is a journal caching issue.
In that case they should not simply delete the caches when a safari request comes along but alter the cached pages before they are send out.
They could do this by testing for webp support in the response class and if it is supported, change all eligible product image filenames in that cached html file from .jpg to .webp and visa versa if webp is not supported.
In the image class you would only make sure you create the webp images along with the jpg images at all times, regardless of support.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
Code: Select all
public function webpSupport() {
$support = false;
// if browser accepts webp images
if (isset($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'webp')) {
$support = true;
}
return $support;
}
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
Users browsing this forum: No registered users and 65 guests