حزمة أداء لموقع مستضاف: Tailwind مُجمَّع، وخطوط مستضافة ذاتيًا، وWebP/AVIF، وبدون أي طلبات لأطراف ثالثة

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. موقعي [عنوان الموقع] على خادم Opus Growth الخاص بي (الخادم [اسم الخادم]، ومفتاح الموقع [مفتاح الموقع] إذا كان موقعًا إضافيًا) أُنشئ بحزمة المواقع، وهو بطيء على الجوال. تحمّل الحزمة Tailwind عبر Play CDN الذي يُجمَّع داخل المتصفح، والخطوط من Fontshare، ومكتبات الحركة من jsDelivr، وتولّد القائمة بـ JavaScript. دون تغيير مظهر الموقع، حوّل كل ذلك إلى ملفات مُجمَّعة مستضافة على خادمي الخاص. الهدف: أثناء تحميل الصفحة، لا يرسل الموقع أي طلب واحد خارج نطاقه. 1. خط الأساس. دوّن الإصدار الحالي بـ site_versions. شغّل core_web_vitals للصفحة الرئيسية و[الصفحة الأثقل] على الجوال وسطح المكتب مع resources=true. ضع في جدول درجة الأداء وLCP وCLS وإجمالي عدد الطلبات والحجم الكلي والطلبات الخارجة من نطاقك. اعرض ملفات HTML بـ site_list_files واستخرج من كل صفحة جميع وسوم `<script>` و`<link>`. 2. اعرض عليّ الخطة وانتظر موافقتي. اذكر كل ملف سيتغير أو سيُضاف. 3. جمّع Tailwind. انقل إعداد `tailwind.config` المضمَّن في الصفحات إلى `_src/tailwind.config.js`؛ اجعل content هو `["./*.html", "./**/*.html"]`، وأضف أي ملف JavaScript ما زال يولّد فئات. أنشئ `_src/input.css` من السطور `@tailwind base; @tailwind components; @tailwind utilities;` متبوعة بمحتوى assets/app.css. شغّل `npx --yes tailwindcss@3 -c _src/tailwind.config.js -i _src/input.css -o assets/site.css --minify` عبر site_run_command. سمِّ الملف باسم مشتق من hash محتواه، مثل `assets/site.3f9a1c2b.css`، وحدّث الرابط في كل صفحة، واحذف سكربت Play CDN والإعداد المضمَّن. أعد البناء بعد كل تعديل HTML يغيّر الفئات، وإلا ستغيب الفئات الجديدة عن CSS. 4. استضف الخطوط بنفسك. اجلب CSS الخاص بـ Fontshare بطلب منفصل لكل عائلة وكل وزن، مثل `https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap`؛ لاحظنا عودة عائلات أخرى عند طلب عدة عائلات أو أوزان دفعة واحدة، لذا تحقق في كل مرة من اسم font-family المُرجَع. نزّل ملفات woff2 إلى `assets/fonts/`، واكتب قواعد `@font-face` مع `font-display: swap` في أعلى assets/app.css (يبحث design-check عن الخط المميز هناك)، وحمّل مسبقًا خط النص الأساسي والخط المستخدم في العنوان الكبير بالشاشة الأولى عبر `<link rel="preload" as="font" type="font/woff2" crossorigin>`. احذف روابط `preconnect` وstylesheet الخاصة بـ Fontshare. تأكد أن ترخيص الخط يسمح بالاستضافة الذاتية. 5. أعد توليد الصور. انقل ملفات JPG وPNG الأصلية إلى `_src/img/`. ثبّت sharp خارج مجلد الموقع: شغّل `mkdir -p /data/_build && cd /data/_build && npm init -y && npm i sharp` عبر site_run_command مع background=true، وتابعه بـ site_command_status؛ وإذا كان هذا المجلد غير قابل للكتابة فأخبرني بالسبب. بواسطة سكربت node، أنتج WebP (جودة 72) وAVIF (جودة 50) بعرض 480 و800 و1200 و1600 بكسل لكل صورة. في HTML، غلّف كل صورة بـ `<picture>`: عنصر `<source type="image/avif" srcset sizes>` لصيغة AVIF، وعنصر `<img>` بصيغة WebP كبديل مع srcset وsizes خاصين به، والعرض والارتفاع الحقيقيين للصورة الأصلية. تحصل الصورة الرئيسية في الشاشة الأولى على `fetchpriority="high"` ولا تُحمَّل كسولًا؛ وتحصل كل الصور الأخرى على `loading="lazy" decoding="async"`. اكتب sizes بما يطابق العرض الذي تشغله الصورة فعلًا. 6. نظّف السكربتات. إذا لم يكن في الموقع حركة، أو كانت مجرد روابط زخرفية مثل `data-reveal`، فأزل تمامًا GSAP وScrollTrigger وSplitText وLenis وSwiper وmotion.js والسكربت المضمَّن الذي يضيف الفئة `anim`، واحذف قواعد Lenis وanim من app.css. وإذا كانت الحركة ضرورية فعلًا، فانسخ المكتبة إلى `assets/vendor/`، وحمّلها بـ `defer` في الصفحات التي تستخدمها فقط، وتأكد أن المحتوى يبقى ظاهرًا مع `prefers-reduced-motion`. حوّل القائمة والتذييل إلى HTML ثابت بسكربت `chrome-stamp.mjs`: يقرأ site.config.js ويكتب بين العلامات `<!-- chrome:nav:start -->` و`<!-- chrome:nav:end -->` وchrome:footer، ويبني قائمة الجوال بـ `<details>`، ويُبقي ارتفاع الروابط 44 بكسل على الأقل، ويستخدم فقرات بدل h4 لعناوين أعمدة التذييل. ثم احذف chrome.js ووسم سكربت site.config.js من الصفحات؛ ويبقى site.config.js مجرد ملف بيانات تقرؤه السكربتات. 7. اجعل طلبات الأطراف الثالثة صفرًا. باستخدام site_run_command، ابحث في HTML وCSS عن قيم src وhref التي تبدأ بـ `https://`؛ وانقل كل مورد خارج نطاقك إلى الموقع أو احذفه، باستثناء روابط tel: وmailto: وwa.me. ضع الأيقونة favicon في `assets/img/` واربطها في كل صفحة، وإلا سيطلب المتصفح /favicon.ico ويسجل خطأ 404 في وحدة التحكم. 8. ترويسات التخزين المؤقت. شغّل site_headers مع mode="list". إذا لم يكن أي ملف تحت assets سيُستبدل بنفس الاسم (اسم CSS يحمل hash، وتأخذ الصور اسمًا جديدًا عند تغيّرها)، فاعرض معاينة السطر `/assets/* Cache-Control: public, max-age=31536000, immutable` مع confirm=false وطبّقه مع confirm=true بعد موافقتي. لا تطلب Cache-Control لملفات HTML؛ فالمنصة تقدّم HTML أصلًا بـ no-cache. 9. المعايير والقياس الجديد. شغّل `node seo-stamp.mjs` ثم `node chrome-stamp.mjs` ثم بناء CSS ثم `node seo-check.mjs` ثم `node design-check.mjs` ثم `npx --yes html-validate "**/*.html"` بهذا الترتيب، وأوصلها جميعًا إلى صفر أخطاء. افحص كل صفحة بـ site_preview عند عرض 360 و390 و768 و1440 بكسل. أعد قياس core_web_vitals من الخطوة 1 على الصفحات نفسها، وشغّل أيضًا seo_audit مع runs=2 للصفحة الرئيسية. إذا كان أداء الجوال أقل من 95، فاعثر على السبب في قوائم resources=true وأصلحه؛ والسبب الأكثر شيوعًا هو إزاحة التخطيط الناتجة عن خط عناوين لم يُحمَّل مسبقًا. المخرجات: جدول قبل وبعد (الصفحة، الجهاز، الأداء، LCP، CLS، عدد الطلبات، الحجم الكلي بـ KB، عدد طلبات الأطراف الثالثة)، وقائمة الملفات المضافة والمحذوفة، وأسطر site_headers الفعّالة، وملاحظة قصيرة عن الأوامر التي تُعاد وبأي ترتيب بعد التعديل التالي. وإذا أفسدت أي خطوة الموقع، فارجع إلى الإصدار الذي دوّنته بـ site_restore وأخبرني.