As a UX Designer looking to enhance my coding skills, I must admit my code may not be perfect. Please bear with me as I navigate through this process.
I am in the process of revamping my portfolio website. The original seamless grid was created using a Masonry-like JQuery plugin, but it's quite slow.
To improve performance, I decided to switch to using Masonry, however, I still have concerns about speed. Therefore, I stumbled upon an all-CSS solution that I hope will load faster. https://css-tricks.com/seamless-responsive-photo-grid/
After seeking advice on another platform, I discovered that the issue might not lie with the sluggish plugin but rather in preloading 3MB of images. Despite resizing and optimizing the images to reduce memory usage significantly, the loading speed remains a problem. What could I be missing? How do larger websites manage to load numerous images smoothly while my code struggles? Are there additional optimization techniques I should consider implementing, such as incorporating a loading screen?
[EDIT:] All images have been compressed and optimized. While the images load fairly quickly, the main issue is the Flash of Unstyled Content (FOUC) during the process where JavaScript reformats the images.