Meet Online Store 2.0 - RIA
How to increase the speed, usability and user experience of visitors to your online store?
- Make it RIA! (Rich Internet Application)
While working on another project - a web module for a CRM customer, I was looking for a way to quickly search and filter data (which was not expected to increase by more than 500 per year). I made 10,000 demo records in the database and worked with them. The first thing we did was an AJAX search — quickly, without reloading the page frame — in general, a suitable option.
')
However, another idea occurred to me - why not load the data in the form of a json array?
As a result, the weight of 10k records turned out to be about 1mb, and the transmitted data is 80kb (gzip 9 nginx). The array search speed in the cache is less than 10ms. And another huge plus - json files are cached by the browser . Those. when the page is reloaded, the data is read from the cache instantly, only the if-modified-since request is sent to the server and receives a 304 response.
Naturally, the question arises: when changing one record - restart all 10 records again?
The solution is trivial: the data is divided into several files - from rarely changing to often.
In the demo, I tried this division on the example of laptops (about the demo below) (500+ records):
When loading, the data that is changed is loaded, the rest is taken from the cache.
(in the current demo I removed it, because I still needed to write file synchronization - this is already for production)
In parallel, I was looking for new components for myself in the Citylink online store (no success! Just a good online store - acted as a “donor” of data :) - great design and usability. But the fact that the page was constantly reloading when sorting or applying a filter was depressing.
I decided to try to apply the concept with loading and data processing (functionality) on the client side and to the online store.
Naturally, it is not necessary to do a preload of all data :) But, as you go into sections, completely, as actually implemented in the demo.
What came out of it you can see:
1. Go to the original online store , play around with sorting, filters, etc. - subjectively, remember the speed from response to display data.
2. Compare the speed in the demo of an online store (RIA) (the functionality is implemented exclusively on the client side using javascript + jquery. Nginx gives only static. No php, apache, mysql, etc.).
Subjectively, the speed in browsers is from “very fast” to “normal”: Chrome, Opera 10.5+, FF 3+, IE8 / 7.
Of course, such a RIA implementation is not for large online stores and this is not a replacement for the standard query-response-page generation model, primarily due to search engines and SEO, but it can be activated if the visitor uses a modern browser.
If you have a small / medium online store, you may well try to add client-side RIA-functionality.
Yes, this is an additional amount of work, almost dubbing the functionality of the dynamics of the serverside on the client side.
The RIA option is not a necessity, it is rather an image move, a demonstration of the use of cutting-edge technologies. If my favorite computer online store had given me the opportunity to use it in the RIA-variant, it would have greatly increased its share in my eyes.
Is it worth it? I'm sure your progressive visitors will answer - of course!
This demo is only a demonstration of the approach. Not everything is implemented, but realizable.
PS Separately, thanks to hafrauzer lafayette for providing the server for the demo.
- Make it RIA! (Rich Internet Application)
While working on another project - a web module for a CRM customer, I was looking for a way to quickly search and filter data (which was not expected to increase by more than 500 per year). I made 10,000 demo records in the database and worked with them. The first thing we did was an AJAX search — quickly, without reloading the page frame — in general, a suitable option.
')
However, another idea occurred to me - why not load the data in the form of a json array?
As a result, the weight of 10k records turned out to be about 1mb, and the transmitted data is 80kb (gzip 9 nginx). The array search speed in the cache is less than 10ms. And another huge plus - json files are cached by the browser . Those. when the page is reloaded, the data is read from the cache instantly, only the if-modified-since request is sent to the server and receives a 304 response.
Naturally, the question arises: when changing one record - restart all 10 records again?
The solution is trivial: the data is divided into several files - from rarely changing to often.
In the demo, I tried this division on the example of laptops (about the demo below) (500+ records):
... data = [
"notebooks1.json" // 18 - -
"notebooks2.json" // 4 - , ,
"notebooks3.json" // 2 -
"notebooks4.json" // 2 -
]
When loading, the data that is changed is loaded, the rest is taken from the cache.
(in the current demo I removed it, because I still needed to write file synchronization - this is already for production)
In parallel, I was looking for new components for myself in the Citylink online store (no success! Just a good online store - acted as a “donor” of data :) - great design and usability. But the fact that the page was constantly reloading when sorting or applying a filter was depressing.
I decided to try to apply the concept with loading and data processing (functionality) on the client side and to the online store.
Naturally, it is not necessary to do a preload of all data :) But, as you go into sections, completely, as actually implemented in the demo.
What came out of it you can see:
1. Go to the original online store , play around with sorting, filters, etc. - subjectively, remember the speed from response to display data.
2. Compare the speed in the demo of an online store (RIA) (the functionality is implemented exclusively on the client side using javascript + jquery. Nginx gives only static. No php, apache, mysql, etc.).
Subjectively, the speed in browsers is from “very fast” to “normal”: Chrome, Opera 10.5+, FF 3+, IE8 / 7.
Of course, such a RIA implementation is not for large online stores and this is not a replacement for the standard query-response-page generation model, primarily due to search engines and SEO, but it can be activated if the visitor uses a modern browser.
If you have a small / medium online store, you may well try to add client-side RIA-functionality.
Yes, this is an additional amount of work, almost dubbing the functionality of the dynamics of the serverside on the client side.
The RIA option is not a necessity, it is rather an image move, a demonstration of the use of cutting-edge technologies. If my favorite computer online store had given me the opportunity to use it in the RIA-variant, it would have greatly increased its share in my eyes.
To the note: in the west, many mastodons of online business and not only make versions of their services for the iPhone and iPad - and developing for these platforms requires a lot of money ( from 15-50k to 500k + $$ ). Do you think image is just a solution?
Is it worth it? I'm sure your progressive visitors will answer - of course!
This demo is only a demonstration of the approach. Not everything is implemented, but realizable.
PS Separately, thanks to hafrauzer lafayette for providing the server for the demo.
Source: https://habr.com/ru/post/109019/
All Articles