AI એ મારું WordPress થીમ બનાવી, અને પછી તેણે મારી પરફોર્મન્સ બગાડી નાખી

હું એક SEO સ્પેશિયાલિસ્ટ છું. મને નવા ટૂલ્સ ટેસ્ટ કરવાનું ગમે છે.

તાજેતરમાં મેં એક AI ને શૂન્યથી (from scratch) કસ્ટમ WordPress થીમ બનાવવા માટે કહ્યું. મેં લેઆઉટનું વર્ણન કર્યું અને કન્ટેન્ટ આપ્યું.

શરૂઆતમાં, પરિણામો ખૂબ જ સરસ લાગતા હતા. સાઇટે મોબાઈલ અને ડેસ્કટોપ બંને માટે Lighthouse પર 100/100 સ્કોર મેળવ્યો હતો. કોડ પણ ક્લીન દેખાતો હતો.

પછી મેં થોડા નાના ફેરફારો કર્યા. મોબાઈલ સ્કોર 100 થી ઘટીને 89 થઈ ગયો. ડેસ્કટોપ 100 પર જ રહ્યો.

સમસ્યા માત્ર એક ઈમેજ એટ્રિબ્યુટ (image attribute) ને કારણે હતી. આ ભૂલ દર્શાવે છે કે તમારે AI કોડની સમીક્ષા શા માટે કરવી જોઈએ.

ઝડપી ડેસ્કટોપ કનેક્શન અવરોધો (bottlenecks) ને છુપાવી દે છે. મોબાઈલ ઉપકરણો તેને ખુલ્લા પાડે છે. સ્કોર ઘટવાનો અર્થ એ હતો કે કોઈ એસેટ (asset) એવી બેન્ડવિડ્થનો ઉપયોગ કરી રહી હતી જેની તેને જરૂર નહોતી.

મોબાઈલ રિપોર્ટમાં Largest Contentful Paint (LCP) પાથમાં રહેલી એક ઈમેજ તરફ નિર્દેશ કરવામાં આવ્યો હતો. તે એક જૂની ગેમનો સ્ક્રીનશોટ હતો.

ડેસ્કટોપ પર, આ ઈમેજ બરાબર છે. પરંતુ મોબાઈલ પર, એક મોટું ડેટા ટેબલ સ્ક્રીન ભરી દે છે. આ ટેબલ ઈમેજને પેજમાં ઘણું નીચે ધકેલી દે છે. જ્યારે પેજ લોડ થાય છે ત્યારે ઈમેજ દેખાતી નથી.

AI એ આ કોડ લખ્યો હતો: Aladdin

કોડ સાચો છે. લોજિક ખોટું છે. AI એ ધાર્યું કે કોડમાં રહેલી પ્રથમ ઈમેજ 'હીરો ઈમેજ' (hero image) છે. તેમાં વિઝ્યુઅલ અવેરનેસનો અભાવ છે. તેણે મોબાઈલ બ્રાઉઝર્સને તરત જ એક છુપાયેલી ઈમેજ ડાઉનલોડ કરવા માટે મજબૂર કરી દીધી.

મેં કોડ બદલીને આ કર્યો: Aladdin

શરૂઆતમાં સ્કોરમાં કોઈ ફેરફાર થયો નહીં. મને લાગ્યું કે હું પાગલ થઈ રહ્યો છું. મેં બગ્સ (bugs) શોધવામાં વીસ મિનિટ વિતાવી. પછી મને સમજાયું કે મારો સર્વર કેશ (server cache) હજુ પણ જૂનો કોડ જ સર્વ કરી રહ્યો હતો.

મેં કેશ ક્લિયર કર્યું. મોબાઈલ સ્કોર ફરીથી 100 પર આવી ગયો.

AI નિષ્ફળ ગયું નથી. તેણે કોડના ક્રમ પર આધારિત તાર્કિક અનુમાન લગાવ્યું હતું. પરંતુ તે લેઆઉટ જોઈ શકતું નથી. તે સમજી શકતું નથી કે ટેબલ વ્યૂપોર્ટ (viewport) ને કેવી રીતે બદલે છે.

જો તમે કમ્પોનન્ટ્સ બનાવવા માટે AI નો ઉપયોગ કરો છો, તો આ સ્ટેપ્સ અનુસરો:

  • fetchpriority અને loading="lazy" નું ઓડિટ કરો. તેને વાસ્તવિક લેઆઉટ સાથે તપાસો. કોડના ક્રમ પર વિશ્વાસ ન કરો.
  • ટેબલ અથવા સ્લાઇડર્સ નીચે છુપાયેલી ઈમેજ શોધો.
  • તમારા ટેસ્ટિંગને અલગ કરો. ટેસ્ટ કરતા પહેલા હંમેશા તમારું કેશ પર્જ (purge) કરો. જૂના (stale) કોડનું ઓડિટ ન કરો.

AI કોડ વાપરવા માટે પૂરતો ક્લીન છે. પરંતુ કોડ પેજની વાસ્તવિકતા સાથે મેળ ખાય છે કે નહીં તે તપાસવા માટે તમારે હજુ પણ માણસની જરૂર પડશે.

Source: https://dev.to/serdiniakos/an-ai-built-my-wordpress-theme-then-i-found-the-performance-bugs-it-left-behind-59hg

Optional learning community: https://t.me/GyaanSetuAi