طراحی سایت های سه بعدی با ابزار هوش مصنوعی Base44 | راهنمای گام‌به‌گام برای خروجی حرفه‌ای + سئو

طراحی سایت های سه بعدی با ابزار هوش مصنوعی Base44 می‌تواند در زمان کوتاه به شما یک نمونه جذاب (Demo/Prototype) بدهد، اما اگر هدف‌تان «سایت سریع، سئومحور و مناسب ترافیک واقعی» است باید خروجی را مهندسی کنید: لود تنبل (Lazy Load)، جداسازی DOM متنی از Canvas، بهینه‌سازی مدل‌های GLB، کاهش JS و مراقبت از Core Web Vitals (خصوصاً LCP و INP). در این مقاله، قدم‌به‌قدم یاد می‌گیرید Base44 دقیقاً کجا می‌درخشد، کجا خطرناک می‌شود، چگونه خروجی‌اش را حرفه‌ای کنید، و یک نمونه کد واقعی برای پیاده‌سازی اصولی بخش 3D با سئو خوب می‌بینید.

البته فراتر از بحث‌های فنی و ابزارهایی مثل Base44 که سرعت توسعه را بالا می‌برند، نباید از حاشیه‌ها و ادعاهای اغراق‌آمیز بازار فاصله بگیریم. این روزها بسیاری از تازه‌کارها تصور می‌کنند با چند کلیک ساده در ابزارهای هوش مصنوعی می‌توان به درآمدهای نجومی و میلیونی بدون داشتن تخصص رسید؛ موضوعی که ابعاد تاریک و پشت‌پرده آن را به‌طور مفصل در مقاله جامع بررسی کرده‌ایم: رویافروشی هوش مصنوعی در شبکه‌های اجتماعی: حقیقت پشت پرده درآمدهای نجومی بدون تخصص. شناخت واقعیت‌های بازار کار و تخصص واقعی، مانع از افتادن در دام این ادعاهای فریبنده خواهد شد.

طراحی سایت های سه بعدی با ابزار هوش مصنوعی Base44: واقعاً چه چیزی تحویل می‌دهد؟

Base44 یک ابزار مبتنی بر هوش مصنوعی و «ساخت سریع» است که معمولاً با یک پرامپت، یک صفحه یا پروژه با UI آماده، انیمیشن‌ها و گاهی بخش‌های تعاملی تولید می‌کند. وقتی بحث سه‌بعدی وسط می‌آید، معمولاً خروجی‌ها به یکی از این شکل‌ها هستند:

1. یک صحنه WebGL/Canvas (اغلب با رویکردی شبیه Three.js یا یک لایه رندر معادل)
2. انیمیشن‌های سنگین فرانت‌اند (Scroll-based / parallax / shader-like effects)
3. یک تجربه “wow effect” که در اولین نگاه جذاب است، ولی ممکن است در موبایل و روی اینترنت ضعیف افت کند

نکته مهم: Base44 اغلب در تولید «ظاهر و حس» خیلی خوب است، اما در سه حوزه معمولاً نیاز به مهندسی جدی دارد:

• پرفورمنس واقعی در موبایل
• سئو و قابلیت ایندکس کامل محتوا
• کنترل دقیق روی معماری و Code Splitting

برای اینکه این مقاله کلی‌گویی نشود، همه چیز را با معیارهای فنی و قدم‌های عملی جلو می‌بریم.

طراحی سایت های سه بعدی با ابزار هوش مصنوعی Base44: آیا خروجی حرفه‌ای می‌دهد؟

پاسخ کوتاه و دقیق: برای “نمونه اولیه” و “صفحات کمپین” بله؛ برای “محصول نهایی سئومحور و پرترافیک” به‌تنهایی نه.

خروجی حرفه‌ای یعنی چه؟

وقتی می‌گوییم خروجی حرفه‌ای، منظور فقط زیبایی نیست. خروجی حرفه‌ای یعنی:

• LCP خوب (در عمل زیر ۲.۵ ثانیه در صدک ۷۵ کاربران)
• INP خوب (تعامل سریع؛ بدون لگ هنگام اسکرول/کلیک)
• CLS نزدیک صفر (پرش نداشتن صفحه)
• HTML سمانتیک و قابل خزیدن برای گوگل
• کد قابل نگهداری (ماژولار، قابل توسعه، بدون باندلِ هیولایی)
• Fallback برای موبایل/دستگاه ضعیف (تصویر یا حالت ساده)

