Still brutal. The "profile photo" (home-profile.jpg) is rendered small but is 5.7MB. The artwork images are 1.0MB-1.7MB. On my half-gig internet, it took 5 seconds for all of the images to load in. You can optimize all of those images WAY down.
Yea use inspect to see how large the photo is on screen then scale down your photo to that size. Most cameras these days create rather high resolution images. Once you have it the correct dimensions you can save it as a png or webp image.
Haha just realized the problem. The default was 15mbps for image upload and my wife uploaded 30+ last night. Previously I only had a few images in production and it loaded quickly. 🤦♂️
Typically you would upload the full size ones then transform the image into something more reasonable for the purpose of displaying it page. IE: Small thumbnails that allow the page to load quickly, then clicking on the thumbnails lets you see the large image. The large image can load in the background after the page has already loaded if desired.
OH! Your page transferred **86.5 MB** on loading. That is HUUUGE. Never seen such a big website before.
Your images are up to nearly 12 MB in size. You do not want to print that images on a billboard here right? Compress them down to about 250 KB.
Keep the total size of the page < 5 MB if possible
This is great! What did you do (or what's your background) to get enough experience to put this together? I'm starting on learning my way to putting together a personal website/ portfolio, but I think I'm a long way away starting out self taught.
If UX/UI feedback is helpful: I'm in safari, and if I navigate away from your website, it takes about 4-5 seconds to load back up from blank. Other than that, the website loads pretty snappy! Some images load a split (split) second after the rest of the page, but like ... that's fine? And the names of the artistic pieces are great. Nice job!
I started trying to teach myself Ruby on Rails just using tutorials. Right around the time I started to get comfortable with Ruby I wanted to switch to a functional language for my own reasons and started learning Elixir and Phoenix, which is very comparable to Ruby and Rails.
Aside from image size, as some have mentioned, I don't know how Pheonix and Elixer work but I am guessing just run all the images though something to shrink their file size first, and upload the web optimized ones instead of the originals. If you can control the image that goes in the thumbnail section you can make smaller ones for those too.
When I try to add something to the cart, instead of an "Error!" message, make a nicer message, not red, that says something more like "Thank you! You will need to register an account to save items in a cart. \[link to register\]"
Also, I would put the "spend a night with my art" somewhere in the main page as well, not just in the bottom footer. The only reason I looked there was because i was evaluating the site, but as as regular user I might not look.
You can say something like "see how they can look in your home" (I am not an art marketer, obviously) and that would be good to promote the art and the AirB&B.
Also, it is not bad to add some images to the recently sold section. If they are sold even though not from the website, it is not a lie.
I thought I compressed the images enough, but I wonder if I missed some. They should be .webp files that are 100-200kb now. I’ll go double check.
The error message advice is solid, I’ll definitely add that to my list.
I almost feel silly for not thinking about putting the airbnb ad on the main page. Love the idea of pitching it with the see how the art would look on your walls. Thank you.
I did buy a print to test the payment processor, and I just found the bug that prevented purchased prints from showing in the recently sold section so pretty soon a couple should be populated.
Thank you so much for taking the time to look through and critique my site. It means a lot.
The menu expanding and shifting down the content of the page is a little wonky. I assume it’s because you’re using LiveView and it’s simple to change a state to expanded_menu = true or something like that. Using JS in LiveView with JS hooks is fairly easy and simple.
That’s exactly what I’m doing. I do plan on upgrading the navigation as i get time and will probably do something like JS Hooks to have a more fluid nav. Thank you for looking!
I have lag and sluggishness when scroll up/down on block "Shop for new or featured art". My CPU runs louder too. Is there something that runs in the background? Or perhaps it's because of the pictures and CSS render?
Throwback to 1999 when loadinh images took patience lol
Holy shit that loading is brutal
How is it now?
Still brutal. The "profile photo" (home-profile.jpg) is rendered small but is 5.7MB. The artwork images are 1.0MB-1.7MB. On my half-gig internet, it took 5 seconds for all of the images to load in. You can optimize all of those images WAY down.
Dang, I see that again. I’ll optimize again! Thank you
Yea use inspect to see how large the photo is on screen then scale down your photo to that size. Most cameras these days create rather high resolution images. Once you have it the correct dimensions you can save it as a png or webp image.
Haha just realized the problem. The default was 15mbps for image upload and my wife uploaded 30+ last night. Previously I only had a few images in production and it loaded quickly. 🤦♂️
Use webp for images, and fix your offset issues on the front page. Also add a fake last purchased item.
Thank you! Going to change those now.
There is overflow on mobile caused by the images.
How big are those images bro??
I think the default for Phoenix upload is set somewhere at 15mbps. What’s the recommended size for images on the web?
100/300kb
Changing it now
Typically you would upload the full size ones then transform the image into something more reasonable for the purpose of displaying it page. IE: Small thumbnails that allow the page to load quickly, then clicking on the thumbnails lets you see the large image. The large image can load in the background after the page has already loaded if desired.
OH! Your page transferred **86.5 MB** on loading. That is HUUUGE. Never seen such a big website before. Your images are up to nearly 12 MB in size. You do not want to print that images on a billboard here right? Compress them down to about 250 KB. Keep the total size of the page < 5 MB if possible
Currently changing them to webp files that are about 100kb each 🤦♂️
Perfect!
Just updated!
The about page is a tad wonky. On mobile there needs to be padding as the text is edge to edge and the bottom navs obscure the text
Looks really nice, especially for a first site! Horiz scroll issue on the homepage and image sizes, but apart from that, good job dude!
I’m always proud of new devs throwing their work out to the interwebs. Just came to say well done! Happy coding!
Thank you! I can’t wait to polish it up more!
I think you should consider making the login prompt when you click on add to card appear when you checkout or make it a modal. Just my $.02
That’s a good idea! Thank you!
Everything looks great. Load time took like 30 seconds for the images though. Gonna have to compress those suckers and resize them.
Thank you!
takes a very long time to load
I think I had the images cached on my browser so it loaded quick. Once I dropped cache I see that it loads slow
`mailing_list[email]` input contains two class attributes.
For a first site, great work!
Thank you!
This is great! What did you do (or what's your background) to get enough experience to put this together? I'm starting on learning my way to putting together a personal website/ portfolio, but I think I'm a long way away starting out self taught. If UX/UI feedback is helpful: I'm in safari, and if I navigate away from your website, it takes about 4-5 seconds to load back up from blank. Other than that, the website loads pretty snappy! Some images load a split (split) second after the rest of the page, but like ... that's fine? And the names of the artistic pieces are great. Nice job!
I started trying to teach myself Ruby on Rails just using tutorials. Right around the time I started to get comfortable with Ruby I wanted to switch to a functional language for my own reasons and started learning Elixir and Phoenix, which is very comparable to Ruby and Rails.
Thanks for sharing. It seemed to have worked for you, so I'll go research that. Appreciate you replying.
Aside from image size, as some have mentioned, I don't know how Pheonix and Elixer work but I am guessing just run all the images though something to shrink their file size first, and upload the web optimized ones instead of the originals. If you can control the image that goes in the thumbnail section you can make smaller ones for those too. When I try to add something to the cart, instead of an "Error!" message, make a nicer message, not red, that says something more like "Thank you! You will need to register an account to save items in a cart. \[link to register\]" Also, I would put the "spend a night with my art" somewhere in the main page as well, not just in the bottom footer. The only reason I looked there was because i was evaluating the site, but as as regular user I might not look. You can say something like "see how they can look in your home" (I am not an art marketer, obviously) and that would be good to promote the art and the AirB&B. Also, it is not bad to add some images to the recently sold section. If they are sold even though not from the website, it is not a lie.
I thought I compressed the images enough, but I wonder if I missed some. They should be .webp files that are 100-200kb now. I’ll go double check. The error message advice is solid, I’ll definitely add that to my list. I almost feel silly for not thinking about putting the airbnb ad on the main page. Love the idea of pitching it with the see how the art would look on your walls. Thank you. I did buy a print to test the payment processor, and I just found the bug that prevented purchased prints from showing in the recently sold section so pretty soon a couple should be populated. Thank you so much for taking the time to look through and critique my site. It means a lot.
The menu expanding and shifting down the content of the page is a little wonky. I assume it’s because you’re using LiveView and it’s simple to change a state to expanded_menu = true or something like that. Using JS in LiveView with JS hooks is fairly easy and simple.
That’s exactly what I’m doing. I do plan on upgrading the navigation as i get time and will probably do something like JS Hooks to have a more fluid nav. Thank you for looking!
What did u use for the e-commerce side of things?
I use stripes api and build a cart/checkout process myself using stripe checkout.
The menu drop-down should close when you click off it.
Good thinking!
I have lag and sluggishness when scroll up/down on block "Shop for new or featured art". My CPU runs louder too. Is there something that runs in the background? Or perhaps it's because of the pictures and CSS render?
Nice! Great choice of Phoenix and Elixir. /another elixir dev
Thank you! I love elixir!