I have a Gallery Page for kitchens that my cabinet shop produces. ( RealDealKitchens.com )
Last week this page contained 9+Mb of resources. Based on Teefer’s recommendation I downloaded then ran these images through an App called “PhotoBulk”.
I made some slight modifications to the images I used but for the most part kept everything the same.
What was 9+Mb of data is now 2.6Mb.
(For what it is worth: This same page built ten years ago in iWeb only contains 613KB of resources. I don’t recall doing anything special to the images other than running them through an optimizer called “WebCrusher”.That is quite a difference in weight. I am guessing it has something to do with the fact that iWeb is not responsive in design.
So now I am jazzed about batch processing. I didn’t realize how quick it could be.
I am going to look into Retrobatch to see what it can do and I am also waiting for Nick Cates to release PHOTO 2.
I am also going to experiment with lower levels of resolution for this gallery page then bump up the quality for the linked pages. The images on this page right now average around 50-60 kb +/-
Not all of these 37 images are winners. I would like to dump about 10 of them and add 30 more.
I thought briefly about breaking this into four sections but I think that might require too much handholding with my customer. Right now it is very elegant to just point them to one page and refer to “Kitchen 17”. I might consider segmenting this first page on mobile devices but haven’t got there yet.
MY GOAL NOW has to do with how to maintain legacy links.
Over the years my original site has built up quite a fan base. We are referenced extensively on Pinterest etc. I want to be very careful to create redirects so as to not lose any of the credibility we have built up so far.
MY QUESTION is this: Do I need to keep a reference to the original kitchen project on my main gallery page in order to sustain a 301 redirect to the page? Could I point the redirect to somewhere else on the website and still maintain any vestigial references to the original page?
What I would like to do, for example, is put a more popular kitchen style in the slot for Kitchen 23 but still have the original URLs still remain vicariously intact. (that made sense to me anyway)
PS: I am really enjoying the Developer Tools in Safari and Chrome for appraising network performance. Thanks to all of you who pointed me in this direction!
After running the images through PhotoBulk, did you then run them through a lossless compression tool? Personally, I use ImageOptim, without the lossy minification enabled in the quality preferences. I think you can still compress them a bit further without any visual loss.
Here’s another good site for you to use. Your scores are very good. however, it does indicate that your images could be smaller using lossless compression. That’s why I asked the above question.
I would take the time to put all of your existing page url’s into Excel. In the column next to that, put the name of the url for that page on the new site. If the url’s are not the same, or you do not have a new page to replace the old page, then you should figure out where people who went to the old page would be best suited to land on your new site.
This Excel file then becomes your map/guide to setting up 301 redirects. With some basic Excel formulas, you can even generate the redirect in another column and paste that into your .htaccess file.
I downloaded ImagOptim and ran the gallery thumbnails through the lossless compression.
These started out at around 60kb and ended up at 55kb.
I also did the same on some hero images that were quite a bit bigger.
ImagOptim compression decreased the size of these files 15.9% on average. (range was 13.3% to 19.5%
I was not expecting to see any difference in size for the thumbnails because they were so small anyway. I looked hard at the bigger images but also couldn’t see any appreciable difference (on a retina iMac)
Gtmetrix-com was pretty interesting. They gave me an “F” for images.
Thanks for the reminder about multiple compressions.
That hadn’t occurred to me.
Fortunately this whole campaign is just for drill. I’m using the RealDealKitchens moniker to test drive a new website. When everything seems like it is working I am going to switch it out with my real website.
Unfortunately the name RealDeal is pretty cool. I should have thought of that one ten years ago.
I spent some more time with GTMETRIX this morning.
This, of course, generated more questions than it answered.
(Like what is a PageSpeedScore vs Yslow Score)
Number of Requests also seems to be a salient indicator (though I am not sure for what)
The attached Jpeg shows generic reports for three pages.
The one with the F Page Speed hasn’t had any compression applied.
The GTMETRIX report has a section where you can evaluate every image.
They indicate how much reduction is possible and show you a side X side comparison of what the compressed image would look like relative to the original image.
The problem with this now is that this is more interesting than my business.
First, sorry to send you down another rabbit hole! Don’t get super focussed on these scores. They are just guides to help you improve things. Often times there’s nothing you can do about some of them, and they aren’t the be-all end-all of optimization.
Each of those tests are made by different companies and look at different things and weight them differently.
I really only shared the link to show how well your page is doing. Run Apple’s website in it and look at those results. You’ll drive yourself (and us!) nuts if you try to get 100% on everything! The only thing that I saw there was the ability to use lossless compression to reduce the image files a bit further.
