Server connect image filetype WebP

You have some nice competitors!

1 Like

They are my competitor, I honestly doubt they know I am even trying to compete, it’s frustrating trying to win a race the other guy doesn’t even know he is competing in.

1 Like

Paul you should consider using a CDN for your static content, not that I don’t enjoy picking apart peoples websites :wink: I see Live Chat Inc isn’t helping either.

Imagemin is on my list to play with but they have a commercial API offering if you’re feeling lazy.

1 Like

I must agree, I have used Cloudflare on the website before and had a number of issues with the site going down through UK2.net because of the turbo feature or something. Then I tried stackPath CDN and ran on. that for about a year, worked very well.
Eventually I switched hosting providers to InMotion Hosting, I ran it with CloudFlare for more than 3 months and checked average speeds, then tried it on StackPath for 2 weeks, then ran it directly on the server without CDNs, and found that the speed improvement was so tiny, that I felt it was not worth the hassle.

There are a few things I know slow down my site
LiveChat is a big one, and one I have tried to change a number of times, but my client likes it and all their staff know it etc. so I have been a little stuck with it.

Amount of .js calls which I have proven time and time again that when I have managed to combine 20.js and 20.css files in a single .min file has had a major impact, I have used a few solutions for this, @ben uses a nice one, but to be honest the whole process of combining the scripts no matter what way I have tried has always turned into a massive pain in the … When I ran this http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html it was the biggest speed increase I had ever had, was pretty amazing.

Images with lazy load and lazy sizes has helped a lot and I still use that even on the latest version of the website, also using swipers over slideshows.

Image file type I am hoping will also make a large difference.

I never mind people picking apart my sites, if it leads to ideas and suggestions, I am in.

I did show the google speed test, which seems to be the most pessimistic speed tool i have seen, while pingdom and gtmetrix both say my site loads in 2.3 seconds and list it as fast, while Google says its the slowest thing on the planet. haha, but I have to assume from an SEO standpoint that if a user typed in online accommodation booking or something especially on their mobile device, a site that takes 20 seconds to load will probably be last in the pile.

Out of interest when I took over this site from the original guys, Google speed tool was reporting 24mb and 18 seconds load time on the home page, I have managed to reduce that significantly without amuont of images or image quality issues, but 1 second would still be nicer.
Edit: in the other guys defence he was loading the standard facebook plugin on every page, so that was probably 4 seconds gone right there.

1 Like

By the way LiveChat would not be so bad if it actually ever stopped loading, I do not know what is wrong with it, its like it continues loading eternally or something.

Pingdom LiveChat removed

Pingdom LiveChat back

Even the requests make no sense

1 Like

This is where I’m hoping Webpack will come in the not too distant future.

Actually your site is pretty impressive, I see a lot of hours right there.

I have mixed feelings on CloudFlare tbh. A lot of these CDN’s have Image processing built in now like KeyCDN https://www.keycdn.com/support/image-processing. Saves you working on images server side.

Yeah LiveChat is a real pain in the ass. It’s loading asynchronously already. I don’t think you can defer it as I’m not sure their internal visitor tracking functions would work as well.

My workaround would be to create a fake Live Chat button using CSS which would then call the LiveChat script onClick. It’s not ideal but it’s the only solution I can think of.

1 Like

Very very smart, never even thought about a simple solution like that, thank you. Love it.

Because the site is backed by a FULL CMS of my own making, stackPath became an issue for me because i had to go in and update the cache everytime my client made a change, which was a total pain, and not really what they wanted, looking for instant changes.

My next thought has been this
https://prerender.io/

But to be honest, I have tried to set it up on. a dummy site a number of times and only managed once to get a half working site, so it looks great, it sounds like exactly what i need but getting it working has been an issue.
I was actually going to ask Teo if we could make a Wappler Weekly Challenge of how to hook into it, considering all the people who are going to be converting to Node.js i assume the SEO side is going to become an increasing issue with schema and head tags all not reading quite right.

1 Like

You should check out Flif too. No browser support so polyfill needed.

2 Likes

Looks brilliant, and I assume with cloudinary using it, it must be good, i have one site that is on cloudinary, expensive but good.
Expensive in South African terms, probably not in the global marketplace.

really good :+1:

Adding on to this thread, it is an additional cost but Gumlet API seems a good option for taking static images and resizing and optimizing them, along with delivering it in multiple formats such as webp. If there is no browser support then it reverts back to the original. Pretty cheap as they only charge for bandwidth, $1 per 10GB.

1 Like

Adding possible solution for another scenario where you have images being loaded.

If you are loading background images via CSS dynamically you can use Modernizr library and APP connect to load webp or fallback format.

Go to Modernizr

Make a custom build for webp detection.

Download the build.

image

Add script to your page.

<script src="path/to/modernizr-custom.js"></script>

Create variable so App Connect has access to it.

<script>
	dmx.global.set('canWebp', Modernizr.webp)
</script>

Use ternary operator where you are loading dynamically background images.

<div class="card-img-bg" dmx-style:background-image="'url(https://yourdomain.com/image.'+(canWebp?'webp':'jpeg')+')'"></div>

If the browser supports webp it will load webp, if not it will load jpeg file.

4 Likes

A year and a bit later, its supported now, well Safari is slightly behind, but who uses Safari, bahahaha.
Maybe we can get WebP integrated now that its more widely used.

Tired of seeing lighthouse tell me i need WebP and dropping my score.

4 Likes

I see Safari fully supports WebP now, took them a while but they got there, only 8 years after Google Chrome began supporting it, haha.
https://caniuse.com/webp

1 Like

I’m looking at moving over to Webp so having a native component in Wappler that would do this would be excellent. Like everyone else, I’m getting hammered with loading times on pages with a lot of images. Webp is the perfect solution.

As a stop gap, I found a nifty, and reasonably priced API which will do the conversions for me here:
https://cloudconvert.com/apis/file-conversion

I think that result more convenient the use of image CDN service as cloudimage.io even in free plan, and te possibility to pay $1 per GB of overuse.
They already delivery an optimize image format as webp.

1 Like

Thanks for that, its a great suggestion, that free account looks very good value! Even the other pricing levels are more than reasonable.

WebP support was added to Server Connect a while back.