කාර්ඩ් එකක් තට්ටාගෙන එකම පින්තූරයක් පෙන්වන UI එකක්, පළමු නೋಟට සරළයි. නමුත් පසුබැසීමේ ගැටලුව එහි පින්තූර ගොනු ගණන වැඩි වීමත්, ඒවායේ ප්රමාණය අධික වීමත් නිසා වේගය අඩුවීමයි.
ඇත්තටම 78 කාඩ් වලින් යුත් ටැරෝට් එකක් බාගත කරලා තබාගත්තාම, 80KB පමණ එක් කාඩ් එකක් වුවත්, මුළු ගොනුව 6 MB විය. මොබයිල් දත්ත සම්බන්ධතාවයක් මත, පරිශීලකයාගේ රෝගීකාරීකරණය (patience budget) ඉක්මනින් අවසන් වේ.
ප්රථම නියමය – “ඩෙක් එක නොදෙන්න, කාඩ් එක දියත් කරන්න” කියලා, මුලින්ම පසුබැස්සීම (card back) සහ ෆ්රේම් (CSS/SVG) පෙන්වලා, අද දින තෝරාගත් කාඩ් එකේ පින්තූරය පමණක් පෙර-ලෝඩ් (preload) කරමු. ඉතිරි සියලු කාඩ් පින්තූර ලේසි ලෙස lazy load කරන්න. මෙය O(deck) ගැටලුව O(1) ගැටලුවකට පරිවර්තනය කරයි.
දෙවැනි නියමය – “කලාපටය ඡායාරූපයක් නොවේ, ඒකට වෙනම කෝඩ් කිරීමක් අවශ්ය” කියලා, කලාපටය සඳහා AVIF ප්රථම, WebP fallback, JPEG නැත. AVIF හි intra‑prediction flat colour වලට හොඳ, WebP දෙවන, JPEG තෙවන. පින්තූරය පිළිබඳව
තෙවැනි නියමය – “ඇනිමේෂන් පසුබැසීමේ කාලය භාවිතා කරලා ලැටන්සි ආවරණය කරමු”. කාඩ් flip/fade ඇනිමේෂන් 300‑600 ms කාලයක් ගනී; මේ අතර පින්තූරය ලෝඩ් වීමට ඉඩ දෙන්න. පින්තූරය decode වෙලා පසු flip සිදු කරන්නේ නම්, පරිශීලකයාට නිරන්තරයෙන් මෘදු අත්දැකීමක් ලැබේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ වෙබ් සංවර්ධකයන්, ගේම්ස් නිර්මාණකරුවන්, මාරුතුරු (startup) ආයතන සඳහා මේ උපදෙස් අතිශය වැදගත්. අඩු දත්ත පරිභෝගය නිසා ග්රාහකයින්ගේ මොබයිල් පාලනය වැඩි වේ, එමඟින් bounce rate අඩුවේ. එසේම, අන්තර්ජාල වේගය අඩු ප්රදේශවලද පරිශීලකයාට සුගත UI එකක් සපයයි. කාඩ්‑ග්රාෆික්, ඩිජිටල් කලා, ඉ-කොමර්ස් වෙබ් අඩවි වැනි අඩු‑බැන්ඩ්විඩ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ථ්ධාරීන්ට අඩු පරිභෝගයෙන් ඉක්මන් අත්දැකීමක් ලැබේ.
අවසන් වශයෙන්, මෙවැනි කාර්ඩ් UI එකක් නිර්මාණය කරන ඕනෑම කෙනෙකුට, පළමු 3 නියමයන් අනුගමනය කරලා, පරිශීලකයන්ගේ රෝගීකාරීකරණය (patience) රැකගත හැකිය. ඉක්මන් ලෝඩ්, සුලභ පින්තූර, සහ ඇනිමේෂන් භාවිතය – මේ සියල්ලම එකට එකතු වෙලා අලංකාර UI එකක් නිර්මාණය කරයි.