Base44 معمولاً بخش زیبایی و سرعت تولید را عالی می‌دهد، اما برای رسیدن به این تعریف حرفه‌ای، باید یک لایه مهندسی روی خروجی بنشیند.

من چند بار خروجی ابزارهای AI ساخت سایت (از جمله خروجی‌های مشابه Base44) را برای مشتری‌هایی که “فقط یک لندینگ سریع” می‌خواستند بررسی کردم. چیزی که تکرار می‌شد این بود: لندینگ روی دسکتاپ عالی بود، اما روی موبایل INP و اسکرول فاجعه می‌شد؛ چون Canvas و انیمیشن‌ها بدون محدودیت فریم و بدون Lazy Load از لحظه لود صفحه فعال بودند. با یک دور مهندسی (جداسازی باندل، کاهش فریم رندر، و Deferred load) همان صفحه هم جذاب ماند هم قابل استفاده شد.

آیا خروجی Base44 سرعت سایت را پایین نمی‌آورد؟

اگر بی‌قید استفاده شود: چرا، می‌تواند شدیداً سرعت را پایین بیاورد.

اما اگر مهندسی شود: می‌شود هم سه‌بعدی داشت، هم سرعت خوب.

دقیقاً چه چیزهایی سرعت را خراب می‌کنند؟

در سایت‌های سه‌بعدی (به‌خصوص خروجی‌های خودکار) ۶ عامل اصلی قاتل سرعت هستند:

1) مدل سه‌بعدی سنگین (GLB/Textures)

• فایل ۳ تا ۱۵ مگابایت برای یک Hero Section = قاتل LCP در موبایل
• تکسچرهای 4K بدون فشرده‌سازی = مصرف RAM و GPU بالا

2) JS زیاد + باندل یک‌تکه (Monolithic Bundle)

• وقتی موتور 3D، انیمیشن‌ها، و UI همگی در باندل اولیه باشند، زمان parse/compile JS بالا می‌رود.

3) رندر دائمی (Always-on rendering)

• خیلی از خروجی‌ها 60fps دائم رندر می‌زنند حتی وقتی کاربر اصلاً با صحنه تعامل ندارد.

4) شیدرها و افکت‌های سنگین

• Bloom/SSR/Refraction واقعی روی موبایل = افت فریم و لگ

5) عدم استفاده از CDN و کش صحیح

• مدل و تکسچر بدون Cache-Control = دانلود مجدد و فشار بیهوده

6) تداخل با اسکرول (Scroll jank)

• وقتی GSAP/scroll listeners سنگین باشند، INP و تجربه کاربر ضربه می‌خورند.

با سایتی که با Base44 ساخته شده می‌توان از گوگل رتبه گرفت؟

بله، می‌شود رتبه گرفت؛ اما شرطی. شرطش این است که «محتوای اصلی» سایت شما برای گوگل قابل فهم و قابل ایندکس باشد و Core Web Vitals نابود نشده باشد.

گوگل با سایت‌های 3D/JS-heavy چه مشکلی دارد؟

گوگل صفحات جاوااسکریپتی را رندر می‌کند، اما:

• رندر JS یک مرحله جداگانه و گاهی با تأخیر است
• اگر محتوای مهم فقط بعد از تعامل کاربر ظاهر شود، ممکن است دیده نشود
• اگر صفحه فقط یک Canvas باشد، سیگنال محتوایی کافی ندارد

برای مطالعه دقیق‌تر اصول، مستندات رسمی را ببینید:

JavaScript SEO basics (Google Search Central)
Core Web Vitals (Google)

یک بار روی یک سایت “خوشگلِ خفن” کار کردم که عملاً تمام صفحه فقط یک Canvas تمام‌صفحه بود و متن‌ها به شکل بافت روی مدل نمایش داده می‌شدند. از نظر بصری شاهکار بود، اما از نظر سئو تقریباً هیچ. با یک تغییر معماری ساده: متن‌ها را به DOM واقعی (H1/H2/P) منتقل کردیم و Canvas را به لایه تزئینی تبدیل کردیم، در کمتر از چند هفته صفحات شروع کردند به گرفتن Impression و سپس کلیک. همان ظاهر حفظ شد، ولی گوگل بالاخره “چیزی برای فهمیدن” داشت.

