AI ನನ್ನ WordPress ಥೀಮ್ ಅನ್ನು ನಿರ್ಮಿಸಿತು, ನಂತರ ಅದು ನನ್ನ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅನ್ನು ಹಾಳುಮಾಡಿತು

ನಾನು ಒಬ್ಬ SEO ತಜ್ಞ. ನನಗೆ ಹೊಸ ಪರಿಕರಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಎಂದರೆ ಇಷ್ಟ.

ಇತ್ತೀಚೆಗೆ ನಾನು ಒಂದು AI ಅನ್ನು ಮೊದಲಿನಿಂದಲೇ (from scratch) ಕಸ್ಟಮ್ WordPress ಥೀಮ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಕೇಳಿದೆ. ನಾನು ಅದರ ಲೇಔಟ್ ಅನ್ನು ವಿವರಿಸಿದೆ ಮತ್ತು ವಿಷಯವನ್ನು ಒದಗಿಸಿದೆ.

ಆರಂಭದಲ್ಲಿ, ಫಲಿತಾಂಶಗಳು ಅದ್ಭುತವಾಗಿ ಕಂಡವು. ಮೊಬೈಲ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್ ಎರಡರಲ್ಲೂ Lighthouse ನಲ್ಲಿ ಸೈಟ್ 100/100 ಸ್ಕೋರ್ ಪಡೆಯಿತು. ಕೋಡ್ ಕೂಡ ಸ್ವಚ್ಛವಾಗಿತ್ತು.

ನಂತರ ನಾನು ಕೆಲವು ಸಣ್ಣ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಿದೆ. ಮೊಬೈಲ್ ಸ್ಕೋರ್ 100 ರಿಂದ 89 ಕ್ಕೆ ಇಳಿಯಿತು. ಡೆಸ್ಕ್‌ಟಾಪ್ 100 ರಲ್ಲೇ ಉಳಿಯಿತು.

ಸಮಸ್ಯೆ ಕೇವಲ ಒಂದು ಇಮೇಜ್ ಅಟ್ರಿಬ್ಯೂಟ್‌ನಲ್ಲಿತ್ತು. AI ಕೋಡ್ ಅನ್ನು ನೀವು ಏಕೆ ಪರಿಶೀಲಿಸಬೇಕು ಎಂಬುದನ್ನು ಈ ತಪ್ಪು ತೋರಿಸುತ್ತದೆ.

ವೇಗದ ಡೆಸ್ಕ್‌ಟಾಪ್ ಕನೆಕ್ಷನ್‌ಗಳು ಅಡಚಣೆಗಳನ್ನು (bottlenecks) ಮರೆಮಾಚುತ್ತವೆ. ಮೊಬೈಲ್ ಸಾಧನಗಳು ಅವುಗಳನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತವೆ. ಸ್ಕೋರ್ ಇಳಿಯಿತು ಎಂದರೆ ಯಾವುದೋ ಒಂದು ಅಸೆಟ್ (asset) ಅನಗತ್ಯವಾಗಿ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಸುತ್ತಿತ್ತು ಎಂದರ್ಥ.

ಮೊಬೈಲ್ ವರದಿಯು Largest Contentful Paint (LCP) ಪಾತ್‌ನಲ್ಲಿರುವ ಒಂದು ಚಿತ್ರವನ್ನು ಸೂಚಿಸಿತು. ಅದು ಹಳೆಯ ಗೇಮ್‌ನ ಸ್ಕ್ರೀನ್‌ಶಾಟ್ ಆಗಿತ್ತು.

ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ ಈ ಚಿತ್ರವು ಸರಿಯಾಗಿದೆ. ಆದರೆ ಮೊಬೈಲ್‌ನಲ್ಲಿ, ದೊಡ್ಡ ಡೇಟಾ ಟೇಬಲ್ ಸ್ಕ್ರೀನ್ ಅನ್ನು ತುಂಬುತ್ತದೆ. ಈ ಟೇಬಲ್ ಚಿತ್ರವನ್ನು ಪುಟದ ಕೆಳಭಾಗಕ್ಕೆ ತಳ್ಳುತ್ತದೆ. ಪುಟ ಲೋಡ್ ಆಗುವಾಗ ಆ ಚಿತ್ರವು ಕಾಣಿಸುವುದಿಲ್ಲ.

