AI எனது WordPress தீமை உருவாக்கியது, பிறகு அது எனது செயல்திறனைச் சீர்குலைத்தது

நான் ஒரு SEO நிபுணர். புதிய கருவிகளைச் சோதிப்பதில் எனக்கு ஆர்வம் உண்டு.

சமீபத்தில் ஒரு AI-இடம் ஆரம்பத்திலிருந்து ஒரு தனிப்பயன் WordPress தீமை உருவாக்கச் சொன்னேன். நான் அதன் அமைப்பை (layout) விவரித்து, உள்ளடக்கத்தையும் வழங்கினேன்.

முதலில், முடிவுகள் சிறப்பாகத் தெரிந்தன. மொபைல் மற்றும் டெஸ்க்டாப் ஆகிய இரண்டிற்கும் Lighthouse-இல் தளம் 100/100 மதிப்பெண்களைப் பெற்றது. குறியீடு சுத்தமாகத் தெரிந்தது.

பிறகு நான் சில சிறிய மாற்றங்களைச் செய்தேன். மொபைல் மதிப்பெண் 100-லிருந்து 89 ஆகக் குறைந்தது. டெஸ்க்டாப் 100-லேயே இருந்தது.

பிரச்சனை ஒரு சிறிய படப் பண்பில் (image attribute) இருந்தது. AI குறியீட்டை நீங்கள் ஏன் ஆய்வு செய்ய வேண்டும் என்பதை இந்தத் தவறு காட்டுகிறது.

வேகமான டெஸ்க்டாப் இணைப்புகள் தடைகளை மறைத்துவிடும். மொபைல் சாதனங்கள் அவற்றை வெளிச்சம் போட்டுக் காட்டும். மதிப்பெண் குறைந்ததன் பொருள், ஒரு அசெட் (asset) தேவையற்ற இணையப் பட்டப்பகுதியை (bandwidth) பயன்படுத்தியது என்பதாகும்.

மொபைல் அறிக்கை Largest Contentful Paint (LCP) பாதையில் உள்ள ஒரு படத்தைச் சுட்டிக்காட்டியது. அது ஒரு பழைய விளையாட்டின் ஸ்கிரீன்ஷாட் ஆகும்.

டெஸ்க்டாப்பில், இந்தப் படம் சரியாக இருக்கும். ஆனால் மொபைலில், ஒரு பெரிய தரவு அட்டவணை (data table) திரையை நிரப்புகிறது. இந்த அட்டவணை படத்தை பக்கத்தின் வெகு தொலைவிற்குத் தள்ளுகிறது. பக்கம் ஏற்றப்படும்போது அந்தப் படம் தெரிவதில்லை.

AI இந்த குறியீட்டை எழுதியது: Aladdin

குறியீடு சரியானதுதான். ஆனால் தர்க்கம் (logic) தவறானது. குறியீட்டில் உள்ள முதல் படம் 'hero image' என்று AI கருதியது. அதற்குப் பார்வை சார்ந்த விழிப்புணர்வு (visual awareness) இல்லை. இது மொபைல் உலாவிகளை ஒரு மறைக்கப்பட்டப் படத்தை உடனடியாகப் பதிவிறக்கம் செய்யத் தூண்டியது.

நான் குறியீட்டை மாற்றினேன்: Aladdin

முதலில் மதிப்பெண் மாறவில்லை. எனக்கு என்ன நடக்கிறது என்று தெரியவில்லை. பிழைகளைத் (bugs) தேடி இருபது நிமிடங்கள் செலவிட்டேன். பிறகுதான் எனது சர்வர் கேச் (server cache) இன்னும் பழைய குறியீட்டையே வழங்கிக் கொண்டிருந்தது என்பதை உணர்ந்தேன்.

நான் கேச்-ஐ (cache) நீக்கினேன். மொபைல் மதிப்பெண் மீண்டும் 100 ஆக மாறியது.

AI தோல்வியடையவில்லை. குறியீட்டின் வரிசையை வைத்து அது ஒரு தர்க்கரீதியான யூகத்தைச் செய்தது. ஆனால் அதனால் பக்கத்தின் அமைப்பைப் (layout) பார்க்க முடியாது. ஒரு அட்டவணை வியூபோர்ட்டை (viewport) எவ்வாறு மாற்றுகிறது என்பதை அது புரிந்துகொள்வதில்லை.

நீங்கள் கூறுகளை (components) உருவாக்க AI-ஐப் பயன்படுத்தினால், இந்த வழிமுறைகளைப் பின்பற்றுங்கள்:

  • fetchpriority மற்றும் loading="lazy" ஆகியவற்றை ஆய்வு செய்யுங்கள். அவற்றை உண்மையான அமைப்போடு (layout) ஒப்பிட்டுப் பாருங்கள். குறியீட்டின் வரிசையை மட்டும் நம்பாதீர்கள்.
  • அட்டவணைகள் அல்லது ஸ்லைடர்களுக்கு (sliders) அடியில் மறைந்துள்ள படங்களைத் தேடுங்கள்.
  • உங்கள் சோதனையைத் தனிமைப்படுத்துங்கள். சோதிப்பதற்கு முன் எப்போதும் உங்கள் கேச்-ஐ (cache) நீக்குங்கள். பழைய குறியீட்டை ஆய்வு செய்யாதீர்கள்.

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