This has been a work-in-progress for almost a year...no no I don't mean this repository, God that would be embarrassing! I told Masha I would make her a website and over the last year the idea, the design, the what I wanted to do changed time and time again. Not until I put a hard deadline on the project and said this is what I will use and this is how I will do it "problems be damned!" did this project come to life.
The real basis for me tackling this project came from a link sent to me for a photography website that a gentleman had promised to make her many years prior to us knowing each other. No lie at all I will never be able to make a website as visually stunning as this gentleman did, it's just not my skill set; however 9.5 minutes to load on a slow 3G connection with no caching: that I can do better on. So no, this website might not be the sleek and sexy beast that he offered, but in my mind if I can get a customer to your content in mere seconds then lack of sexiness should be less of a factor in converting the user to a customer.
So I approached this project from the standpoint of always looking and testing from a throttled environment in Chrome, usually opting for slow 3G. Having never been to Russia I have no idea what the end user's available connection speeds are nor how available that connection is so the goals were:
- Make it fast.
- Make it cache.
When designing this site a few important questions needed to be answered:
- How to deliver the high-resolution images effectively and efficiently to the end user who in 2017 will likely be viewing the product from a mobile device?
- How to minimize the number of requests and/or size of data being communicated to that device and across the end user's network?
- How to implement i18n since product's target audience are non-native English speakers?
- Responsive images...FML 💩
It turns out I would be able to answer 3 of those questions with one answer and that solution was using the Cloudinary API. With Cloudinary I could store the original hi-res photos in the cloud and through combinations of flags/parameters create a dynamic url that would achieve 2 major things for me:
- The image would be responsive,
- The image would retain quality, but not be 10MB for a single request.
I had hoped that using a CSS Sprite would be possible as this would have cut down on the number of requests dramatically for the /gallery views; however I would not be able to deliver the best quality images in that case. Seeing as how this is a photography website I need to deliver the best quality as often as possible. Cloudinary does off the ability to create sprites and had my situation been different this would have been the route I would have taken.
Thankfully I did not have to learn Russian for this project to come together...mine is still quite meager! Also and very thankfully, there was an example of how to setup react-intl and next all while utilizing the server-side rendering feature of next. Should the end user's browser have a default language of Russian the server will render views in that language.
The following data was collected using the Chrome Developer Tools. The environment the data was gathered in was that of a fast 3G connection with no caching applied.
Other benchmark data can be found in the benchmarks directory. The stats there were gathered using WebPageTest.org
https://mashaeltsovaphotography.com
| Requests | Data Transferred | Time to First Paint | Load Time |
|---|---|---|---|
| 43 | 446KB | 229ms | 1.35s |
https://mashaeltsovaphotography.com/gallery
| Requests | Data Transferred | Time to First Paint | Load Time |
|---|---|---|---|
| 59 | 537KB | 563ms | 1.67s |
For context the website discussed earlier on had the following stats:
| Requests | Data Transferred | Time to First Paint | Load Time |
|---|---|---|---|
| 53 | 27.3MB | 6.02s | 2.6min |
I would like to look into these things as well as do more with:
- SSR Caching
- Write more concrete tests for the booking form, navigation, & intl.
- Read up on spinning up my own benchmark tests
- CSS Grid fallback...it's super bad I don't have anything in place 😱
- Read up and implement better accessibility. I don't know anything at all about WARIA or whatever it is called and this really needs to be done!
Thanks goes to these wonderful people (emoji key):
 Cody Brunner 💻 🎨 📖 🤔 🚇 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!