راهکار مهندسی: چطور هم صحنه ۳ بعدی جذاب داشته باشیم هم رتبه ۱ سئو؟

این بخش مهم‌ترین قسمت مقاله است. اینجا نسخه «مهندسی‌شده» یک سایت سه‌بعدی را می‌دهم؛ دقیق، اجرایی، و مناسب وبمسترها.

اصل طلایی: 3D باید تزئینی/تعامل‌محور باشد، نه حامل محتوای اصلی

یعنی:

• محتوای سئو (عنوان‌ها، توضیحات، FAQ، مزیت‌ها، CTA، مشخصات) در HTML واقعی باشد.
• 3D یک لایه تجربه باشد که اگر لود نشد، سایت همچنان کامل و قابل استفاده باشد.

معماری پیشنهادی (Production-ready)

1) SSR یا Pre-render برای محتوای متنی

اگر پروژه Next.js / Nuxt / Remix دارید:

• متن و ساختار را سروررندر کنید
• 3D را فقط در کلاینت و با Lazy import بیاورید

2) Lazy Load واقعی برای 3D (نه فقط “تصمیم ذهنی”)

• موتور 3D و فایل GLB فقط زمانی لود شوند که:
  • کاربر به سکشن رسید (IntersectionObserver)
  • یا دستگاه توانمند بود (Device memory / hardware concurrency)
  • یا کاربر “Start Experience” را زد

3) Fallback استاتیک برای موبایل/ضعیف‌ها

• یک تصویر WebP از همان صحنه داشته باشید
• روی موبایل یا حالت Save-Data همان را نشان دهید

4) رندر تطبیقی (Adaptive Rendering)

• وقتی کاربر idle است یا سکشن خارج از viewport است:
  • رندر را pause کنید
• در موبایل:
  • رندر را 30fps کنید
  • یا فقط هنگام تعامل رندر کنید (demand-based)

5) بهینه‌سازی فایل‌های سه‌بعدی

• خروجی را به glTF/GLB ببرید
• Draco / Meshopt compression
• تکسچرها:
  • سایز منطقی (۱k یا ۲k نه ۴k)
  • فرمت‌های بهینه
• تعداد متریال‌ها و draw callها را کم کنید

6) کش و CDN

• مدل‌ها و تکسچرها روی CDN
• Cache-Control بلندمدت + نسخه‌گذاری فایل

آیا کدهای Base44 را می‌توان مهندسی و بهینه کرد؟ (بله) + آموزش عملی

بله. خروجی Base44 معمولاً قابل مهندسی است چون در نهایت HTML/CSS/JS است. کاری که باید انجام دهید، این است که خروجی را مثل یک “Prototype” ببینید و برای Production اصلاح کنید.

چک‌لیست بهینه‌سازی خروجی Base44 (قدم‌به‌قدم)

گام 1: جدا کردن بخش 3D از لود اولیه

• هر چیزی که مربوط به 3D است باید از باندل اصلی جدا شود.
• هدف: لود اولیه صفحه سبک بماند.

گام 2: اضافه کردن Lazy Import

به جای اینکه در ابتدای صفحه موتور 3D را import کنید، وقتی لازم شد import کنید.

گام 3: اضافه کردن IntersectionObserver

وقتی سکشن 3D نزدیک viewport شد، آن وقت اسکریپت را لود کنید.

گام 4: کنترل رندر و پاکسازی (Cleanup)

• هر event listener اضافی حذف شود
• animation loop مدیریت شود
• memory leak نداشته باشید

گام 5: Fallback برای حالت‌های ضعیف

• prefers-reduced-motion
• navigator.connection.saveData
• موبایل ضعیف

ترکیب طراحی با ابزارهای هوش مصنوعی و کدنویسی (روش پیشنهادی برای وبمسترها)

اگر بخواهیم یک مسیر کاملاً کاربردی و منطقی بدهیم، پیشنهاد من این است:

بهترین Workflow

