بهبود SEO و سرعت در اپلیکشن های Next.js

سلام ، از اونجایی که خیلی علاقه مند به Next.js شدم میخام سعی کنم بیشتر راجع بهش بخونم و بنویسم و امروز یه مقاله در رابطه با نکات و ترفندهایی برای بهبود SEO و عملکرد سرعت صفحات مینویسم. اینو هم اول بگم که برای تست سرعت صفحات میتونید از این اکستنشن گوگل استفاده کنید.

۱- اول از همه با توجه به حجم عکس های مورد استفاده در وب امروزی خیلی خیلی خوبه که از عکس های optmized شده استفاده کنید. webp که فرمت تقریبا جدیدی خیلی خوب و سبکه ولی بعد از اون میشه به Jpeg اشاره کرد. واسه عکس های بالای 300x300 pixels هم به هیچ عنوان از SVG استفاده نکنید چون پدر cpu کاربر رو درمیاره. حجم عکس نباید خیلی بیشتر از 300KB بشه مگه اینکه واقعا سایز عکس بزرگه مثل بنر خیلی بزرگی یا ...

۲- سایز عکس ها رو با compression تا حدود ممکن کم کنید این کار سایز صفحه رو تا 70درصد کاهش میده !

۳- از import مستقیم css خودداری کنید ، بله درسته ..از import CSS @ خود داری کنید.

۴- از inline css استفاده نکنید. در ری اکت ما خیلی وقتا از inline css برای استایل دهی استفاده میکنیم ولی اینکار تاثیر بدی رو پرفرمنس صفحه میزاره

۵- فایل های external css رو با هم ترکیب کنید و توی یک یا دو فایل جمع کنید. هر وقت از 300kb بیشتر نشه. همچنین اگه فایل های css تون زیاده میتونید pre loadشون کنید.

۶- از cache استفاده کنید که اینکار البته بستگی به این دارد که فایل های js , css و عکس هاتون هر چند وقت یکبار عوض میشه. در اغلب موارد ۱هفته تایم خوبیه البته بستگی به نوع پروژه داره.

۷- سعی شه سایز عکس های که استفاده میشه متناسب با سایز div‌باشه . فرضا اگر سایز div مون 50 * 50 pixel است و ما از یک عکس 1500x1500 pixels استفاده میکنیم، مرورگر ابتدا اون عکس 1500x1500 pixels رو لود میکنه و سپس re-layout میکنه به 50*50 pixel که این کار موجب UI hamper میشه و تاثیر منفی رو لود صفحه میزاره.

۸- از CDN (content delivery network) استفاده کنید. مخصوصا اگه عکس عکس ها و فیلم ها بالاست اینکار بشدت توصیه میشه.

۹- از ری دایرکت تا حد ممکن دوری کنید چون ممکنه باعث مشکلاتی تو سرعت صفحه بشه (تو ورژن جدید next.js مفهوم middleware اضافه شده که عالیه برای اینکار.

۱۰- از کوکی با حجم بالا خودداری کنید و تا جایی که میتونید حجم کوکی رو کم نگه دارید البته تا جایی که میدونم کلا چن ساله داره تلاش میشه بساط کوکی جمع بشه و local storage استفاده بشه جاش.

خب تا اینجا چندین نباید و .. گفته شد بریم سراغ راه حل ها :

۱- برای optimizing css : برای اینکار میتوان در next.config.js از طریق پلاگین زیر انجام داد:

const withCSS = require(&quot@zeit/next-css&quot);// if you're using sass or react-jss
const withSass = require(&quot@zeit/next-sass&quot);const OptimizeCSSAssetsPlugin = require(&quotoptimize-css-assets-webpack-plugin&quot);const nextConfig = {
  webpack: (config, { isServer }) => {
    config.optimization.minimizer = [];
    config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
    return config;
  },
}

۲ - برای اپتیمایز کردن کدهای جاوااسکرپیت از TerserPlugin استفاده میکنیم.

const TerserPlugin = require(&quotterser-webpack-plugin&quot);
// insert it after OptimizeCSSAssetsPlugin
config.optimization.minimizer.push(new TerserPlugin({ parallel: true }));

البته ورژن جدید این پلاگین با Next.js webpack سازگار نیست و باید این خط کد را در package.json اضافه کنیم

&quotterser-webpack-plugin&quot: &quot^4.2.3&quot,

۳- برای کش کردن عکس ها : از طریق استراتژی زیر برای ورژن 9.5 به بعد میتوان استفاده کرد :

async headers() {
  return [
    {
      source: '/(.*).(jpg|jpeg|png|svg)',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=360, s-maxage=360',
        },
      ],
    },
  ];
},

۴- اپتیمایز کردن عکس ها : بدون شک تگ <Image /> فوق العاده است اما یه سری نکته های ومخاطراتی هم داره که باید حواسمون رو جمع کنیم

<Image
src=&quot/path.png&quot
alt=&quotimage description&quot
width={300}
height={300}
/>

فرض کنید ما path.png را داریم که ابعاد ان نیز 1500x1500 و سایز ان نیز 10MB می باشد. بنابراین قابل حدس زدن است که بسیار زمان زیادی برای لود آن نیاز است اما تک Image این مشکل را برای ما حل میکند اما چطوری ؟ به این صورت که این تگ ابتدا یه عکس به ابعاد مورد نیاز که در اینجا 300 * 300 تعیین کرده ایم می سازد ان هم به فرمت webp که خارق العاده است. زمانی که عکس ساخته شد این عکس در فولدر کش (distDir>/cache/images) ذخیره میشود. بعد حالا تو رکوست های بعدی که به سرور میخوره براوزر کاربر از این کش عکس رو میگیره (fetch میکنه) البته تازمانی که کش expired نشده باشه. (این تنظیمات زمان اکسپایر شدن کش عکس ها رو میتوان تنظیم کرد ، زمانی که مهلت این اکسپایرش هم تموم شه کش دیلیت می شه و دوباره ساخته میشه ) .

ادامه دارد ...

اگه تو زمینه ی Front-end کار میکنی خوشحال میشم گیت هاب و توییتر منو فالو کنی تا بیشتر باهم در ارتباط باشیم :‌)