چگونه وبسایت پورتفولیوی خود را بهینه کردم
پورتفولیوی شما اولین برخورد شما با مخاطب است. اگر به کندی بارگذاری شود یا در گوگل نمایش داده نشود، فرصتها را از دست میدهید. من سایت خود را برای سرعت، SEO و نگهداری بهینه کردم.
رویکرد من به این صورت است.
سرعت و عملکرد
یک پشته (stack) سبک انتخاب کنید. از تولیدکنندههای سایت استاتیک (static site generators) مانند Astro یا Next.js استفاده کنید. اینها نسبت به فریمورکهای سنگین، جاوااسکریپت کمتری ارسال میکنند.
از کتابخانههای سنگین UI خودداری کنید. برای صرفهجویی در کیلوبایتها، کامپوننتهای ساده را خودتان بسازید.
فونتهای خود را خودمیزبانی (self-host) کنید. برای کاهش جستجوهای DNS، از CDNهای شخص ثالث خودداری کنید. از font-display: swap برای جلوگیری از جابهجایی چیدمان (layout shifts) استفاده کنید.
هر تصویر را بهینه کنید.
- تصاویر را به WebP یا AVIF تبدیل کنید.
- قبل از آپلود، اندازه تصاویر را تغییر دهید.
- برای تصاویری که در پایین صفحه قرار دارند (below the fold)، از
loading="lazy"استفاده کنید. - ویژگیهای width و height را اضافه کنید تا از جابهجایی چیدمان جلوگیری شود.
جاوااسکریپت خود را مدیریت کنید.
- مسیرهای خود را کد-شکافته (code-split) کنید.
- اسکریپتهای غیرضروری مانند ابزارهای تحلیل (analytics) را به تأخیر بیندازید (defer).
- اندازه باندل (bundle size) خود را مرتباً بررسی کنید.
سئو (SEO) و ساختار
برای هر صفحه از عنوانها و متادیسکریپشنهای (meta descriptions) منحصربهفرد استفاده کنید.
از HTML معنایی (semantic) استفاده کنید. در هر صفحه از یک H1 و تگهای مناسب مانند nav ،main و footer استفاده کنید.
تگهای Open Graph و Twitter Card را اضافه کنید. این کار باعث میشود لینکهای شما هنگام اشتراکگذاری، ظاهر خوبی داشته باشند.
فایلهای sitemap.xml و robots.txt را شامل کنید. این کار به موتورهای جستجو کمک میکند شما را پیدا کنند.
از دادههای ساختاریافته JSON-LD استفاده کنید. این کار دقیقاً به موتورهای جستجو میگوید شما چه کسی هستید.
همیشه برای دسترسیپذیری (accessibility) و سئو، به تصاویر متن جایگزین (alt text) اضافه کنید.
نگهداری و گردش کار (Workflow)
محتوا را در Markdown یا یک فایل JSON ساده بنویسید. این کار به شما اجازه میدهد بدون دستکاری کد، پروژهها را اضافه کنید.
استقرار (deployment) را با یک دستور تنظیم کنید. از Vercel یا Netlify استفاده کنید تا با یک git push سایت شما فوراً بهروزرسانی شود.
وابستگیها (dependencies) را در حداقل نگه دارید. این کار از مشکلات نصب در آینده جلوگیری میکند.
سایت خود را تست کنید. از Google PageSpeed Insights یا Lighthouse برای یافتن و رفع مشکلات استفاده کنید.
من سایت خود را با Next.js و Vercel ساختم. این سایت از تصاویر WebP، متادیتای منحصربهفرد و استقرار خودکار استفاده میکند. اکنون، اضافه کردن یک پروژه جدید تنها سی ثانیه زمان میبرد.
بر اصول تمرکز کنید. پشته، تصاویر و نشانهگذاری (markup) خود را یکبار درست تنظیم کنید. سایت شما سریع و مدیریتپذیر باقی خواهد ماند.
چه چیزی بیشترین تفاوت را در بهینهسازی پورتفولیوی شما ایجاد کرد؟ در نظرات به من بگویید.