1. Base44 برای تولید سریع UI و ایده
2. خروجی گرفتن و تثبیت Layout
3. انتقال بخش سئو و محتوایی به ساختار تمیز
4. 3D را به عنوان ماژول جدا وارد کنید
5. بهینه‌سازی مدل و تکسچر
6. پایش با Lighthouse / PageSpeed / Search Console

این روش باعث می‌شود:

• سرعت تولید بالا بماند
• کیفیت فنی و سئو قربانی نشود

من زمانی که محدودیت زمان داشتم، چند بار از خروجی‌های AI به عنوان “اسکلت” استفاده کردم. نکته‌ای که همیشه جواب داده این بوده: هیچ‌وقت خروجی را مستقیم Deploy نکردم. همیشه یک مرحله “مهندسی پرفورمنس” گذاشتم: جدا کردن باندل، حذف انیمیشن‌های اضافی، و ساخت fallback. نتیجه این بود که هم مشتری حس “سایت مدرن” گرفت، هم گزارش‌های Core Web Vitals قربانی نشد.

آموزش ساخت اصولی سایت های سه بعدی + مثال واقعی (نمونه کد)

در این مثال، یک سکشن 3D داریم که:

• محتوای سئو در HTML واقعی است
• 3D فقط وقتی سکشن دیده شد لود می‌شود
• برای کاربرانی که motion کم می‌خواهند یا Save-Data دارند، fallback نمایش داده می‌شود
• رندر فقط زمانی فعال است که واقعاً لازم باشد

ساختار پیشنهادی

• index.html (یا قالب صفحه)
• 3d/scene.js (ماژول سه‌بعدی)
• assets/model.glb (مدل فشرده)
• assets/fallback.webp (تصویر جایگزین)

کد نمونه (HTML + JS) — سبک و قابل استفاده در پروژه‌های واقعی

1) HTML سمانتیک (محتوای سئو محور + جای 3D)

<section class="hero">
  <div class="hero__content">
    <h1>طراحی سایت های سه بعدی با ابزار هوش مصنوعی Base44</h1>
    <p>
      اگر می‌خواهید یک تجربه سه‌بعدی جذاب داشته باشید اما سرعت و سئو را قربانی نکنید،
      باید صحنه 3D را به‌صورت مهندسی‌شده و با Lazy Load پیاده‌سازی کنید.
    </p>

    <h2>طراحی سایت های سه بعدی با ابزار هوش مصنوعی Base44 برای چه پروژه‌هایی مناسب است؟</h2>
    <p>
      برای لندینگ‌های کمپینی و صفحات معرفی محصول عالی است؛ اما برای سایت‌های محتوایی
      باید محتوا در HTML واقعی باقی بماند.
    </p>
  </div>

  <div class="hero__visual" id="hero3d"
       data-model="/assets/model.glb"
       data-fallback="/assets/fallback.webp"
       aria-label="3D visual experience">
    <!-- fallback image will be injected here -->
  </div>
</section>

2) JS بهینه: Lazy Load + Fallback + کنترل اجرا

(function () {
  const el = document.getElementById("hero3d");
  if (!el) return;

  const modelUrl = el.getAttribute("data-model");
  const fallbackUrl = el.getAttribute("data-fallback");

  // 1) Fallback first: always show something instantly (good for LCP/UX)
  const img = new Image();
  img.src = fallbackUrl;
  img.alt = "3D preview";
  img.loading = "lazy";
  img.decoding = "async";
  img.style.width = "100%";
  img.style.height = "100%";
  img.style.objectFit = "cover";
  el.appendChild(img);

  // 2) Respect reduced motion / save-data
  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const saveData = navigator.connection && navigator.connection.saveData;

  if (prefersReducedMotion || saveData) {
    // Keep static fallback only
    return;
  }

  // 3) Lazy init only when near viewport
  let started = false;

  const start3D = async () => {
    if (started) return;
    started = true;

    // dynamic import = code splitting
    const { initScene } = await import("/3d/scene.js");
    await initScene({ container: el, modelUrl });

    // optional: once 3D is running, you can hide fallback image
    img.style.opacity = "0";
    img.style.transition = "opacity 300ms ease";
    setTimeout(() => img.remove(), 350);
  };

  const io = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          io.disconnect();
          start3D().catch(() => {
            // if 3D fails, keep fallback (no blank section)
            started = false;
          });
        }
      }
    },
    { root: null, threshold: 0.15, rootMargin: "200px" }
  );

  io.observe(el);
})();

