طراحی سایت اختصاصی

سنجیدن سرعت لود محتوا و به اکران درآمدن آن برای پیشرفت‌دهندگان مدام یک بحران بوده میباشد. معیارهای مانند «Load» یا این که «DOMContentLoaded » در پیشین مطرح گردیده‌اند که هم‌فعلا دیگر کاربرد ندارد، چون کاری که آن ها می‌نمایند با محتوای که مخاطب بر روی برگه اکران خویش مشاهد می‌نماید، همخوانی ندارد و معیارهای عملکردی مخاطب مبنا جدیدتری مانند: « First Contentful Paint (FCP) » یا این که او‌لین رسم محتوایی ورقه که نقطه آغاز تجارب بارگیری پا به میدان طراحی سایت اختصاصی گذارده میباشد.

در قبلی معیارهای عملکردی مانند: « First Meaningful Paint (FMP) » و «Speed Index (SI)» را برای یاری به تصویب بیشتر تجربیات بارگیری بعد از رنگ نخستین سفارش می‌کردیم، البته این معیارها غامض می‌باشند و توضیح آنان غالباً دشوار و خطا میباشد. به آن شکل که آنان هنوز نمی‌توانند تشخیص دهند محتوای اساسی کاغذ چه هنگامی لود گردیده‌است.

مطابق مباحثی که در تیم کاری « W3C Web» و پژوهش ها صورت گرفته در گوگل دریافتیم که یک شیوه ظریف‌خیس برای انداره‌گیری فرصت لود محتوای مهم یک کاغذ، تحقیق گران قدر‌ترین رسم محتوایی کاغذ یا این که «LCP» میباشد.
LCP چیست؟
متریک «Largest Contentful Paint (LCP)» یا این که بلندمرتبه‌ترین رسم محتوایی، این ترازو مشخص و معلوم کننده نقطه استارت استارت لود یک ورقه از هنگامی میباشد که اولی عنصر در یک کاغذ اینترنت نمایان می شود و تا‌زمانی‌که قسمت اعظم ورقه لود خواهد شد ادامه خواهد داشت.

امتیاز مطلوب برای LCP چقدر میباشد؟
«LCP» به خواسته رابطه خوب زبده کاربری پیاده سازی گردیده‌است. برای ارائه آن وب سایت‌ها بایستی اهتمام ورزند تا تبارک‌ترین رنگ محتوای 2.5 ثانیه یا این که کمتر را به‌دست بیاورند. برای اعتقاد و باور از وصال به‌این غرض، امتیاز ۷۵‌درصدی برای بار گذاری برگه در دستگاه‌های دسکتاپ و تلفن‌های همپا به دست آورند.

عنصرها اصلی در به حساب آوردن LCP چیست؟
به عبارتی‌طور که اشاره کردیم، محتواهای یک کاغذ به‌تیتر بلندمرتبه‌ترین موادسازنده، معرف این میزان می‌باشند. به این ترتیب باتوجه « API » حالا حاضر در «Largest Contentful Paint »، اشکال موادسازنده در حیث گرفته گردیده برای آن عبارتند از:

تصاویر
تگ‌های مرتبط با تصاویر ،
تصاویر شاخص ویدئو
تصاویر دورنما‌ی که با « CSS » تاسیس شده است.
عنصرها محتوای متنی باطن صفحه های یا این که متن‌های داخل خطی در سطح دوم
به‌خیال داشته باشید که محصور کردن عنصرها به این شرکت به مراد بی آلایش نگه داشتن مورد ها در اولِ فعالیت میباشد. با ایفا پژوهش ها بیشتر ممکن میباشد در بعدی عناصری اضافه گردد.

طریق‌های باصرفه‌سازی LCP
اصل اصلی کاهش « LCP » در کل تکنیک‌های مذکور پایین، کاهش داده‌های دانلود گردیده در دستگاه استفاده کننده و کاهش فرصت ارسال و اجرای آن محتوا میباشد.

تصاویر خویش را باصرفه فرمایید

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

برای با صرفه‌سازی تصاویر این نکات را در حیث بگیرید:

