Will Stocks's Replies - page 5

Forum Replies Created

Viewing 15 replies - 61 through 75 (of 360 total)

← 1 2 3 4 5 6 … 22 23 24 →

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP should ignore animated GIF?

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

All good! See https://willstocks.co.uk/404 and it’s working!

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP + Infinite scrolling

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

Theme zipped and just sent over (the contact page confused me for a sec, before I realised it was the “chat” bubble in the bottom right, lol!)

Shout if you need any other info. You should have my email now as well, so feel free to ping an email if required

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP loading both .jpeg and .webp version of image

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

OK – I _think_ I’m with you now!

I’ve checked on a page where I have posts that don’t collide with my “Recent Posts” section (https://willstocks.co.uk/category/systems-administration-development/ as an example) and I can see that if I filter the loaded images down to “DNS”, that only the lqip.png + lazyloaded-full.webp are loaded (woooo!). I was about to ask “could I just set data-src="" (blank) so JS WebP would still work with just src and data-srcset” but I don’t think it’s necessary, so that’s good!!

That being said, the behaviour is not the same on Safari (macOS Safari 12.1.2) – I’m seeing lqip.png + lqip.png + lazyloaded-full.png + lazyloaded-full.png (duped image requests, obviously not WebP because no support) in the network waterfall… I assume that JS WebP is causing this somehow?

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP loading both .jpeg and .webp version of image

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

Lol, forgive me then – I’m still getting confused. So, I have three images being called:

lqip.jpg = src
lqip.jpg.webp = ??? (data-src or repeated src)
fullsize.jpg.webp = data-srcset

If the data-src is ignored because there’s a data-srcset, that means that the lqip.jpg is being loaded (as expected) but then JS WebP is loading it again for some reason, even though the jpg has already been loaded? What would be the reason for that if the jpg is already loaded?

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP + Infinite scrolling

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

Very interesting… the lazysizes script implementation is fairly standard and I include unveilhooks: https://willstocks.co.uk/wp-content/themes/linx-child/js/ws-lazysizes.js

I will zip up and send over my theme for you to review as the metafizzy infinite scroll is tied in with the theme (nothing too bespoke as far as I’m aware).

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP loading both .jpeg and .webp version of image

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

But if I’m using src with a data-srcset for responsive image lazyloading (lazysizes), then loading the data-src isn’t strictly necessary, is it?
So is there anyway for me to remove the data-src but still have JS WebP convert my data-srcset values (the first time I tried without, it didn’t run)?

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP loading both .jpeg and .webp version of image

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

So the src will always be loaded twice and there’s no way for me to prevent that without using ExactDN?

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP loading both .jpeg and .webp version of image

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

OK… I think I’m with you.
Just so I fully understand:

Is it that the src (jpg) and then data-src (jpg.webp) are being loaded, before lazyloading sets in and then loads the data-srcset?

Or

Is it that the src is being loaded as .jpg, then JS WebP is kicking in and reloading it as .jpg.webp?

I will drop you an email shortly, thanks 😀

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP + Infinite scrolling

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

So, it’s actually making an XHR request for the requested page (I’ve just managed to get back infront of my computer), not via admin-ajax.
My site uses the packaged implementation, not the WP Plugin version.

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP + Infinite scrolling

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

So the page in question is: https://willstocks.co.uk

Scroll to the bottom and click “Load More”

Same as when you visit that page, head to the menu and click on one of the categories – the same happens there.

I’m away from my computer so can’t check if it’s admin-ajax being called or not (off of the top of my head, I feel like it’s not… but I can’t be sure 😂)

Forum: Plugins
In reply to: [EWWW Image Optimizer] JS WebP loading both .jpeg and .webp version of image

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

Hmmmm, interesting!!!

But why would JS WebP allow my jpeg LQIP loaf… then reload that exact same image as WebP, if the jpeg has already loaded?

I wouldn’t want blank placeholders, I’d still want LQIP. I will investigate ExactDN (I’ve briefly looked but haven’t had huge amounts of time so far), but is there anything I can do in the meantime to prevent the extra, unnecessary request?

I will investigate ExactDN

Would you recommend me looking at replacing CloudFront with ExactDN (in front of S3) or going full, direct ExactDN (no S3)?

Forum: Plugins
In reply to: [EWWW Image Optimizer] WebP + WP Offload (S3 + Cloudfront)

Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago

I will give that a go shortly, thanks @nosilver4u 🙂

Forum: Plugins
In reply to: [EWWW Image Optimizer] WebP + WP Offload (S3 + Cloudfront)
Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago
I’ve implemented a little work around in S3 to bypass this for now 🙂

I have a .webp file, a .webp.webp, a .jpg and a .jpg.webp 🙂

That being said… for some reason, Safari is adamant about loading the .jpg.webp, even though that is not the markup 🙁

Fortunately, my Safari traffic is fairly minimal… but it’s still a little annoying as I can’t work out why! haha

It’s so weird… every other image element is working perfectly now… but for some reason, in Safari, that <picture> element is behaving weirdly and trying to request the .webp version of the .jpg even though it’s not browser supported…
- This reply was modified 6 years, 10 months ago by Will Stocks.
Forum: Plugins
In reply to: [EWWW Image Optimizer] WebP + WP Offload (S3 + Cloudfront)
Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago
It looks like it’s working now!! 🙂 Thank you @nosilver4u

One edge case though. If you take a look at my sidebar and footer, I have a <picture> element with webp sources and a fallback jpeg. However, in Safari on my MacBook and iPhone, I’m not seeing those pictures load. When I check the console in those browsers, I’m seeing that the fallback <img> tag is being rewritten.

Actual markup (backend)
```
<picture class="lazyload sidebar-ad">
	<source type="image/webp" media="(max-width: 320px)" srcset="https://cdn.willstocks.com/wp-content/uploads/affiliate/cloudways/Cloudways-WillStocksSidebar-Mobile-Small.webp">
	<source type="image/jpeg" media="(max-width: 320px)" srcset="https://cdn.willstocks.com/wp-content/uploads/affiliate/cloudways/Cloudways-WillStocksSidebar-Mobile-Small.jpg">
	<source type="image/webp" media="(max-width: 770px)" srcset="https://cdn.willstocks.com/wp-content/uploads/affiliate/cloudways/Cloudways-WillStocksSidebar-Mobile-Large.webp">
	<source type="image/jpeg" media="(max-width: 770px)" srcset="https://cdn.willstocks.com/wp-content/uploads/affiliate/cloudways/Cloudways-WillStocksSidebar-Mobile-Large.jpg">
	<source type="image/webp" media="(min-width: 771px)" srcset="https://cdn.willstocks.com/wp-content/uploads/affiliate/cloudways/Cloudways-WillStocksSidebar-Non-Mobile.webp">
	<source type="image/jpeg" media="(min-width: 771px)" srcset="https://cdn.willstocks.com/wp-content/uploads/affiliate/cloudways/Cloudways-WillStocksSidebar-Non-Mobile.jpg">
	<img class="lazyload sidebar-ad" src="https://cdn.willstocks.com/wp-content/uploads/affiliate/cloudways/Cloudways-WillStocksSidebar-Non-Mobile.jpg" alt="Load your WordPress site fast, using Cloudways">
</picture>
```
Frontend (JS WebP):
[Error] Failed to load resource: the server responded with a status of 403 () (Cloudways-WillStocksFooter-Desktop-Large.jpg.webp, line 0)
[Error] Failed to load resource: the server responded with a status of 403 () (Cloudways-WillStocksSidebar-Non-Mobile.jpg.webp, line 0)
[Error] Failed to load resource: the server responded with a status of 403 () (Cloudways-WillStocksSidebar-Non-Mobile.jpg.webp, line 0)

(Safari’s element browser shows that the element is still intact… but the console error disagrees!)

There are two issues here:
1. Safari doesn’t support webp, so it shouldn’t be converting those image tags?
2. If an image already has a .webp file extension, JS WebP is still appending .webp instead of respecting the existing extension? So when in Chrome (or any other browser), I’m not actually seeing these elements due to the extra .webp being appended. I can quick fix this by only having the .jpg listed and leaving JS WebP to do its thing, but thought I’d mention it!
Forum: Plugins
In reply to: [EWWW Image Optimizer] WebP + WP Offload (S3 + Cloudfront)
Thread Starter Will Stocks
(@willstockstech)

6 years, 10 months ago
Ahhh OK cool, so in theory if I add a data-src attribute as well as my existing markup, I will be all good in terms of parsing and rewriting to WebP?

The JS WebP implementation isn’t a polyfill either is it. It’s “simply” (not simple, I know!) serving WebP to supported browsers and the jpeg/png to non-supported?
- This reply was modified 6 years, 10 months ago by Will Stocks.

Viewing 15 replies - 61 through 75 (of 360 total)

← 1 2 3 4 5 6 … 22 23 24 →