3) فایل /3d/scene.js (اسکلت Three.js با رندر کنترل‌شده)

این یک اسکلت است؛ می‌توانید متریال‌ها/نورها/کنترل‌ها را بسته به پروژه توسعه دهید.

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.167.1/build/three.module.js";
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.167.1/examples/jsm/loaders/GLTFLoader.js";

export async function initScene({ container, modelUrl }) {
  // Basic renderer setup
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setClearColor(0x000000, 0);
  container.appendChild(renderer.domElement);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(35, container.clientWidth / container.clientHeight, 0.1, 100);
  camera.position.set(0, 0.4, 2.4);

  // Lights (cheap but nice)
  const hemi = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
  scene.add(hemi);

  const dir = new THREE.DirectionalLight(0xffffff, 0.8);
  dir.position.set(2, 3, 2);
  scene.add(dir);

  // Load model
  const loader = new GLTFLoader();
  const gltf = await new Promise((resolve, reject) => {
    loader.load(modelUrl, resolve, undefined, reject);
  });

  const model = gltf.scene;
  model.position.set(0, -0.2, 0);
  scene.add(model);

  // Adaptive render: render only when visible
  let running = true;
  let rafId = 0;

  const onResize = () => {
    const w = container.clientWidth;
    const h = container.clientHeight;
    if (!w || !h) return;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize(w, h);
  };

  const ro = new ResizeObserver(onResize);
  ro.observe(container);

  // Pause rendering when out of viewport
  const io = new IntersectionObserver((entries) => {
    const v = entries[0]?.isIntersecting;
    running = !!v;
    if (running && !rafId) tick();
    if (!running && rafId) {
      cancelAnimationFrame(rafId);
      rafId = 0;
    }
  }, { threshold: 0.01 });

  io.observe(container);

  // Basic animation (cheap)
  const clock = new THREE.Clock();

  function tick() {
    rafId = requestAnimationFrame(tick);
    const t = clock.getElapsedTime();
    model.rotation.y = t * 0.35;
    renderer.render(scene, camera);
  }

  tick();

  // Cleanup on page unload (avoid leaks)
  window.addEventListener("beforeunload", () => {
    try {
      io.disconnect();
      ro.disconnect();
      if (rafId) cancelAnimationFrame(rafId);
      renderer.dispose();
      container.removeChild(renderer.domElement);
    } catch {}
  }, { once: true });
}

چرا این مثال “سئومحور” است؟

• H1/H2/P واقعی داریم (قابل ایندکس)
• 3D به محتوای اصلی وابسته نیست
• LCP با fallback تصویر بهتر می‌ماند
• 3D فقط نزدیک viewport لود می‌شود
• رندر دائمی خارج از دید کاربر نداریم (حفظ INP و مصرف باتری)

نکات تکمیلی برای اینکه واقعاً «رتبه ۱» بگیرید (نه فقط یک سایت قشنگ)

1. روی کلمات کلیدی و ساختار محتوا سرمایه‌گذاری کنید
   • حداقل ۲ تا ۳ H2 در مقاله (انجام شد)
   • FAQ واقعی و پاسخ‌های کوتاه اضافه کنید (اگر مقاله را به بلاگ می‌برید)
2. تصاویر و fallback را بهینه کنید
   • WebP/AVIF
   • سایز درست (نه بزرگ‌تر از نیاز)
3. مراقب JS third-party باشید
   • هر اسکریپت اضافی = ریسک INP
4. پایش دائمی
   • Search Console → Core Web Vitals
   • Lighthouse موبایل، نه فقط دسکتاپ

جمع‌بندی نهایی

• Base44 می‌تواند شروع فوق‌العاده‌ای برای طراحی سایت های سه بعدی با ابزار هوش مصنوعی Base44 باشد؛ مخصوصاً برای نمونه‌سازی سریع، لندینگ کمپین و نمایش خلاقانه.
• اما خروجی خام را نباید بدون مهندسی وارد سایت پرترافیک کرد.
• اگر می‌خواهید هم سه‌بعدی جذاب داشته باشید هم رتبه عالی گوگل:
  • محتوای سئو را HTML واقعی نگه دارید
  • 3D را Lazy Load و ایزوله کنید
  • fallback و رندر تطبیقی بگذارید
  • مدل‌ها را فشرده و سبک کنید
