AI నా WordPress థీమ్ను రూపొందించింది, కానీ అది నా పెర్ఫార్మెన్స్ను దెబ్బతీసింది
నేను ఒక SEO స్పెషలిస్ట్. నాకు కొత్త టూల్స్ను పరీక్షించడం అంటే ఇష్టం.
ఇటీవల నేను ఒక AIని మొదటి నుండి (from scratch) ఒక కస్టమ్ WordPress థీమ్ను రూపొందించమని కోరాను. నేను లేఅవుట్ను వివరించి, కంటెంట్ను అందించాను.
మొదట, ఫలితాలు అద్భుతంగా కనిపించాయి. మొబైల్ మరియు డెస్క్టాప్ రెండింటిలోనూ Lighthouse స్కోరు 100/100 వచ్చింది. కోడ్ కూడా చాలా క్లీన్గా ఉంది.
ఆ తర్వాత నేను కొన్ని చిన్న మార్పులు చేశాను. మొబైల్ స్కోరు 100 నుండి 89కి పడిపోయింది. డెస్క్టాప్ స్కోరు 100 వద్దే ఉంది.
సమస్య కేవలం ఒక ఇమేజ్ ఆట్రిబ్యూట్ (image attribute) వల్ల వచ్చింది. AI కోడ్ను మీరు ఎందుకు సమీక్షించాలో ఈ తప్పు తెలియజేస్తుంది.
వేగవంతమైన డెస్క్టాప్ కనెక్షన్లు అడ్డంకులను (bottlenecks) దాచిపెడతాయి. కానీ మొబైల్ పరికరాలు వాటిని బయటపెడతాయి. స్కోరు తగ్గడం అంటే, ఒక అసెట్ (asset) అనవసరంగా బ్యాండ్విడ్త్ను వాడుతోందని అర్థం.
మొబైల్ రిపోర్ట్ Largest Contentful Paint (LCP) పాత్లో ఉన్న ఒక ఇమేజ్ను చూపించింది. అది ఒక పాత గేమ్ యొక్క స్క్రీన్షాట్.
డెస్క్టాప్లో ఈ ఇమేజ్ పర్వాలేదు. కానీ మొబైల్లో, ఒక పెద్ద డేటా టేబుల్ స్క్రీన్ను నింపేస్తుంది. ఈ టేబుల్ వల్ల ఇమేజ్ పేజీలో చాలా కిందకు వెళ్ళిపోతుంది. పేజీ లోడ్ అయినప్పుడు ఆ ఇమేజ్ కనిపించదు.
AI ఈ కోడ్ను రాసింది:
ఈ కోడ్ సరైనదే (valid). కానీ లాజిక్ తప్పు. కోడ్లో ఉన్న మొదటి ఇమేజ్ 'హీరో ఇమేజ్' (hero image) అని AI ఊహించింది. దానికి విజువల్ అవగాహన లేదు. కనిపించని ఇమేజ్ను కూడా మొబైల్ బ్రౌజర్లు వెంటనే డౌన్లోడ్ చేసేలా ఇది చేసింది.
నేను కోడ్ను ఇలా మార్చాను:
మొదట స్కోరు మారలేదు. నాకు పిచ్చి పడుతుందేమో అనిపించింది. బగ్స్ కోసం ఇరవై నిమిషాల పాటు వెతికాను. అప్పుడు నా సర్వర్ క్యాచీ (server cache) ఇంకా పాత కోడ్నే చూపిస్తోందని అర్థమైంది.
నేను క్యాచీని క్లియర్ చేశాను. మొబైల్ స్కోరు మళ్ళీ 100కి చేరుకుంది.
AI విఫలం కాలేదు. కోడ్ క్రమం ఆధారంగా అది ఒక లాజికల్ ఊహ చేసింది. కానీ దానికి లేఅవుట్ కనిపించదు. ఒక టేబుల్ వ్యూపోర్ట్ను (viewport) ఎలా మారుస్తుందో దానికి అర్థం కాదు.
మీరు కాంపోనెంట్స్ (components) నిర్మించడానికి AIని ఉపయోగిస్తుంటే, ఈ దశలను అనుసరించండి:
fetchpriorityమరియుloading="lazy"లను ఆడిట్ చేయండి. వాటిని అసలు లేఅవుట్తో సరిపోల్చి చూడండి. కోడ్ క్రమాన్ని నమ్మకండి.- టేబుల్స్ లేదా స్లైడర్ల కింద దాగి ఉన్న ఇమేజ్ల కోసం వెతకండి.
- మీ టెస్టింగ్ను విడిగా చేయండి. పరీక్షించే ముందు ఎల్లప్పుడూ మీ క్యాచీని క్లియర్ చేయండి. పాత (stale) కోడ్ను ఆడిట్ చేయకండి.
AI కోడ్ ఉపయోగించడానికి తగినంత క్లీన్గా ఉంటుంది. కానీ ఆ కోడ్ పేజీ యొక్క వాస్తవ స్థితికి సరిపోతుందో లేదో తనిఖీ చేయడానికి మీకు ఒక మనిషి అవసరం.
Optional learning community: https://t.me/GyaanSetuAi