I've just become aware that my website is super slow and the images being too big are the problem. Do you recommend a pixel or file size for this theme?
http://jakemillerphoto.com/realbooks/ is impossibly slow on a brand new iphone 6s with wifi. I suspect I'm turning new prospects off because my images take too long to upload. The more I read on this subject the more confused it get! 85% of my clients are mobile and iPhone users.
Also Should I be specifying image dimensions here:
RECOMMENDATION GRADE TYPE PRIORITY Serve scaled images F (0) IMAGES HIGH Specify image dimensions F (29) IMAGES HIGH What's this mean? The following image(s) are missing width and/or height attributes.
jakemillerphoto said: I've also been told not to exceed these sizes here but then there's the whole retina screen topic that confuses the %^&* out of me.
I know what you mean. Ultimately you have to decide if you care about speed of your page or High quality images that are sharp as reality;-)
It is just recommendation that doesn't change much. If there would be width and height parameters in html <img> tag, then browser would know how much space it needs to reserve for such image. However it is pointless in case of slider or other very fluid places in layout, cause browser need to recalculate them.
I think you would get better results when you would divide this to 2 or 3 columns - images would get much smaller and should load faster. On our demo we rather use smaller columns just cause of this reason.
Also your plugins - do you use woocommerce? Do you use Jetpack? Both these plugins loads lots of CSS and JS files that you may never use, but they add bonus hundreds of KiloBytes to your page. Check all your plugins and disable those that you don't use.
Looks like I've solved this one perfectly and now I get an A on the speedtest site! All I did was match the width of the bricks in the customizer to the max width of the large size in media settings http://jakemillerphoto.com/wp-admin/options-media.php Now I have a nice big white mat on either side of the bricks on the desktop which is quite beautiful. Weeks of pulling my hair out over this. Could this stress have been avoided? Did you talk about this in the installation notes and I missed it?
You know I can't open such link cause I am not logged in your site as admin, right? ;-)
jakemillerphoto said: Could this stress have been avoided? Did you talk about this in the installation notes and I missed it?
Stress? About results in some random speed test? I think you pay attention to wrong things in that case. It doesn't matter if you have there "A" or not, but most important is feeling of user if page is loading fast enough or not.
It is true that such tests give some general guide lines what you could do to speed up your page, but speed of page is deep topic. Having "A" result while time of page load is 5.4s + 2.75MB is rather kind of paradox :-)
Anyway most important is that you feel good about it:-)
To answer your questions: 1. Could this stress have been avoided? - I believe yes, but it is personal decision not connected to web making. 2. Did you talk about this in the installation notes and I missed it? - We didn't talk about your way of solving this, but I must admit it is nice solution. However we cite one of our users at end of chapter about creating albums http://apollo13.eu/docs/photon/#!/add_new_album :
JackieR0 said: That is a real shame. For any other photographers that might read this post, there are two very important reasons to keep the images a reasonable size:
1) Loading time. The last thing you want when an agent or client is viewing your portfolio is for them to have to wait more than a split second for an image to load. With a 3MB image and even a reasonable connection speed these people will quickly move on and find another photographer for the job (especially if you have a number of images in your portfolio).
2) Discourage theft of your images. An 800px image will print at 300dpi on a 4x6 but no larger. This makes it more difficult for anyone to use your images without permission or payment. If you provide a 3MB image, you are asking for your work to be stolen. This happens ALL THE TIME.
You see Jake, there are many things we can do in theme to make best optimization for many different users of our theme, but ultimately it is all in user hands to not go overboard with some settings. Making theme for hundreds of users is very different from making site for one client, as not everybody desires same things unfortunately.
jakemillerphoto said: and I do use woocommerce and just added jetpack 'photon' because it was recommended for it's caching abilities.
That is good, I just wasn't sure they are used in your site:-)
Comments
Images are resized by script in bricks albums, and in slider album they are used in size you upload them.
Could you show me link to example subpage that feels slow? I will check what you have there.
Where are you hosted?
With kind regards.
RECOMMENDATION GRADE TYPE PRIORITY
Serve scaled images
F (0)
IMAGES HIGH
Specify image dimensions
F (29)
IMAGES HIGH
What's this mean?
The following image(s) are missing width and/or height attributes.
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/Chicago-Venue-SIX10-event-30-mc0xl9z4k2b8e25gcnjbeap1qtzm6lqdqaumchw9p0.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/Chicago_Waldorf_Astoria_Room_1520_Wedding-23-matti8rz27lqg5r6av2rmo0lq8wzomq1ykafj2d5as.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/FrancieDavid-12-mmtxxujlysnfnwlp2lso3n4kg8f4zfdh5nbdrpx7o4.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/JessNickBook-1-mmtum4tljerqzsht4cw81co4skh7n746d464e1fa50.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/chicago-long-veil-wedding-portrait-1-37-Edit-mn3fn0mq180v74guvuq33hgvohiv065v2s501yva7w.jpg (Dimensions: 2500 x 3750)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/fashion-photography-with-cube-22-mbz5838am499c9zu3jbp5j4isd3zs7nqtae8wzmirg.jpg (Dimensions: 2500 x 3750)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/jessandmike-19-mmt7tmjdqpk2dqbtb6t4zwjx72nnisr8jz8m9nzzmc.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/millenium-park-engagement-1-mbwg81ziitxb0cdc4l30f8fakawkl1ivpblxizacr8.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/millenium-park-wedding-portraits-7-mbwpq6as109eqxf7dyvlgeg282n172psenp4rm0u1g.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/modern-jewish-osteria-via-stato-wedding-17-mby302bvqakz6mqy48q6i9l8gxd2jjxomli49huxhw.jpg (Dimensions: 2500 x 1666)
http://jakemillerphoto.com/wp-content/uploads/jmp-logo.png (Dimensions: 100 x 100)
http://pixel.wp.com/g.gif?v=ext&j=1:3.9.2&blog=108118244&post=16&tz=-6&srv=jakemillerphoto.com&host=jakemillerphoto.com&ref=&rand=0.7735290331744187 (Dimensions: 6 x 5)
https://lh3.googleusercontent.com/-abMGyQOa0Xk/AAAAAAAAAAI/AAAAAAAAAAA/CqKOodmUJQI/s64-c/116920604219806682321.jpg (Dimensions: 64 x 64)
https://lh3.googleusercontent.com/-yPHYNcJf6b0/AAAAAAAAAAI/AAAAAAAAAAA/BofgHDBRDBk/s64-c/110354796203357939780.jpg (Dimensions: 64 x 64)
<img>
tag, then browser would know how much space it needs to reserve for such image. However it is pointless in case of slider or other very fluid places in layout, cause browser need to recalculate them. Wow ! nice use of single column bricks :-)About speed of this page:
All your images are around 0.5MB and one is 2MB http://jakemillerphoto.com/wp-content/uploads/bfi_thumb/chicago-long-veil-wedding-portrait-1-37-Edit-1-mnn6u0tjvmlw50oabe5s15m8l5kihlbhhw42431d30.jpg
I think you would get better results when you would divide this to 2 or 3 columns - images would get much smaller and should load faster. On our demo we rather use smaller columns just cause of this reason.
Also your plugins - do you use woocommerce? Do you use Jetpack? Both these plugins loads lots of CSS and JS files that you may never use, but they add bonus hundreds of KiloBytes to your page. Check all your plugins and disable those that you don't use.
With kind regards.
It is true that such tests give some general guide lines what you could do to speed up your page, but speed of page is deep topic. Having "A" result while time of page load is 5.4s + 2.75MB is rather kind of paradox :-)
Anyway most important is that you feel good about it:-)
To answer your questions:
1. Could this stress have been avoided? - I believe yes, but it is personal decision not connected to web making.
2. Did you talk about this in the installation notes and I missed it? - We didn't talk about your way of solving this, but I must admit it is nice solution. However we cite one of our users at end of chapter about creating albums http://apollo13.eu/docs/photon/#!/add_new_album : You see Jake, there are many things we can do in theme to make best optimization for many different users of our theme, but ultimately it is all in user hands to not go overboard with some settings. Making theme for hundreds of users is very different from making site for one client, as not everybody desires same things unfortunately. That is good, I just wasn't sure they are used in your site:-)
I am glad you feel stress relief!
With kind regards.