• کدهای Base44 قابل مهندسی و بهینه‌سازی هستند و با چند تکنیک مثل dynamic import، IntersectionObserver، و کنترل animation loop می‌توانید خروجی را به سطح Production برسانید.

چک‌لیست و راهنمای پیاده‌سازی اصولی سایت‌های سه‌بعدی (ویژه وردپرس، المنتور و سایت‌های پرترافیک)

بخش اول: معماری چیدمان صفحات در المنتور / وردپرس

برای اینکه گوگل‌بات متن‌ها را راحت بخواند و سرعت سایت آسیب نبیند، صفحات را به دو بخش کاملاً مجزا تقسیم می‌کنیم:

1. لایه سمانتیک (محتوای متنی و اصلی):

   • از ویجت‌های استاندارد متن، سرتیترها (H1 تا H3) و ویرایشگر متن المنتور استفاده کنید.
   • کلیدواژه‌های اصلی، توضیحات و دکمه‌های کال تو اکشن (CTA) باید دقیقاً در همین بخش متنی قرار بگیرند و هیچ وابستگی‌ای به کدهای جاوااسکریپت نداشته باشند.

2. لایه تعاملی سه‌بعدی (بخش 3D):

   • به جای قرار دادن مستقیم کدهای سنگین در صفحه، از یک بخش جداگانه با ویجت HTML اختصاصی یا یک شورت‌کد (Shortcode) ماژولار استفاده کنید.
   • این ویجت فقط یک نگهدارنده (<div id="hero3d">) است که محتوای سه‌بعدی را بعد از اسکرول کاربر بارگذاری می‌کند.

بخش دوم: چک‌لیست بهینه‌سازی و سرعت (Performance Check)

۱. مدیریت LCP (تصویر جایگزین / Fallback)

• ابزارهای سه‌بعدی اجازه نمی‌دهند اولین بایت‌های صفحه سریع رندر شوند. برای حل این مشکل، همیشه یک تصویر WebP فشرده (که اسکرین‌شات مدل سه‌بعدی است) به عنوان پس‌زمینه لایه نگهدارنده قرار دهید.
• عکس با ویژگی loading="lazy" و ابعاد مشخص لود شود تا مرورگر پرش صفحه (CLS) نداشته باشد. موتور سه‌بعدی بعد از لود کامل جایگزین این تصویر می‌شود.

۲. بهینه‌سازی مدل‌های GLB/GLTF

• هیچ‌وقت فایل خام مدل سه‌بعدی را مستقیم روی هاست آپلود نکنید.
• حتماً با ابزارهایی مثل gltf-pipeline یا ابزار آنلاین فشرده‌سازی Draco Compression، حجم فایل را زیر ۵۰۰ کیلوبایت بیاورید.
• تکسچرها باید با فرمت WebP یا Basis و حداکثر کیفیت 2K (ترجیحاً 1K برای موبایل) به کار روند.

۳. کنترل INP و جلوگیری از افت فریم (Main Thread Optimization)

• صحنه سه‌بعدی نباید در پس‌زمینه صفحات دیگر رندر شود. با استفاده از کدهایی که بالاتر دادیم (IntersectionObserver)، مطمئن شوید چرخه رندر (requestAnimationFrame) فقط زمانی فعال است که کاربر دقیقا در همان سکشن قرار دارد.
• در موبایل، تعداد فریم‌ها را با Math.min(window.devicePixelRatio, 1.5) محدود کنید تا به پردازنده گرافیکی گوشی فشار نیاید.

بخش سوم: نحوه پیاده‌سازی در وردپرس و المنتور (کد نمونه شورت‌کد)

برای اینکه بدون دستکاری هسته قالب، بخش سه‌بعدی را به صورت ماژولار به وردپرس اضافه کنید، می‌توانید کد زیر را در فایل functions.php قالب فرزند (Child Theme) خود قرار دهید یا به عنوان یک افزونه اختصاصی سبک بسازید:

<?php
/**
 * Plugin Name: Optimized 3D Scene Injector
 * Description: Adds optimized 3D container and lazy-loaded scripts safely.
 * Version: 1.0.0
 * Author: Nima & Assistant
 */

