What is Reddit's opinion of
Squoosh?
From 3.5 billion Reddit comments
64 reviews of this app found across Reddit:
If SSR and code splitting aren't helping there's not that much that can be done in terms of performance. Gatsby really only does the same job as SSR, except renders every possible page (& page metadata) on build time which would improve the initial paint time.
What do you really mean by load time? Are you talking about the time-to-interactive or the initial paint? Gatsby and SSR solutions will really only help you get the initial paint time as low as possible but for better time-to-interactive you'll need to look at your JS execution path. There's many aspects that could be causing a slow application, for example:
- <script src=".."> and <link href=".." /> in <head /> are by default blocking resources which means that they need to be loaded before your page can display anything. Look for opportunities to defer/asynchronously load these resources
- Look for opportunities to resize & reformat your images, which probably involves making sure that images aren't bundled (as base64) inside your application (using image imports). https://squoosh.app/ is a great resource for this.
- Look in to server caching of images, fonts & script assets
- Look in to lazy loading images
- Inspect your bundles to make sure that libraries involved aren't too large
- Try to avoid "import * as ... from '...'" as this wouldn't be tree-shakeable
- Look for opportunities to opting for using different libraries that are smaller (e.g. date-fns instead of moment.js) http://bundlephobia.com is a good resource for inspecting the size of npm packages
- Pretty sure that you're using this already, but do use Lighthouse and look at the waterfall of your application to make sure that you're deferring any blocking resource.
If I disable cache and refresh, on my decent internet connection, the site is still downloading assets 14 seconds later. Please don't serve poorly compressed 600x800 images (why are half of these pngs?) that you are going to display at a fraction of their original size. Use squoosh or similar to compress images. Why is the Ubisoft logo almost 1mb?
As others suggested, I would go for WebP.
I'm here to suggest a tool called squoosh from Google Chrome Labs.
It's actually an image compression tool.
There is squoosh.app that can already compress with jpeg xl using webassembly, I'm sure there is a decoder as well, yeah, found it in their github repo.
in Google Page Insights i am now on desktop at 100...mobile is always a bit lower.
i squeeze with https://squoosh.app/ .
i use mozjpg.
try to use some cache plugins. i use: WP Fastest Cache premium and Asset CleanUp: Page Speed Booster. (clean unneeded assets from pages)
also i use cloudflare (intl. site) plus their plugin plus WP Cloudflare Super Page Cache
​
with all that it is pretty easy to go to the top...
good luck
Note that you can also use `drawable-nodpi/` to prevent the system from resizing your image. The real question is what do you intend to do with those image? These resource qualifies are there to give you the ability to provide images dimensioned for certain display densities to ensure a consistent physical size on screen while retaining the best quality. If your image can handle being up/downscaled at runtime or if you provide the user the ability to pan/zoom the image, etc. then you should place it in `drawable-nodpi/`.
As whether your image is too large (in terms of resolution or file size), that's a question that only you can answer. Considering that there are very few phones with displays able to show your entire image at 100% zoom, you probably don't need to supply it as a 4,000x3,000 file. You should also look into better compression if possible (try higher JPEG compression ratios or other formats like WebP, check out https://squoosh.app to test various methods).
If possible, look into using <picture> and let the browser decide best image to load.
There is also squoosh.app, which will often compress an image a lot better then photoshop, you can also combine it with <picture> to serve up webp images for browsers that support them
Perhaps even more surprising is that they don't serve webp or avif to supported browsers, despite it being something they like to encourage on other sites with their own tools. Putting it through squoosh.app (a tool made by Google employees) suggests a 50% reduction with no noticeable loss in quality. With the picture/source syntax, it should remain compatible with even the oldest of browsers (which I assume is a big reason).
When it comes to being able to manipulate images, there are ways to process jpeg and other formats through javascript as well. There is this nice app by Google devs to help you compare image formats for instance, and can re-encode stuff on the fly to help you test different encoding options etc: https://squoosh.app/
Yes, jpeg is not xml and SVG is not binary, and I don't care if you think vector graphics should be called an image or not, for usage on the web they are sufficciently-image to be used as image. You can render all of them to the screen in a browser and you can edit them all with javascript.
Well done!
Run your site through Page insights. Some of your content is slower loading. A quick check shows the quality and size of pictures are large and can be reduced.
You can use squoosh.app to significantly reduce the size without impacting quality much.
Backblaze B2 + Cloudflare is the most cost-efficient combo thanks to B2 pricing and the Bandwidth Alliance.
Additionally, make sure your images are optimized for web. Squoosh is a great way to do that. You can also use a <picture> tag to serve images in more efficient formats (AVIF, WEBP) witha fallback to more widely supported but less efficient ones like JPG and PNG.
use your high res images and use https://squoosh.app to save as .webp It's going to give you the best of both worlds.
Next, not sure what platform you are using. I use both google and gtmetrix.com to measure each of my pages. They will both tell you what is blocking your load time. a LOT of the time you can speed it up by adding defer tags, or async to scripts that are loading.
Wordpress, there is little you can do about it. Using redis and other tricky stuff I got a WP site to around 85 or so. The only REAL solution using WP is going headless.
With shopify, I'm guessing that headless is also going to be the path to a fast site.
I do not use either one for the backend, but front end, currently I use static landers/entry pages on everything.
All of the commerce platforms have gotten so bloated. Good luck!
squoosh.app/ does a pretty good job at webp, and it shows a before and after. On troubled sites, mainly homepages, i take the page speed complaint images, add a webp match, htaccess to use webp if supported and tell page speed to suck it
https://squoosh.app/
Try using webp converter, that should be even better in terms of size with some reasonable losses of compatibility. Default settings of effort 4 and quality 75% should be okay for most cases, but you may set even lesser value considering the size of your preview.
u/Rooged
Great job !
Pretty fast website, well coded and designed.
Pretty decent results too, a bit heavier results than tinypng.com and squoosh.app in average but not much.
But great job for the different options you added !
​
Maybe I suggest you preselect the same output extension as the given image automatically?
(if I upload a PNG, I most likely want an optimized PNG, but the default dropdown selected is JPEG, so it's one more click).
What you described is a modern SPA - just a bunch of static JS files served by a CDN for the most part. WASM cannot do more than what JS does today (and in the future) - for the most parts WASM is just making calculations in JS faster. So this question is not really specific to WASM.
Whether written in JS or WASM, most web apps will always require a backend. You cannot just allow a client side app access to a database. Or trust the client app to not be used by malicious actors - i.e., replacing your business logic JS with custom logic and uploading invalid values to the database.
So you'll always need a backend server to validate the client's logic for security purposes and integrity as well (i.e., some browser behaving differently from others).
PWA + WASM has allowed some logic to move from server side to client side but you will always require a public, secured interface for an online service, in the form of an API (REST/GraphQL/gRPC/OData). Apps that do not require such an online service (eg.: squoosh.app) can of course be written just as a bunch of static files running without a server. A lot of these 'calculator' or image editing websites do their calculations on the client devices and can run completely offline if they add a PWA manifest and a service worker - WASM has nothing to do with this since both WASM and JS can run on offline apps.
A lot of apps that are online services (Reddit's new interface for example) already have their UI ready to run offline, like a native mobile app, since it's static HTML5/JS/CSS cached in the browser. The JS just won't be able to show any content when there would be no connection to a server.
You can also try https://squoosh.app/ I took a 17.4MB jpg and here's some of the reductions with the default settings.
100% quality - 15MB
90% quality - 5.08MB
75% quality - 2.06MB
Compress your images before uploading, this tool is free and does a good job:
https://squoosh.app/
Yoast SEO is, in my experience, the least bad of all the free ones, with all its pros and cons. Disable what you don't use/need and it's fine - at least for me.
WordFence is also, IMO, the least bad of all the free options.
For caching: LiteSpeed caching plugin, if your hosting server is a LiteSpeed one is the fastest of all I've tested.
So that model is 0.3MB of geometry and 30MB of textures. You probably don't even need Blender to reduce the texture size. Just https://squoosh.app/ should do trick, and maybe resize from 2K to 1K if that looks ok.
100% correct. And even single page websites that look simple are often more complex. Take Google's Squoosh, there's a whole ton of webassembly nightmare in the background powering the whole thing.
Looks pretty slick. Maybe run your bg.jpeg and logo.png at least through squoosh.app? Your serving some pretty hefty images with those two and there is a noticeable delay on page load. Just the default settings exporting for .webp compresses bg.jpeg from 2.28 mb to 209kb.
How much you can compress depends on the complexity of the image, a single color square can be compressed much further than a landscape photo.
Try it yourself with the kind of images you're going to use using this app: https://squoosh.app/
You can try out different formats and compare the quality.
This is super useful, will bookmark.
On a technical note, some of the text in the image version suffers from readability issues due to what appears to be compression artifacts and low contrast.
There are some nice accessibility guidelines aimed at web Devs that will help sanity check contrast related text readability issues. And a different image format or higher quality setting will help with compression artifacts. Jpeg for instance is pathologically bad for text. PNG tends to do better.
For comparing and analyzing differences in image formats there's this really nice client side web app from some Google Devs. https://squoosh.app/
Try the free Squoosh.app from Google, you can compare a before and after in realtime. Ideally you'd use webp as the format, it's supported by most browsers and WP since 5.8. They also have a webp plugin for Photoshop which uses the same algorithm, meaning that you can try with the before and after on their site and test different percentages, and then replicate or automate it in Photoshop.
every microsoft win11 in theory office, teams should consent the use of jxl in 2022, and and also an android viewer is needed and the squoosh.app should do what i suggested in discord.
I no longer use WP but when i did, I hosted my sites on Cloudways Vultr High Frequency plan (1gb), used their Breeze plugin (it's gotten a lot better and works well with Cloudways since they made it themselves) for caching and minification. Used Bricks Builder as my theme, as it is both a theme and a site builder. And put my sites on Cloudflare's proxy for security/peace-of-mind reasons. I compressed my images with https://squoosh.app/ not a plugin.
My sites were in the 80s on mobile and 90s on desktop when checking with Google pagespeed.
blender can store textures externally, it's probably that the blend file doesn't include them. better export as a gltf with separate assets and then sqoosh the hell out of those textures (resize + compression). and finally: npx gltf-pipeline -i model.gltf -o model.glb --draco.compressionLevel=10
This isn't a "code performance" thing, but a huge pet-peeve of mine are images not being used properly and sucking up bandwidth.
- If you're displaying an image that's only 200px by 500px on the page, please don't use the 2000px x 5000px version that's 4.6 MB
- If you're displaying a photo as a JPEG, reduce the quality; most photos show very little noticable visual artifacts of compression below 80% quality, but you save a lot of space (unless hi-def truly is required)
- Don't use PNGs for photos. Yes, PNG is lossless -- but unless you Need losslessness or transpacency in your images (transpacency you might need, but you won't need losslessness for most webby stuff). Just go with JPEG. And see #2 above -- save JPEG at about 80% quality.
Check out https://squoosh.app/editor to see a live demo comparing jpeg, png, webp, etc... at different quality levels.
There's https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli ("sqoosh") which is a client-side CLI that lets you re-compress images to a few different formats. With one of the samples, I was able to get it to be 74% of its original size and struggled to find any visible quality differences.
There's a web version available here if you want to test out the quality: https://squoosh.app/. Some compression methods are lossy, but you can adjust how close you want the output to look like the input via the "butteraugli" score.
I kept the filesize at 5.67 MB through https://squoosh.app/, which I use for all of my VTT imports, though it might be good to scale it down manually (I kept it at 100px/tile so it's easy to do the math on rescaling it).
I made the base layer with Dungeondraft, but I added in a bunch of my own asset packs (I made one dedicated to Dwarven Ruins, since the base assets in Dungeondraft, while awesome, just weren't enough to give the right feel). I then went over everything in photoshop to smooth out some elements and add some custom items like the waterwheel that powers the blast furnace. For overall time, including the custom asset creation, I'd say "too much". ;)
You're using a fast theme (Astra), but it's being bogged down by everything else.
#1 First thing I would do would be to investigate your ad delivery. You're using "AdThrive / prebid", and it's killing you right now. Biggest issue with the site atm. I'm not familiar with AdThrive, but check those settings, or find another way to get Google Ads onto your site.
#2 - Remove Wp-Compress-Image-Optimizer. Use it to clean up previously uploaded photos, but any new photo going forward should be pre-optimized before upload, using something like "Squoosh". You will get better results as well.
#2.5 That Image Optimizer is injecting a lazyload JavaScript, which isn't needed anymore, as Lazy loading is now built into WordPress (it inserts the loading="lazy" attribute on all WP images, which is understood by all modern browsers) JavaScript lazy loading will only help IE / older browsers, but I stopped supporting features like .js Lazyloading for them a long time ago. The user needs to upgrade their end, just keep minimal support for IE to make sure it will work at all, imo.
#3 Your .css is already minified, but it's massive. It's being combined already from another plug-in, so to diagnose where that's coming from, you have to disable the CSS bundler to see where the bloat is coming from, and either remove/replace said plug-in, or use Purifycss to scrape out the unused CSS (kind of advanced to use).
Came here to say this. AV1 is a bit better supported but still no really usable yet. I think WebP is the way to go right now. Use a site like squoosh for you really big hero images and beat the colors out of them.
>I could inform you when I implement it if you would like?
Sure I'll try it. However there are already other apps that to this including compressing the image. My favorite so far is https://squoosh.app/. What I do like about yours is that I can do multiple files at once. It would also be great if I could enter multiple sizes in addition to multiple images.
Start with Squoosh to test out different file formats and compression settings and see how small you can get your images without noticing any difference. Then if you have a lot of images, use ImageMagick's CLI to bulk edit all of your photos with the settings you've discovered.
Oh, yes, I just checked. In squoosh.app for example, if you set the output to "Browser JPEG" it will output the exact same weight as SizeMyImage, as it is the same type of procedure. The "MozJPEG" has definitely improved compression. For tinypng, as they're doing compression server based, they can definitely do some more compression tricks with less time.
Thank you once again!
Different use cases. With squoosh.app you can resize / compress one image at a time. SizeMyImage is more intended for bulk resizing / compression. I love that you can see the differences from the original vs the compressed one though in squoosh.app. Maybe we can integrate that feature one day.
When I go to https://scalar.usc.edu/works/125/ne-sint-dolor-ignota-qui.33, I see the error 'TypeError: can't access property "split", first_line is undefined' in the console.
If you're not seeing errors though, something that can help is to go through your code line by line and console.log out literally anything. Log out messages like 'got to line 4', and log the value of variables. This should help you get clarity on if your code is even executing, and if it is, what's going on inside it.
Also an unrelated tip but assuming you're in control of the content on the page- reduce the size of your images. You're currently asking visitors to spend 9MB of data to see a single page, most of which is images, and it makes your page much slower to load. squoosh.app is a really great free tool to help you reduce image size without compromising on image quality. Using smaller, more optimised images is one of the single biggest things you can do to improve a website.
A great use I've seen for WASM is Squoosh which uses image compression algorithms written in languages other than JavaScript on the web. Partially for speed, but also so they didn't have to re-implement some of those massive compression algorithms in JavaScript.
It's likely not going to replace JavaScript or most of the stuff that JavaScript is currently used for, but it can allow some new more powerful web apps like video/image editors for example.
Just throw in your image and at the bottom right choose the option to resize the image as well. Your "seats.jpg" can be reduced to 31kb (from originally 1.97MB) just by reducing its width to roughly 800pixels - which is still pretty large compared to how it is displayed on the page
I'd actually recommend uploading a nice photo you've taken with your phone to Squoosh and play around with the compression and file format settings. You can easily visually compare before and after to see the quality difference along with the file size difference. It's a great way to see in real time how much data you can remove from a file and still keep it's quality high.
I always recommend to resize and compress your images as much as possible without losing noticeable quality. Usually you can save 70%+ of your base file size by doing this. I recommend using Squoosh to experiment with image compression and see how much savings you can get without losing quality. Then if you have a lot of images you can apply those changes in bulk with ImageMagick.
- Use Squoosh to test file formats and compression settings to see how much savings is possible.
- Resize your images to as close to the size they'll be displayed as possible and compress them in bulk with ImageMagick.
There is no reason that a resized PNG should be larger. Try running your image through Squoosh and compare different compression algorithms and file formats to see what gains you can get. You are physically removing a substantial number of pixels so for the file size to get bigger you must be doing something wrong.
> There are already tools like this online, but I noticed they all upload your files to an external server to convert them.
Check out Squoosh, made by the Chrome Dev team. It runs completely client-side in browser.
Unless you need the transparency part of a PNG, you should use JPGs as they're much smaller file sizes (much better for page load speed/SEO).
You can go one step further and compress your images with Squoosh (this applies for both JPG and PNG)
I cannot believe no one recommended Squoosh. It does exactly what you are looking for. You can visually compare image compression and determine how much you can compress an image without losing any perceivable quality. Then you can take these settings and bulk compress all of your files.
Squoosh.app is an awesome free tool from Google to compress images. Just drag and drop your image onto the web app and it'll compress it. Then you download the new file and put it on your website. Don't forget to name it something intuitive and add alt text.
Overall its getting there. The pages definitely need more work and could have better hierarchy. In my opinion:
You are missing an about page and a contact page.
The image you used on the homepage isnt super professional, i think it detracts more than it adds.
I would add a button on the homepage that says "see my work!" or about me!"(generally home pages introduce and link you out to other parts of the sites.
You should split up the "What I do" page images and put them in an cleaner view gallery in a "portfolio" or maybe "artwork" page.
I would add titles and text to the "What I do" videos just to give me a better understanding of your thinking.
I think you should remove the "color theory", "rock, paper, scissors" and "cooper river" piece from your portfolio; no where near the level of quality as your other pieces.
Your resume page is a little underwhelming. The image looks poor quality, plus its simple enough to be made in pure HTML and look like its part of the website. I would at least make the image larger and the background the same color as your webpage. If it takes to long to load, this compressor is what ive been using lately: https://squoosh.app halved the size of most of my images. You could also try https://tinyjpg.com
Good luck and hope to see a redesign! I really like the subtle/minimalistic look of your site. Pairs well with your work.
Just a technicality, but images are loaded after the rest of your webpage is loaded. So your webpage is "done loading" before these images are. It just may not feel like it to a user and it may create a bad experience depending on how you coded it. Ideally your images should be no higher resolution than the largest size that they will be displayed at. And the file size should be tens or hundreds of kb max. Use Squoosh to play around with image compression and find the right settings that give the best size reduction while keeping a decent looking image.
You are talking about being "responsive" here. Ideally you should only create one site and that site should scale as the browser resizes. You can do this with relative units such as percents but also media queries. Think of your values as "ratios" rather than just random absolute values. Try to figure out how these values can be calculated based on other values and code it that way. Then when the screen size changes, it'll scale nicely.
Check out https://squoosh.app, a tool built by some of my teammates on Google Web DevRel.
https://images.guide by Addy Osmani, another one of my teammates, can give you pointers on a bunch of different tools for resizing and optimizing images.
I’m not sure if Word supports SVG, but if it does and you’re working with illustrations, that’s a way to maintain resolution. Read up on the difference between vector and raster images to learn how this works.
Do you know why they settled on that resolution? To keep the size of the MS Word files small, perhaps?
A picture for the web should be way smaller than 1MB. Preferably a few hundred KB at most. Try compressing them. I'm sure you could get a much smaller file size without much loss in quality.
I'd suggest Google's Squoosh. You can visually see the quality comparison between your original image and a variety of different compression algorithms and settings. Pick one that you think looks the best and has the best compression ratio and use that one.
Don't have a lot of time at the moment, but first thing I noticed is the large image size. The background image is 4MB, reduce the size of that with apps like https://squoosh.app or something similar.
​
Secondly, for the impatient, allow a "skip prompts" button that just allows people to get to there they need to be.
I really like the design and I think it's quite unique! :)
I'd say it depends on what kind of compression you're talking about.
Is it good to losslessly compress all images on your website that can be, such as PNGs via pngcrush? Absolutely yes - otherwise you're just wasting bytes. pngcrush is great for this.
For other lossless forms of compression, such as with JPEG, WebP, etc. the answer is a lot more variable, and depends on how much you want to sacrifice quality, for filesize.
Check out https://images.guide/ as suggested by u/SanGoloteo/ for some great info, and then https://squoosh.app/ for a great web UI that lets you experiment with all kinds of image compression.
>LavishRealm(dot)com
Looks nice
It is slow and you can test it usings several tools - I used pagespeed insights (by google)
The tagline/title was a bit hard to read as some of the white text blended into the light part of the background
To speed up the site you could use https://squoosh.app/ to compress your images
Hi Jack. Its great that you have asked for feedback. On the plus side your site loads quite quickly. Its good to see that you are not using big images (width/height and file size). You could lower the file size even more with no measurable loss of quality by using Google Squoosh: https://squoosh.app/
Consider narrowing the spread of your content to something to like 768 pixels. The lines of text are quite long. Also the text colour of 'My name is Jack' needs to contrast better with the blue background. I would have your profile picture nearer the main title as well and ditch the comma. The blue background is a bit sombre as well. If you can't find a suitable text and background colour combination you can always go for black and white. Look at what's used for this Reddit channel.
The links to the other pages (the three buttons) should be at the top rather than the bottom. Also, their colours are quite bright compared with your background colour.
On some of your pages you have white text on the blue background and on others you have the text in boxes. This seems a bit inconsistent.
The links on the Projects page are not obviously links. They just look like text.
The site is not mobile friendly. Look at your site using the browser's responsive design tools, or shrink the browser window's width to see what I mean.
Finally, I see you are using Bootstrap (149Kb) for quite a simple layout. Could you write the CSS yourself?
​
I hope my comments are helpful.
​
​
I did a bit of stalking and found your site (sorry...!) and have been randomly loading a single image (/wp-content/uploads/2017/04/IMG_7607.jpg) off an on as I have been working on other things.
Bearing in mind this image is 522kb, so not small but not massive, the load time for me has varied between 1.2 seconds and 6 seconds, and everything in between.
To me, this does point to a hosting/capacity issue.
To add to this, the image is one of your header images on a post. The dimensions of this image file are 2000x1333px but it is only being displayed on the page as 1170x550px. If you run the image through squoosh.app and resize it to the correct size, plus compression, it comes out as 97.8kb which is 82% smaller than the current image file size! (although you might want to tweak the quality up a little to maintain a good image).
Imagine your visitors having to download that image, which might take randomly between 1.5 to 6 seconds to load before even having to view the others further down.
So... I would initially compress your images as much as possible and also look at either a good CDN or a better host.
I can see similar issues with your AutoOptimised CSS and JS files, taking over a second each to load, despite them being only 166kb and 213kb each. Again this points to slow hosting.
The only caveat to my testing is that you also have to add in my connection speeds etc, so your results may vary.
There are free trials for some CDN services you could try to see if it makes a difference.
Based on how you have described your site, I suspect that the images are too high quality and therefore have a too large filesize. Try compressing all images in a single post using a tool like https://squoosh.app and retest that page using GTmetrix to see if this helps.
If you are embedding maps into each post, I have read before that the script used to generate them can be slow and cumbersome.
Also, we are not ruling out the fact that you are using a shitty hosting company too.
Page speed doesn't only depend on the plugins you use. Other users have recommended good choices but I'd also take into account a couple of things:
​
- The lesser plugins you use the better
- Optimize every image you use. https://squoosh.app/ works great and it's free.
- Try using SVG when possible (Logos, illustrations...)
- Research on which hosting you'll be using. Cheaper often means slower but try to find the balance of price / speed.
In general, unless network is a huge bottleneck, a 800px picture isn't a big difference from a 200px to warrant multiple versions of an image. As long as your image itself is optimized with Squoosh you should be fine.
What if you make a front-end only app? There are lots of meaningful, useful tools that could be written that use only user generated data and output the processed data on the same page without needing anything from the server.
Look at these for example:
Though these likely don’t use React, they use something higher level than vanilla JS.