I’m happy to say that I’ve completed (version 1) of my new web site with Blocs. Thanks to all the community people who helped answered my questions when I was having a tough time of it. Most appreciated. You can see the web site here:
https://www.headshotstoronto.com
Cheers,
Stephen
Congratulations! Nicely done… 
Looks great. Only loading takes a long time of almost all pictures. Maybe the files are too big?
Hi r_botman,
Thanks for the feedback. The images are pretty trim, after I brought the file sizes down when I was having some caching problems with different browsers. I’ve tested it (as have other friend’s I’ve asked to help out) on desktop, mobile (tablet and phone) and it should be super fast.
Can I ask what platform (mobile or desktop / Android/iPhone) and browser you were using? Thanks that would really help.
Much appreciated.
I checked it on my iPhone X with Safari. It really is slow on my iPhone and have good quick WiFi here and also checked on 4G
Nice site, I like it. It does load slow. I’m use Safari on a Mac and use cable internet that is very fast. Maybe just reduce the number of images in the carousel. Do you need 12? I would think less would do the same thing. Each image is around 800 K (larger than needed), times 12 is what is causing it to load slowly.
One thing I would consider is making the Headshots Logo and header a little smaller. By doing this the image would fit better on the screen without having to scroll down to see all the full headshot images.
Nice job,
Casey
I’ve created the images to be for desktop, but now even after reducing the size of the JPEGs using JPGmini, and borrowing a friend’s phone, it does indeed take ages to load.
Apparently clearing the “cached images and files” in Chrome does nothing in terms of resetting the web site so I can check for myself. I also have it set for Lazy Loading but that apparently doesn’t make any difference on the index page.
If I reduce them to very small file sizes then they won’t look very well on the desktop browsers. It is disappointing that in 2020, a web site with a mere 35mb of files, fails to load properly in a modern browser for people with high-speed internet. I could understand if people were still using 14.4k modems but this is ridiculous. My old site, which unfortunately wasn’t SSL compliant, had no such issues. I will pull the carousel off the index page and replace it with a static image, and turn off Lazy Loading so the whole web site should load in the background. It is kind of a shame that I can’t use this feature for what amounts to an almost bare-bones web site.
Thanks Casey,
I’ve now reduced the file sizes and width/height, removed the carousel on the front page, and taken off Lazy Loading. It seems to work for me in Safari, Chrome, Firefox, Mobile Android and iPhone.
I’m not sure what you mean by “One thing I would consider is making the Headshots Logo and header a little smaller. By doing this the image would fit better on the screen without having to scroll down to see all the full headshot images.” If you’re using Safari on Mac… it should be fitting on the left side of the screen with a full nav bar… unless you have it really scrunched up and even then the web site is “mobile responsive model”.
Web Site Safari Desktop Fulll Size:
Web Site Safari Desktop Slim Size:
I think the carousel images were ok on the front page just too many. You could still use the 2500px wide images but you really need to compress them more. Get the images to about 400k and they will load faster and still look good. Here’s an example of 2500px wide and under 400k.
On your portfolio page they images are still large. You can easily make them 1200-1600px wide and compress them to around the 300k range. The page will load a lot better. Here’s an example of one of my recent blog posts. These are at 1200px wide.
https://itsmytimephotography.com/2-4-20.html
The header area I was referring about is that being that it’s pretty wide it takes up more of the viewable page. If the top header was not as wide you would see more of the portrait without having to scroll down the page.
@StephenHutchinson you are doing some really nice headshots. Great work, the website looks very professional. I little more compression on the images will really help your load time. Yes, I also agree it seems in today’s world we should be able to have larger images. Mobile is starting to rule, and mobile internet is not a fast as cable.
Hope this helps
Casey
Much appreciated. I guess I’m spoiled having both fast internet at home as well as on my phone… Here in Toronto we get download speeds of up to 200-300 mbps. when near good cell towers but usually about 75 mbps everywhere else. Divide that 75 by 8 bits in a byte, and I can see why… 1 mb per second isn’t exactly fast… so compression is indeed the way to go.
Nice website; and indeed also here in The Netherlands it takes time to load.
I might suggest to use apps like “ImageOptim” or “Squash” to resize the images. They do an excellent job and are fairly easy to use.
Hi Mattheus,
Thanks for the insight. I made some inroads yesterday to pare down the size of my JPEGs as per above… but I still have some work to do in order to resize and change the PNG files to JPGs… that’s what’s killing me. I will do it manually in Lightroom and then re-import it into Blocs… that way it will export the right file size etc…
In case anyone hasn’t used Google’s Page Speed (insight)… here’s the link…
https://developers.google.com/speed/pagespeed/insights/
I scored 95% for Mobile and 99% on Desktop but I want to get the speeds even faster.
Hi Stephen,
Nice website! I like to use GTMetrix to test the performance of my websites. They actually do the testing from Vancouver, so the speed should be great for your website (I guess you are using the local hosting?).
This is the result I get for your website. Loading fast, but you should optimize the images further.
https://gtmetrix.com/reports/www.headshotstoronto.com/3uG5U2O0
Thanks Eldar, I appreciate the compliment. Earlier today I was watching some of your videos, one on SEO, and the other on preparing images for web. Very useful.
I still have yet to convert the PNG files to JPGs etc as per my last post above. I tried the same thing on GT Metrix and got almost the same score. It automatically picks Vancouver and I suppose one has to sign up / login to choose from somewhere else in the world. I’m using Hostgator, which is located in the U.S.A.
You mentioned that “loading was fast” but in the PageSpeed score it says 30% where the average seems to be around 73%. It’s a bit confusing… real world results vs. stats…
Update, after changing the graphics… I’m happy to report good scoring on both GTMetrix and PageSpeed Insights…
GTMetrix
Page Speed Insights - Desktop
Page Speed Insights - Mobile
Thanks to everyone who helped me in this endeavour. Much appreciated! I’m hoping this thread will serve as inspiration for others with similar issues.
@Eldar, explaining how you use GTmetric and what you do to correct issues would make a nice YouTube video. I think a lot of users understand about using the wrong image size but some of the other tests and how to make corrections are more complicated.
Thanks
Casey
I had just that very thing in mind. Thanks for mentioning it.
It is ironic… back in the early 1990s, I was designing web sites with images that were 640x480 at maximum, using super compression in Photoshop, and Netscape Navigator 2.0 to view the results. Uploading files was with a USRobotics 28.8k/56k modem to a remote FTP site. Although things have changed much in the intervening decades, I hadn’t thought that image-resizing would still be a thing… now I know better… because mobile is the new 56k modem standard… 