// تعریف شورت‌کد برای نمایش بخش سه بعدی در المنتور
function render_optimized_3d_section( $atts ) {
    $atts = shortcode_atts( array(
        'model'    => '/wp-content/uploads/models/scene.glb',
        'fallback' => '/wp-content/uploads/images/fallback.webp',
    ), $atts, 'optimized_3d' );

    ob_start();
    ?>
    <div class="wp-3d-wrapper" id="hero3d"
         data-model="<?php echo esc_url( $atts['model'] ); ?>"
         data-fallback="<?php echo esc_url( $atts['fallback'] ); ?>">
        <img src="<?php echo esc_url( $atts['fallback'] ); ?>" alt="3D Scene Preview" class="wp-3d-fallback" loading="lazy" />
    </div>
    <style>
        .wp-3d-wrapper { width: 100%; height: 450px; position: relative; overflow: hidden; }
        .wp-3d-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
        .wp-3d-wrapper canvas { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; }
    </style>
    <script type="module">
        // اسکریپت لود تنبل مشابه نمونه قبلی که فقط در دید کاربر اجرا می‌شود
        (function () {
            const el = document.getElementById("hero3d");
            if (!el) return;
            const modelUrl = el.getAttribute("data-model");
            const fallbackImg = el.querySelector(".wp-3d-fallback");

            if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || (navigator.connection && navigator.connection.saveData)) {
                return; // اگر کاربر حالت کاهش حرکت یا ذخیره اینترنت داشت، فقط تصویر ایستا بماند
            }

            let started = false;
            const start3D = async () => {
                if (started) return;
                started = true;
                try {
                    // لود داینامیک کتابخانه سه بعدی برای جلوگیری از افت سرعت لود اولیه سایت
                    const THREE = await import("https://cdn.jsdelivr.net/npm/three@0.167.1/build/three.module.js");
                    const { GLTFLoader } = await import("https://cdn.jsdelivr.net/npm/three@0.167.1/examples/jsm/loaders/GLTFLoader.js");
                    
                    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" });
                    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
                    renderer.setSize(el.clientWidth, el.clientHeight);
                    el.appendChild(renderer.domElement);

                    const scene = new THREE.Scene();
                    const camera = new THREE.PerspectiveCamera(35, el.clientWidth / el.clientHeight, 0.1, 100);
                    camera.position.set(0, 0.4, 2.4);

                    scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1.0));
                    const dir = new THREE.DirectionalLight(0xffffff, 0.8);
                    dir.position.set(2, 3, 2);
                    scene.add(dir);

                    const loader = new GLTFLoader();
                    loader.load(modelUrl, (gltf) => {
                        const model = gltf.scene;
                        scene.add(model);
                        
                        fallbackImg.style.opacity = "0";
                        fallbackImg.style.transition = "opacity 300ms ease";
                        setTimeout(() => fallbackImg.remove(), 350);

                        let rafId;
                        const clock = new THREE.Clock();
                        const tick = () => {
                            rafId = requestAnimationFrame(tick);
                            model.rotation.y = clock.getElapsedTime() * 0.35;
                            renderer.render(scene, camera);
                        };
                        tick();
                    });
                } catch (e) {
                    console.error("3D Load Error:", e);
                }
            };

            const io = new IntersectionObserver((entries) => {
                if (entries[0]?.isIntersecting) {
                    io.disconnect();
                    start3D();
                }
            }, { threshold: 0.15, rootMargin: "200px" });

            io.observe(el);
        })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode( 'optimized_3d', 'render_optimized_3d_section' );

بخش چهارم: تست نهایی و پایش سئو

بعد از اینکه این ساختار را در سایت پیاده کردید، حتماً این سه ابزار را چک کنید:

1. Google PageSpeed Insights: امتیاز لایت‌هاوس نسخه موبایل را بررسی کنید تا مطمئن شوید LCP زیر ۲.۵ ثانیه و INP در وضعیت سبز است.
2. Google Search Console: بخش Core Web Vitals را بعد از یک هفته پایش کنید تا مطمئن شوید ربات گوگل صفحات را بدون ارور رندر کرده است.
3. Responsive Test: مطمئن شوید در گوشی‌های میان‌رده، اسکرول صفحه کاملاً روان و بدون لگ (Jank) انجام می‌شود.