درصورتی که تصویر شما با محتوا رابطه ندارد، آن را حذف فرمائید.
تصاویر را فشرده فرمایید.
تصاویر را به فرمت‌های جدیدتر مانند: « Webp،JPEG2000 » یا این که « JPEG XR » تبدیل نمایید.
از تصاویر ریسپانسیو به کارگیری فرمایید.
از یک «image CDN» به کارگیری فرمائید.
منابع اساسی و ضروری و اساسی را « Pre-load » کنیم.
اکثری از مفاد اساسی وب سایت را می توانیم « Pre-load » کنیم؛ منابعی مانند فونت‌ها، تصاویر، ویدیوها یا این که پچ‌های ضروری «CSS» یا این که جاوا اسکریپت. با استعمال از کد « link rel=”preload » قادر خواهیم بود به فچ شدن سریع این منابع یاری کنیم.

مجال پاسخگویی سرور را کاهش دهید

چنانچه سرور شما برای جواب به یک درخواست فرصت متعددی ارتفاع می کشد، پس مجال رندر برگه روی کاغذ نیز ارتقا مییابد. به این ترتیب، روی هر واحد سنجش سرعت شیت، برای مثال « LCP » اثر منفی می گذارد. می توانید از « Time To First Byte (TTFB) » برای اندازه‌گیری جواب سرور به کار گیری نمایید. برای بهبود «TTFB» طریق‌های مختلفی وجود داراست:

سرور خویش را باصرفه‌سازی فرمائید.
یوزرها را به یک «CDN » مجاورت‌خیس هدایت فرمایید.
از «Cache Assets » امداد بگیرید.
یک رابطه «Third-Party »‌ ساخت فرمایید.
از «signed exchanges » استعمال فرمایید.
منابع مسدودکننده رندر را حذف فرمایید.
وقتی که مرورگر شیت «HTML» را از سرور شما اخذ می‌نماید، درخت «DOM» را تجزیه‌وتحلیل می‌نماید. در صورتی هر استایل‌صفحه یا این که پوشه « JS » در«DOM» وجود داشته باشد، مرورگر می بایست پیش از تجزیه درخت «DOM» مانده را متوقف نماید.

سنجیدن سرعت لود محتوا و به اکران درآمدن آن برای پیشرفت‌دهندگان مدام یک بحران بوده میباشد. معیارهای مانند «Load» یا این که «DOMContentLoaded » در پیشین مطرح گردیده‌اند که هم‌فعلا دیگر کاربرد ندارد، چون کاری که آن ها می‌نمایند با محتوای که مخاطب بر روی برگه اکران خویش مشاهد می‌نماید، همخوانی ندارد و معیارهای عملکردی مخاطب مبنا جدیدتری مانند: « First Contentful Paint (FCP) » یا این که او‌لین رسم محتوایی ورقه که نقطه آغاز تجارب بارگیری پا به میدان طراحی سایت اختصاصی گذارده میباشد.

در قبلی معیارهای عملکردی مانند: « First Meaningful Paint (FMP) » و «Speed Index (SI)» را برای یاری به تصویب بیشتر تجربیات بارگیری بعد از رنگ نخستین سفارش می‌کردیم، البته این معیارها غامض می‌باشند و توضیح آنان غالباً دشوار و خطا میباشد. به آن شکل که آنان هنوز نمی‌توانند تشخیص دهند محتوای اساسی کاغذ چه هنگامی لود گردیده‌است.

مطابق مباحثی که در تیم کاری « W3C Web» و پژوهش ها صورت گرفته در گوگل دریافتیم که یک شیوه ظریف‌خیس برای انداره‌گیری فرصت لود محتوای مهم یک کاغذ، تحقیق گران قدر‌ترین رسم محتوایی کاغذ یا این که «LCP» میباشد.
LCP چیست؟
متریک «Largest Contentful Paint (LCP)» یا این که بلندمرتبه‌ترین رسم محتوایی، این ترازو مشخص و معلوم کننده نقطه استارت استارت لود یک ورقه از هنگامی میباشد که اولی عنصر در یک کاغذ اینترنت نمایان می شود و تا‌زمانی‌که قسمت اعظم ورقه لود خواهد شد ادامه خواهد داشت.