AI ಈ ಕೋಡ್ ಅನ್ನು ಬರೆಯಿತು: Aladdin

ಕೋಡ್ ಸರಿಯಾಗಿದೆ. ಆದರೆ ತರ್ಕ (logic) ತಪ್ಪಾಗಿದೆ. ಕೋಡ್‌ನಲ್ಲಿರುವ ಮೊದಲ ಚಿತ್ರವೇ hero image ಎಂದು AI ಭಾವಿಸಿತು. ಅದಕ್ಕೆ ದೃಶ್ಯದ ಅರಿವು (visual awareness) ಇಲ್ಲ. ಇದು ಮೊಬೈಲ್ ಬ್ರೌಸರ್‌ಗಳು ಅಡಗಿರುವ ಚಿತ್ರವನ್ನು ತಕ್ಷಣವೇ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಒತ್ತಾಯಿಸಿತು.

ನಾನು ಕೋಡ್ ಅನ್ನು ಹೀಗೆ ಬದಲಾಯಿಸಿದೆ: Aladdin

ಆರಂಭದಲ್ಲಿ ಸ್ಕೋರ್ ಬದಲಾಗಲಿಲ್ಲ. ನನಗೆ ಏನೋ ದಾರಿ ತಪ್ಪಿದಂತಾಯಿತು. ಬಗ್‌ಗಳನ್ನು ಹುಡುಕಲು ನಾನು ಇಪ್ಪತ್ತು ನಿಮಿಷಗಳನ್ನು ವ್ಯಯಿಸಿದೆ. ನಂತರ ನನ್ನ ಸರ್ವರ್ ಕ್ಯಾಶ್ (server cache) ಇನ್ನೂ ಹಳೆಯ ಕೋಡ್ ಅನ್ನು ತೋರಿಸುತ್ತಿರುವುದನ್ನು ನಾನು ಅರಿತೆ.

ನಾನು ಕ್ಯಾಶ್ ಅನ್ನು ಕ್ಲಿಯರ್ ಮಾಡಿದೆ. ಮೊಬೈಲ್ ಸ್ಕೋರ್ ಮತ್ತೆ 100 ಕ್ಕೆ ಮರಳಿತು.

AI ವಿಫಲವಾಗಲಿಲ್ಲ. ಅದು ಕೋಡ್‌ನ ಕ್ರಮದ ಆಧಾರದ ಮೇಲೆ ತಾರ್ಕಿಕ ಅಂದಾಜನ್ನು ಮಾಡಿತು. ಆದರೆ ಅದಕ್ಕೆ ಲೇಔಟ್ ಕಾಣಿಸುವುದಿಲ್ಲ. ಒಂದು ಟೇಬಲ್ ವ್ಯೂಪೋರ್ಟ್ (viewport) ಅನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುತ್ತದೆ ಎಂಬುದು ಅದಕ್ಕೆ ಅರ್ಥವಾಗುವುದಿಲ್ಲ.

ನೀವು ಘಟಕಗಳನ್ನು (components) ನಿರ್ಮಿಸಲು AI ಬಳಸುತ್ತಿದ್ದರೆ, ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಿ:

  • fetchpriority ಮತ್ತು loading="lazy" ಅನ್ನು ಆಡಿಟ್ ಮಾಡಿ. ಅವುಗಳನ್ನು ನಿಜವಾದ ಲೇಔಟ್‌ಗೆ ಹೋಲಿಸಿ ಪರಿಶೀಲಿಸಿ. ಕೋಡ್‌ನ ಕ್ರಮವನ್ನು ನಂಬಬೇಡಿ.
  • ಟೇಬಲ್‌ಗಳು ಅಥವಾ ಸ್ಲೈಡರ್‌ಗಳ ಅಡಿಯಲ್ಲಿ ಅಡಗಿರುವ ಚಿತ್ರಗಳನ್ನು ಹುಡುಕಿ.
  • ನಿಮ್ಮ ಪರೀಕ್ಷೆಯನ್ನು ಪ್ರತ್ಯೇಕಿಸಿ. ಪರೀಕ್ಷಿಸುವ ಮೊದಲು ಯಾವಾಗಲೂ ನಿಮ್ಮ ಕ್ಯಾಶ್ ಅನ್ನು ಕ್ಲಿಯರ್ ಮಾಡಿ. ಹಳೆಯ (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