Web Mini Campaign
Presenter: Hung Nguyen
I/ Performance
Overview
The processing of developing web packages for current mini campaign models always requires fast, high quality production and updating the content of the web package right away (No required review process by AppStore, PlayStore) => Quickly transfer the update content to the end-user.
In order to meet the needs of loading page speed with a duration time is lesser than 1 second, we had to pass many harsh testing criteria of "Lighthouse".
First Contentful Paint
1# Do not block UI Render for any reasons
Always use preload for stylesheet and defer for script.
2# Optimize your graphics
2.1) For Local Graphics (Harcode UX/UI graphic)
=> Serve them by JPEG 2000 or WEBM (I Recommend "WEBM" for most browser compatibility)
2# Optimize your graphics
2.2)For Icons
=> Just render all of your icons by Fontawesome5 Or IconMoon.
If you want have your own icon be designed by your Designer team => Force them export all of svg icons to special font Online tool Glyphter.
2.3)For Dynamic Images Load From Server Side
=> Force to use CDN.
It should be a true Content Delivery Network. Meet our optimization technical for UploadCare CDN
3# Caching with PWA
To delivery fast and readable content to end user as fast as we can, It's pretty sure that we need get over the concept "it is uncacheable", "Safari can not reach this site because etc.."
Service worker + Memory Cache + LocalStogare
As you saw in a beautiful day your server side work very well or it does not be hit by 30.000 request or less and the cache expire time still alive and yours user using 5G or powerful Wifi, they will get very fast response
Take alook when you're falling to very normal case: the cache on server side was expired and your user have a slow connection as 4G. Service Worker appear and serve them all of the content they need. The response time is still super fast even they offline.
No dinosaurs or "Safari can not reach this site" any more :)
4# Required setup for Server Side to have best response time for UI
- Have to support HTTP/2 (Not HTTP/1.1 any more)
- Define caching time for each type of resource. (.htaccess sample)
All of your screens will always load lesser than 0.5s for the second time visit.
Click Here To Review on Live (Phone viewport only) Or Interaction wiith below Iframe
II/ Accessibility
1# Responsive Design UI For Phone
Which is the special thing here? This sound like old school. :)
=> Please meet our technical think about Scale Everything
(We don't mention about iOS here because they almost don't have any weird screen size and resolve the Responsive UI on that platform is quite easy)
Do you often hear people say that Android platform have a lot of big and small brands can produce a quality Android phone. This lead to the screen size of the phone so messy (Have action bar, don't have action bar, phone so tall or short etc...)
=> But the point is almost them are fall in two part "Ratio near as Rectangle" and "Ratio near as Square"
1# Responsive Design UI For Phone
That is the reason why we offer a teachnical "Scale Everything" with a speicial unit call "rem" or "vw / vh"
1# Responsive Design UI For Phone
The architecture above allow the website the scale Font Size and everything else elements :) with unit calculated by "pixel" based on Font Size of "root HTML" tag (it's dynamic number based on Phone physical with / height).
How to convert pixel from PSD, Zeplink, Stretch? Meet your technical based on SCSS
- Adaptability for almost Android phone and all of iOS Phone with very low OS version (iOS 10+, Android 4.2+)
- Just development layout for one time only.
- If there is any layout bug happen, it will affect on all of phone. Try to make it perfect at biggest Design first.
2# Click or Touch event is more important
The answer is we support both :). On the web desktop it switch to click even, on the mobile it switch to touch without delay
We're already build them in our common lib. Client use it's very simple
III/ API Handler
The browser native script (not jQuery or Angular) to be used to handle all API call. Since we don't support Window Phone and it is mother language of Safari and Chrome. They doesn't re-processing it through any middle bridge framework.
Endless API Call Testing (5000 records return for each API call and un-limited request) (Scroll Iframe below or click Live Review)