امتیاز مطلوب برای LCP چقدر میباشد؟
«LCP» به خواسته رابطه خوب زبده کاربری پیاده سازی گردیده‌است. برای ارائه آن وب سایت‌ها بایستی اهتمام ورزند تا تبارک‌ترین رنگ محتوای 2.5 ثانیه یا این که کمتر را به‌دست بیاورند. برای اعتقاد و باور از وصال به‌این غرض، امتیاز ۷۵‌درصدی برای بار گذاری برگه در دستگاه‌های دسکتاپ و تلفن‌های همپا به دست آورند.

عنصرها اصلی در به حساب آوردن LCP چیست؟
به عبارتی‌طور که اشاره کردیم، محتواهای یک کاغذ به‌تیتر بلندمرتبه‌ترین موادسازنده، معرف این میزان می‌باشند. به این ترتیب باتوجه « API » حالا حاضر در «Largest Contentful Paint »، اشکال موادسازنده در حیث گرفته گردیده برای آن عبارتند از:

تصاویر
تگ‌های مرتبط با تصاویر ،
تصاویر شاخص ویدئو
تصاویر دورنما‌ی که با « CSS » تاسیس شده است.
عنصرها محتوای متنی باطن صفحه های یا این که متن‌های داخل خطی در سطح دوم
به‌خیال داشته باشید که محصور کردن عنصرها به این شرکت به مراد بی آلایش نگه داشتن مورد ها در اولِ فعالیت میباشد. با ایفا پژوهش ها بیشتر ممکن میباشد در بعدی عناصری اضافه گردد.

طریق‌های باصرفه‌سازی LCP
اصل اصلی کاهش « LCP » در کل تکنیک‌های مذکور پایین، کاهش داده‌های دانلود گردیده در دستگاه استفاده کننده و کاهش فرصت ارسال و اجرای آن محتوا میباشد.

تصاویر خویش را باصرفه فرمایید

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

برای با صرفه‌سازی تصاویر این نکات را در حیث بگیرید:

درصورتی که تصویر شما با محتوا رابطه ندارد، آن را حذف فرمائید.
تصاویر را فشرده فرمایید.
تصاویر را به فرمت‌های جدیدتر مانند: « Webp،JPEG2000 » یا این که « JPEG XR » تبدیل نمایید.
از تصاویر ریسپانسیو به کارگیری فرمایید.
از یک «image CDN» به کارگیری فرمائید.
منابع اساسی و ضروری و اساسی را « Pre-load » کنیم.
اکثری از مفاد اساسی وب سایت را می توانیم « Pre-load » کنیم؛ منابعی مانند فونت‌ها، تصاویر، ویدیوها یا این که پچ‌های ضروری «CSS» یا این که جاوا اسکریپت. با استعمال از کد « link rel=”preload » قادر خواهیم بود به فچ شدن سریع این منابع یاری کنیم.

مجال پاسخگویی سرور را کاهش دهید

چنانچه سرور شما برای جواب به یک درخواست فرصت متعددی ارتفاع می کشد، پس مجال رندر برگه روی کاغذ نیز ارتقا مییابد. به این ترتیب، روی هر واحد سنجش سرعت شیت، برای مثال « LCP » اثر منفی می گذارد. می توانید از « Time To First Byte (TTFB) » برای اندازه‌گیری جواب سرور به کار گیری نمایید. برای بهبود «TTFB» طریق‌های مختلفی وجود داراست:

سرور خویش را باصرفه‌سازی فرمائید.
یوزرها را به یک «CDN » مجاورت‌خیس هدایت فرمایید.
از «Cache Assets » امداد بگیرید.
یک رابطه «Third-Party »‌ ساخت فرمایید.
از «signed exchanges » استعمال فرمایید.
منابع مسدودکننده رندر را حذف فرمایید.
وقتی که مرورگر شیت «HTML» را از سرور شما اخذ می‌نماید، درخت «DOM» را تجزیه‌وتحلیل می‌نماید. در صورتی هر استایل‌صفحه یا این که پوشه « JS » در«DOM» وجود داشته باشد، مرورگر می بایست پیش از تجزیه درخت «DOM» مانده را متوقف نماید.