قبل از ادامه و دعوا دربارهی آیتم های سئو، بهتر است پاره ای در باب شیوه ارائه یک شیت بوسیله مرورگر حرف کنیم.
ما فایل های دیگری مانند CSS ،JavaScript ،Images و Fonts داریم که مرورگر آنهارا به همدم HTML به چیز مفیدی تبدیل کرده است.
این یک مراحل پویا با فایل های جدیدی است که در هم اکنون معرفی، بارگذاری، تجزیه و مواردی می باشند که دائما برای ساختن ورقه آراسته میگردند.
آموزش سئو در مشهد
آموزش سئو مشهد
این روند معمولاً مسیر حیاتی ارائه (Critical Rendering Path) نامیده میگردد و این چنین به نظر میرسد:
1- HTML به درخت DOM (که قبلاً به آن اشاره کردیم) پردازش میگردد.
2- CSS باطن CSS Object Model (CSSOM) تجزیه میگردد و به مرورگر می گوید چهگونه تمامی چیز استایل شده، رنگی، اندازه گیری شده و … میباشد.
3- CSSOM + DOM با هم آنچه را Render Tree می نامند، تولید می کند.
4- چیدمان واقعه می افتد، یعنی جاییکه هر عنصر مطابق آنچه در Render Tree میباشد، درون ویوپرت مرورگر قرار میگیرد.
5- پیکسل ها روی شیت نمایش رنگ می شوند بدین ترتیب به جای یک کاغذ سفید، شما رنگ ها، اشکال، متن و تصاویر را می بینید.
نکته : یک واقعیت دیدنی که توسط مارتین اسپلیت از Google آشکار شد این می باشد که Googlebot با رنگ آمیزی پیکسل های یک شیت منجر صرفه جویی در وقت و منابع میگردد.
آنها اطلاعات لازم را پس از چیدمان در دست دارا هستند.
غرض باید بدست آوردن موادتشکیل دهنده آیتم نیازدر اسرع وقت باشد تا بتوانیم نمای نخستین را با بیشترین سرعت ممکن بسازیم.
مجال لود قابل مشاهده، نظرها بازدیدکنندگان از سرعت یک کاغذ می باشد، بدین مضمون که محتوای برگه چقدر سریع برای آنها ظاهر میگردد.
بیشترین تأثیر آن در بار گذاری منابع می باشد.
این کار معمولاً بر عهده CMS یا JavaScript Framework میباشد تا به مرورگر کمک کند مجال / چطوری / چگونگی لود منابع را الویت بندی کند تا وب سایت سریع تر نمایش داده شود.
علاوه بر این، شما میخواهید همگی چیز را بی آلایش نگه دارید و از محاسبات پیچیده و تغییرات زیادی در مرحله طرح بندی ورقه خودداری نمائید.
گوگل برای این بخش یک راهنمای متمرکز بر توسعه دهنده و یک راهنمای دیگر برای معمولی کردن فرایند نقاشی دارد.
معیارهای بارگذاری تصویری
First Paint (FP): مرورگر هرچیزی را برای نخسین بار بارگذاری می کند.
First Contentful Paint (FCP): مرورگر چیزی را از DOM (Document Object Model) ارائه میدهد، که می تواند متن، تصویر و غیره باشد.
First Meaningful Paint (FMP): مهم ترین موادتشکیل دهنده بصورت بصری بارگذاری می شوند.
Largest Contentful Paint (LCP): اصلی ترین عنصر بالای گروه بارگذاری می شود.
Visually Complete: شیت بصورت بصری بارگذاری می شود.
Speed Index: یک امتیاز به حساب آوردن شده برای بارگذاری تصویری که یکسری امتیاز دریک زمان نظر میگیرد.
Cumulative Layout Shift (CLS): اندازه گیری مقدار عناصری که در هنگام لود در viewpoint حرکت می کند، یا چگونگی ثبات طرح.
دیدن لود بصری به همراه جدول waterfall
در نصیب Summary در WebPageTest، اگرامکان ضبط را فعال کرده اید، می بایست یک ستون Video در جدول مهم با “نمای فیلم(Filmstrip View)” داشته باشید.
در این نما، خط قرمز در بالا با اسنپ شات های بصری در همان نقطه ای هست که خط قرمزرنگ در انتهای waterfall قرار دارد.
با حرکت خط قرمز رنگ به نقاط مختلف در بار گذاری تصویری، بایستی بتوانید آنچه که جدیداً در waterfall بارگیری گردیده است را جستجو فرمائید، که ممکن میباشد به ارکان گوناگون اجازه نمایش بصری دهد.
این میتواند به شما در تعیین اینکه چه پوشه هایی برای تقدم بندی نیاز دارید، کمک کند.
از جمله، در شرایطیکه می بینید که بیشتر ورقه شما به غیر از متن بارگیری گردیدهاست، البته بلافاصله بعد از آن یک فونت بارگذاری شده و متن ظاهر میگردد، این علامت خیر میباشد که فونت برای نمایش متن لازم بود.
شما همچنین می توانید با نگاه کردن به اسکرین شات های تشکیل داد شده، بگویید چه تصاویر ممکن می باشد با نماهای متفاوت زودتر ما یحتاج باشد.
در تحت این نمودار اطلاعات اضافی مانند به کارگیری از CPU، پهنای باند، شغل در Browser Main Thread و تعامل وجود دارااست.
همگی این نمودارها دوباره به نوع دستگاه و نوع اتصال بستگی داراست.
از این اطلاعات می توان برای رفع اشکلات گوناگون بهره مند شد.
به عنوان مثال، شاید بارگیری بیشتراز حد باشد، که پهنای باند را در بالاترین نقطه نگه می دارد.
یا شاید یک اسکریپت وجود دارد که از مجموع CPU برای یک دستگاه خاص استفاده می کند، که قادر است سبب تاخیر شود.
Filetype CSS
استدلال اینکه در بعضی جاها سرعت شیت بغرنج می شود این است که در بخش اعظمی از موردها، هیچ طریق صحیحی برای انجام کارها وجود ندارد.
بیشتر طرز ها دارای تریدآف هایی می باشند و برخی از آنها برای اجرای و محافظت بغرنج تر میباشند.
شما باید تصمیم بگیرید که در شرایطتان معمولی ترین، سریع ترین و بهترین حالت را تعیین نمایید.
نگاهی به پوشه های CSS بیندازید، آنها به طور پیش فرض مسدود می شوند، به این مضمون که آنان بایستی قبل از نمایش یک ورقه برای استفاده کننده بارگیری و پردازش شوند. در صورتیکه در خیال مخفی هستید (یک نسخه از فولدر را که بعدا در نوشتهعلمی پوشانده گردیده است ذخیره نمایید)، میتوانید برای بارگذاری های آینده صفحه از آن فایل مجدد به کار گیری نمائید.
این بدان معناست که مجدداً بارگیری نمیشود، و بازدیدهای بعدی می بایست سریع تر باشند.
اکثر ابزارهای سرعت در اولین نگاه تست میشوند، به این ترتیب بیشتر چیزی که در ابزاری مانند PageSpeed Insights میبینید، نشان دهنده کاربر باراولی می باشد که فقط یک صفحه را مشاهده می کند و نه هر که به یک سری صفحه مراجعه می کند یا اکثر اوقات به وبسایت شما مراجعه می کند.
مقصود شما بایستی بهینه سازی این نمای اول و نمایش های آینده برای کاربران باشد.
بارگیری CSS به صورت همزمان
شما می خواهید کد اساسی را در اسرع وقت لود نمایید، و ما چندنکته درباره آن به شما خواهیم اعلامکرد، البته قسمت دیگر این میباشد که شما می خواهید CSS مانع ارائه شود.
برای این منظور، می خواهیم استایل شیت هایی که بعدا در فرآیند بارگذاری مورد نیاز است را بار گذاری کنیم و سپس آن را به کلیه اعمال کنیم.
در این نحوه با سو استفاده از طرز رئیس کردن بارگذاری ویژگی های عنصر پیوند خاص، مرورگر را فریب می دهیم ..
کاری که جاری ساختن میشود بارگذاری CSS سوای مسدود کردن رندر است (زیرا در این حالت، ما به مرورگر میگوییم این آیین نامه برای چاپ میباشد و درحقیقت برای این نسخه از برگه نیست) و سپس برای آحاد انواع رسانه پس از بارگذاری انجام نمایید (مواردی که چاپ نمی شود)
بطور مثال این:
تبدیل می شود به:
شما می توانید این را با همه منابع CSS به کار گیری فرمایید.
تریدفور یعنی کاربران ممکن هست بعضا از فلشینگ ها / شکل سازی های مجدد را تجربه کنند زیرا بعضی از عناصر صفحه، پیشین اجرا شدن CSS نقاشی می گردند.
بنابراین زمانی CSS انجام میگردد، صفحه ممکن هست مکان و چگونگی نمایش موضوعات را تغییر تحول دهد ..
Inline
Inline کد مورد نیاز برای رندر کردن محتوای بالاتر از دسته را دربر میگیرد و به جای یک فایل غیروابسته، آن را با پاسخ HTML تحویل میدهد.
این به طور معمول سریع ترین روش برای کوتاه کردن بازه زمان موردنیاز برای ارائه نمای نخستین خواهد بود.
ساده ترین شیوه برای اندیشه کردن در این مورد این است که شما در حالا بدست آوردن قسمت های اساسی پوشه های CSS و JS می باشید و مستقیما آنان را درون HTML قرار می دهید.
بار گذاری HTML اولیه یه خرده طول میکشد، البته ارائه صفحه میتواند قبل از تمامی فایل های دانلود شده واقعه بیفتد.
احتمالاً Inlining سریع ترین رندر را در بارگیری کاغذ اولیه به شما میدهد، البته ترید آف ها به با ذخیره سازی همپا میباشند.
کد بار گذاری شده در HTML نمی تواند از حافظه پنهان مجددا آیتم استفاده قرار گیرد، براین اساس معمولاً مقداری از کد را دو بار بارگیری می کنید: یک بار با HTML و دوباره در فایل نرمال که به طور معمول ذخیره شده است.
ولی در صورتیکه برای هر شیت کد وارد کردید، این بدان مضمون میباشد که صفحه های آینده نیز کد اضافی دارا هستند.
این یک نحوه پیشرفته میباشد و مستلزم استفاده از پرسنل قسمت خدمات هست، اما شما می توانید هم inlining و هم حافظه پنهانی داشته باشید.
همدم با ایجاد کرد بقیه CSS، این یک اوضاع ایده آل است.
به خیال و خاطر داشته باشید که می توانید کد CSS باطن خطی را کوچک فرمائید.
همانطور که در بخش HTML در بالا ذکر شد، این عمل سبب ساز میشود برخی از فاصله های غیرضروری و کاراکترهای اضافی حذف شوند تا کد کوچک تر و سریع تر بارگیری شود.
احتمالاً نمیخواهید کلیه محتوا رادر کل پوشه ها بگنجانید.
صرفا به محتوای اصلی inline توجه داشته باشید.
می توانید تمام CSS و JS و حتی فونت ها و تصاویر را بصورت فنی بچسبانید، اما می خواهید با یک بارگیری گسترده HTML (که در آن بسیاری از کد استفاده نمی شود)، به نقطه پايان برسید.
این در واقع وب سایت شما را کندتر می کند. در صورتی چند فایل های کوچک یکسری کیلوبایتی دارید و میخواهید کلیه موردها را برای آن ها بگنجانید، این طرز بسیار خوب هست.
CSS های اساسی inline در مقیاس
شما جای اینکه این فعالیت برای هر برگه انجام دهید، یک سیستم خود کار میخواهید.
این شاید منطقی باشد که تنها CSS را برای صفحه اساسی در تم های وردپرس درج نمائید زیرا این طریق معمولا درمقایسه با صفحات دیگر استایل صفحات متفاوت تری دارد.
معمولا برای این کار بعضی از افزونه ها / ماژول ها / پکیج ها یا نسخه هایی از Critical یا Critical CSS وجود دارد.
این پکیج ها برای هر عمل taskrunner یا هر پکیجی که از آنان استفاده میکنید مانند Grunt ،Gulp ،Webpack یا قالب هایی مانند React ،Angular،Vue وجود دارد و حتی می توانید یادگرفتن های منحصربهفرد برای WordPress یا Drupal یا حتی صفحات دارای کد دستی نیز پیدا نمایید.
آن ها قصد داراهستند یک مرورگر بدون سرصفحه را به کاغذ ارسال کنند تا معین شود کدام CSS واقعا برای بارگذاری ورقه در اندازه های گوناگون مهم میباشد، یا کد را به شما میدهند یا کد را درون موادتشکیل دهنده مهم و غیر اساسی تقسیم می کند تا بتوانید آنهارا به طور مناسب بارگیری نمائید.
چند مثال:
Grunt:
https://github.com/filamentgroup/grunt-criticalcss
https://www.npmjs.com/package/grunt-critical-css
https://github.com/bezoerb/grunt-critical
Gulp:
https://github.com/addyosmani/critical
https://www.npmjs.com/package/gulp-critical-css
Webpack:
https://github.com/anthonygore/html-critical-webpack-plugin
https://github.com/GoogleChromeLabs/critters
https://github.com/anthonygore/html-critical-webpack-plugin
https://www.npmjs.com/package/critical-css-webpack-plugin
React:
https://www.npmjs.com/package/react-critical-css
https://github.com/addyosmani/critical-path-css-tools
https://github.com/sergei-zelinsky/react-critical-css
Angular:
https://github.com/addyosmani/critical-path-angular-demo
Vue:
https://github.com/anthonygore/vue-cli-plugin-critical
https://vuejsdevelopers.com/2017/07/24/critical-css-webpack/
Drupal:
https://www.fourkitchens.com/blog/article/use-gulp-automate-your-critical-path-css/
WordPress:
https://joe-watkins.io/javascript/inline-critical-css-with-wordpress/
Hand-coded:
https://www.sitelocity.com/critical-path-css-generator
https://jonassebastianohlsson.com/criticalpathcssgenerator/
Preload
اگر نمی خواهید CSS مهمی را بگنجانید، آیتم دیگر به کار گیری از Preload می باشد.
Preload با به چنگ آوردن منابع مورد نیاز برای نمایش سریع تر برگه، رکوئست را زودتر در بار گذاری می آورد.
Preload حق اولویت مرورگر را برای دارایی های از پیش بارگذاری شده به عنوان بالا تعیین می کند و آن ها را به صورت غیر همزمان بار گذاری می کند، بنابراین آن ها مانع رندرینگ نمی شوند.
این موضوع در دامنه ها هم صدق می کند.
مرورگر به هررکوئست برای یک فایل تقدم می دهد.
فایل های ضروری برای نمایش بالاتر از محتوای مجموعه، زودتر (در تقدم بالاتر) بدست اورید و مواردی غیرضروری در فرآیند بعدی ارائه دهید.
تقدم داده شده به پوشه ها را در تب شبکه در Chrome Dev Tools قابل مشاهده هست. روی نوار راست کلیک کرده، آیتم Priority را انتخاب کرده و آن را به عنوان ستون اضافه کنید.
آنچه انجام خواهد داد اینست که فایلی را که بعداً بارگیری آن آغاز گردیده است، بگیرید و در اسرع وقت بارگیری فرمایید.
مزیت دیگر این میباشد در صورتی در جایی که فایل از قبل لود شده تا قبل از این مسدود شده باشد، دیگر این آیتم نخواهد بود.
علاوه بر آنچه در بالا برای ایجاد CSS async بیان شد، preload تنها خط دیگری را اضافه می کند که به معنی دریافت کردن سریع فولدر به وسیله تهیه کردن الویت مرورگر بالاتر از حد نرمال است.
این فعالیت همچنین برای مرورگرهایی که از preload حمایت نمیکنند نیز جواب میدهد.
مثال های کد:
انتخاب پوشه برای Preload
معمولا، شما میخواهید فایل گزینه مهم را که حاوی مقدار زیادی CSS برای سایت می باشد، داشته باشید.
Devs اکثر وقت ها این را پس از تم نامگذاری می کند، یا آن را “style” می نامد، یا گاهی اوقات آن را بعداز خود وبسایت قرار می دهد.
در صورتیکه در شناسایی این فایل نقص دارید یا میپندارید که ممکن می باشد سایر فایل ها نیز نیاز به لود مجدد داشته باشند، معمولی ترین روش برای پژوهش به کار گیری از ویژگی مسدود کردن درخواست در Chrome Dev Tools می باشد.
برگه شبکه را باز کرده و یک صفحه را بارگیری نمائید تا فولدر های درخواست شده را مشاهده کنید.
برای افزودن آنان به لیست بلاک میتوانید بر روی این مفاد راست کلیک نمایید.
زمانی برگه را بارگیری مجدد میکنید، در شرایطیکه این صفحه هنوز نرمال به حیث می رسد، احتمالاً فایلی را که برای بالای دسته مورد نیاز هست، مسدود نکردید.
وقتی یک کدام از این موارد را دریافت میکنید که ظاهر کاغذ را وخیم می کند، این نشانه ای هست برای ارائه محتوای بالای دسته و این فایلی هست که میخواهید مجددا preload کنید.
آنچه که درباره preload باید بدانید:
1-شما نیاز به ossorigin روی خودکار ها دارید یا یک لود دوبل از فایل را خواهید داشت.
2-شما هنوز به کال های فولدر نرمال برای JS + CSS احتیاج دارید، بنابراین آنانرا حذف نکنید.
3-شما می توانید یک فونت را از گذشته بارگذاری فرمائید حتی در حالتیکه به یک فولدر دیگر مانند یک فایل CSS فراخوانی خواهد شد.
4-مراقب باشید که چقدر preload میکنید. با بارگیری بیش از حد بسیاری از پوشه ها میتوانید به اختلال بخوردید.
Server Push
این بخشی از خصوصیات HTTP / 2 (H2) بود.
این به سرور اجازه میدهد فایل را سوای درخواست تحویل دهد. بنابراین به جای زنجیره ای که ممکن هست HTML > CSS > Font باشد، بدین وبسایت اجازه می دهد که بگوید من به آن فونت نیاز دارم، آن را ارسال فرمائید.
Server Push نقص ساز هست و من معمولاً آن را توصیه نمیکنم ، البته در شرایطی که شما یک توسعه دهنده خوب میباشید یا به یک کدام از آنان دسترسی دارید، می توانید از آن به کار گیری فرمایید این فایل ها را از سرور بر روی همان اتصال به عنوان رکوئست صفحه، درخواست می کند.
Server Push میتواند دارایی ها را دوبار بارگیری کند.
یک راهحل وجود دارد که از کوکی ها استعمال می کند و تحقیق می کند که آیا تا قبل از اینً دارایی را به کاربران هدیه داده اید، اما این یک اجرای بغرنج است.
نقص دیگر در زمینهی با اشکلات اتصال وجود دارااست که مانع از بار گذاری فایل ها می شود.
با تمامی اقدامات اضافی، بازهم ممکن می باشد دستاوردهای قابل توجهی درمقایسه با preload مشاهده نکنید، زیرا مرورگرها خیال و خاطر پنهان کاغذ (که در آن preload میباشد) را قبل از push cache استیناف می کنند.
Filetype JavaScript
جاوا اسکریپت بغرنج و دارای گزینه های زیادی است و ملاحظات زیادی را نیز در بر دارااست.
گاهی اوقات از آن برای تأمین عملکرد استعمال میشود، گاهی از آن برای جلب محتوای مهم استفاده میگردد، و بعضی اوقات حتی برای تشکیل داد تغییراتی در CSS نیز به کار گیری می گردد.
علاوه بر این، کد معین ممکن میباشد به کد دیگری برای اجرای صحیح نیاز داشته باشد.
اینها به عنوان وابستگی (dependencies) شناخته می شوند و تغییر تحول در روش بار گذاری جاوا اسکریپت احتمالا باعث شکستن برخی عملکردهای برگه شود.
در حالتی که جاوا اسکریپت نقش مهمی در محتوا یا استایل کاغذ داشته باشد یا سیستم اساسی آن باشد مانند بخش اعظمی از چارچوب های جاوا اسکریپت در این صورت بسیاری از قانون ها همانند آنچه CSS اجرا می کند برای inlining و preloading انجام میگردند.
با این حالا، شما گزینه Server Side Rendering (SSR) را نیز دارید.
این آیتم، کد را پردازش می کند و یک عکس فوری ارائه می دهد.
به عنوان مثال، درحالتی که جاوا اسکریپت برای جمع موردها در شیت یا منو استفاده میگردد، ممکن میباشد بخواهید این اطلاعات را زودتر بارگذاری کنید و یا برخی از بار مرورگر مشتری را کاهش دهید، ممکن می باشد بخواهید از یک چاره SSR استفاده نمایید.
بی آلایش ترین روش برای اینکه بفهمید آیا JavaScript روی ورقه نیاز میباشد یا خیر، کلیک بر روی padlock در Chrome و مفتوح کردن تنظیمات تارنما می باشد.
لیستی از مجوزها را بر روی جاوا اسکریپت مشاهده خواهید کرد که می توانید به آن ها اجازه دهید یا آنانرا مسدود فرمایید.
مسدود کردن جاوا اسکریپت، بارگیری مجدد ورقه و مقایسه وبسایت با و بدون JavaScript باید به شما نماد دهد که آیا عناصر در صفحه گم شده اند یا نه.
درصورتی که چیزی از دست رفته می باشد، جاوا اسکریپت را دوباره فعال کنید و همان روند مسدود کردن را (که برای CSS در بالا بیان کردیم) انجام دهید تا بفهمید کدام پوشه ها برای محتوای ارائه شده عنایت داراست.
حرکت به سمت Footer
برای اسکریپت های inline، احتمالا حرکت آنها به سمت تحت کاغذ را درنظر بگیرید .. به خیال و خاطر داشته باشید که JavaScript در هم اکنون بلاک کردن تجزیه است، به این مضمون که تلاوت HTML را مسدود می کند.
انتقال این اسکریپت ها به پاورقی این اطمینان را میدهد که میتوانید بخش اعظمی از داده ها را قبل از هرگونه مسدودی پردازش نمائید.
آیتم های دیگری برایرفرنس های اسکریپت دارید مانند defer و async که احتمالا خوب هم میباشند.
Defer/Async
Defer و Async ویژگی هایی می باشند که میتوانند به یک تگ اسکریپت اضافه شوند.
معمولاً اسکریپت در اکنون بارگذاری، تجزیه و احتساب را هنگام دانلود و اجرای مسدود می کند.
Async به شما امکان میدهد تجزیه و بارگیری همزمان صورت پذیرد اما در طی اجرای اسکریپت مسدود هست.
Defer تجزیه و محاسبه را هنگام بارگیری مسدود نمی کند و تنها بعداز نقطه پایان تفحص تجزیه HTML ایفا میگردد.
منبع:
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html.
نمونه هایی از کد Defer/Async
Normal:
Async:
Defer:
Addy Osmani عملکرد خوبی در مسدود کردن، async ،defer و preload و طریق تأثیرگذاری بر حق اولویت های مرورگر داراست.
پاسخگویی(Responsiveness)
پاسخگویی معمولاً توسط First Input Delay (FID) اندازه گیری میگردد، این فرصت وقتی می باشد که کاربر با برگه شما در تعامل می باشد تاوقتیکه بتواند پاسخ دهد. Max Potential FID بدترین شرایط FID می باشد که ممکن میباشد کاربران شما تجربه کنند.
بسیاری از افراد به طور معمول Time To Interactive (TTI) را اندازه می گیرند، یعنی مدت زمانیکه طول میکشد یک برگه بطور بدون نقص interactive شود.
به یاد داشته باشید مواردی که قبلاً به آن ها اشاره کردیم در main thread درحال رخداد افتادن بوده است یا خیر؟
بسیارخوب، تنها یک main thread وجود دارد، و جاوا اسکریپت برای این منابع رقابت می کند.
زمانیکه thread مسدود میباشد، نمی تواند به ورودی مخاطب پاسخ دهد.
بنابراین ورقه کند می شود. زمانی یک کاربر کلیک کند و شیت هر اقدامی که کاربران سریعا درخواست کرده اند را ایفا نمی دهد، کاربران احساس می کنند سرعت کند میباشد.
زمانی که این رخداد می افتد، احتمالا کاربران این مسئله را به شما اگاهی میدهند. البته نه به نحوه خوب!
کاربران از سرعت کند برنامه توییتر شکایت می کنند.
JavaScript بر پاسخگویی تاثیر دارد. تمامی جاوا اسکریپت لود شده برای همگی موارد مختلفی که قادر است جاری ساختن دهد باید در همان مکان اعمال گردد.
تصویر بالا همان چیزی می باشد که main thread به نظر میرسد.
این علائم قرمز رنگ در شیت سعی بر Chrome Dev Tools نشان می دهد که احتمالا مشکلاتی وجود دارد.
معمولاً وظایفی که زمان زیادی برای اجرای main thread وجود دارد، پرچم گذاری می شوند.
هر مورد از این مفاد جایی هست که برگه با عمل بیشتراز حد بارگذاری شده است و نمی تواند باگاز به ورودی کاربر پاسخ دهد.
منبع:
https://web.dev/long-tasks-devtools
در حالا اجرای وظیفه، یک صفحه نمی تواند به ورودی مخاطب پاسخ دهد.
این تاخیری می باشد که احساس میشود. هرچه وضیفه زمان بر تر باشد، تعقل وقت گیر تر خواهد بود.
شکاف در بین وظایف فرصتی میباشد که در آن کاغذ بایستی به وظیفه ورودی استفاده کننده سوئیچ خواهد شد و به خواسته آنان پاسخ دهد.
تگ های Third-party
این گزارش دیگری میباشد که میتوانید در PageSpeed Insights پیدا کنید.
این اندازه و مجال مجال اسکریپت های third-party را که درحال بلاک کردن main thread و تاثیرگذاری روی تعامل (interactivity) هستند را نشان می دهد.
اعتنا داشته باشید که، به ویژه راجعبه تگ منیجرها، بعضی موارد احتمالا مربوط به تگ منیجر می باشد و نه اسکریپت.
این ممکن است بخشی از اسکریپت موجود در کانتینر باشد که برای یک تگ منیجر حساب میشود و به طور کامل بسمت third-party script حساب نمی شود.
از اندازه و زمان main thread به کارگیری نمایید تا معین شود قادرید از شر چه چیزی خلاص شوید .. به خاطر داشته باشید که بیشتر اسکریپت های third-party به نوعی قابلیت کارایی، ردیابی یا غرض گذاری را اضافه می کنند، اما به ندرت برای کارایی مناسب یک کاغذ ضروری میباشند.
از اختیارات خود استفاده نمائید تا مشخص شود که آیا داده های به دست آمده بها بار گذاری اضافی برای این اسکریپت ها را دارند یا خیر.
منابع رایج JavaScript Bloat
Jquery
سیستم تست A/B
سیستم مانیتورینگ کاربر مهم (RUM)
سیستم چت زنده
مورد های Cleanup
1- از tracking/scripts کمتر استفاده فرمایید: این میتواند یک تصمیم دشوار باشد زیرا مارکترها داده ها را دوست داراهستند، اما بعضی وقتها میزان داده های درحال توده پوچ میباشد.
2- سیستم هایی که همت مشابه دارا هستند را تقویت کنید: مثلاً اگر در در حال حاضر اجرای یکسری سیستم به حساب آوردن یا یکسری سیستم که اطلاعات کاربر دارند میباشید.
بسیاری از نرم افزار ها عملکردهای مختلفی دارا هستند، و بعضی وقت ها شما با اسکریپت هایی که همت مشابه اسکریپت دیگر دارند به عمل خود پایان می دهید (زمانیکه میتوانید بدون یک کدام از آنها کار نمایید).
3- تقسیم بندی: به عنوان مثال، برخی از سیستم های تست A / B شمارا مجبور به بارگذاری لیستی از تک تک تست های مو جود در سیستم می کند .. در بسیاری از مواقع میتوانید براساس بخشی از وبسایت را بخش بندی کنید و نسخه های کوچکی از فایل را ساخت و ساز فرمایید.
4- ردیابی سرور اساس به جای مشتری پایه: tradeoffs هایی با ردیابی این مسیر وچود دارند که من در اینجا به آن ها نمی پردازم. ولی شما میتوانید منابع زیادی درباره علت به کار گیری از یک کدام از بر دیگری پیدا فرمایید.
5- از وب ورک ها برای جنبش دادن پردازش سوا main thread استعمال کنید: نکته مهم اعمال این کار اینست که وب ورکرها به DOM دسترسی نخواهد داشت.
این شغل نسبتاً پیشرفته است و به توسعه دهندگان ماهر احتیاج دارد.
6- Service Workers / Edge Workers: من به آجل این فناوری امیدوارم. اصولا این قابلیت و امکان را به JS می دهد که به جای مرورگر مشتری، در Edge (یا سطح CDN) اعمال شود.
براین اساس قبلاً برای یک سیستم تست A / B، ممکن می باشد یک فایل بارگیری شود و آن گاه در مرورگر مشتری پردازش و جاری ساختن خواهد شد.
از آنجا که این تست ممکن میباشد قسمت هایی از DOM را بازنویسی کند و بعداً در بارگذاری رخ دهد، ممکن میباشد با تغییرو تحول کلیه چیز، مکان نما های بصری را ببینید.
فعلا، می توانید تغییرات مورد نظر را قبل از پردازش ببینید و آنان را با HTML که به ربات ها و کاربران تحویل داده گردیده است، تحویل دهید.
موقتا بعضی سیستم عامل ها از این مزیت به کارگیری می کنند.
7- به راحتی اجرای بارگذاری یک فایل را به تعویق بیندازید: درحالتی که عجله ندارید یا تنها رکوئست فایل را براساس عملی مانند کلیک استارت می کنید.
به عنوان مثال، یک سیستم چت زنده احتمالاً در پنج ثانیه نخستین بارگیری صفحه، موردنیاز نیست، براین اساس آن را به مکث بیاندازید.
همچنین میتوانید بعداز اینکه کسی روی یک دکمه کلیک کند، فایل را درخواست فرمائید تا در صفحه مهم بارگیری نشود.
یا به جای جاسازی ویدیوی YouTube، از یک تصویر با دکمه پخش استعمال نمائید و تنها در عناصر ویدیوی YouTube بارگیری فرمائید و زمانی مخاطب کلیک کرد، محتوای آن را پخش نمائید.
مزیت های JS Frameworks:
قالب های JavaScript مانند React ،Angular و Vue مزیت هایی نسبت به سیستم های سنتی دارند.
Tree shaking: تنها کد مورد استفاده در کاغذ ارائه میشود. هر فایل یا کد دیگری که ضزوری نیست بارگیری نمیشود، بنابراین فایل های کوچک تر و صفحه های کوچک تر میشود.
این کدی را که به طور سنتی برای هر شیت دیگر مورد نیاز میباشد را از در بین می برد.
تقسیم فایل ها به بخش های کوچک تر، بنابراین فرصت های بیشتری برای تعامل وجود دارد.
برای مثال، شما یک فایل 1MB JS دارید که به عنوان یک وظیفه زمان بر در main thread ایفا می شود و تعامل را در طول اجرای آن مسدود می کند.
شما می توانید آن را به بخش های 50KB تقسیم نمایید تا اعمال وظیفه طولانی نشود، و فاصله های بیشتری بین مجال کوتاه تری که یک شیت بتواند به ورودی استفاده کننده پاسخ دهد، وجود داشته باشد.
فونت های Filetype
با فونت ها، شما آیتم های بخش اعظمی از همان مورد هایی را که تا قبل از اینً ذکر کردیم (از جمله، وارد کردن یا پیش بارگذاری یک فونت مورد نیاز) دارید.
چنانچه میخواهید آن مسیر را طی نمایید، نمونه هایی از کد را برای بارگیری مجدد فونت ها پیدا خواهید کرد.
با این حالا، با فونت ها، پیشنهاد من به کارگیری از شیت نمایش فونت میباشد: swap؛ که تاوقتیکه خودکار سفارشی آماده خواهد شد، به سادگی از یک فونت سیستم پیش فرض استعمال می کند و آن گاه به فونت سفارشی تبدیل می گردد.
انجام این کار در استایل ورقه شما بسیار ساده است.
@font-face {
font-family: \\\'Whatever\\\';
font-display: swap;
چنانچه از فونت های Google به کار گیری می کنید، اینکار معمولی ترهم می گردد.
صرفا کاری که بایستی اعمال دهید اضافه کردن و نمایش=swap به عنوان یک پارامتر در URL هست.
تصاویر Filetype
نگرانی اصلی در زمینه ی تصاویر اندازه و وزن آن ها است.
شما می خواهید تصاویر بهینه سازی شده که اندازه مناسبی برای دستگاه دارند بشکل باکیفیت بارگذاری شوند.
تصاویر به طورغیر هم زمان بارگیری می شوند، به این ترتیب نمی توانند بار کاغذ را مسدود کنند، ولی میتوانند به وزن و زمان کلی تعامل اضافه کنند.
موضوع دیگر حق اولویت بندی است، جایی که احتمالا بعضا از تصاویر به صدق حق اولویت بندی شوند یا قبل از فایل های مهم مانند CSS و JS الویت بندی شوند.
بسیاری از مواردی که ما در زمینهی آنها صحبت کرده ایم، مانند inline و preload را می قدرت برای تصاویر بهره مند شد البته با همان trade-offs ها مانند خاطر کچینگ یا پیچیدگی.
قانون شماره یک به کارگیری از تصاویر زیاد یا تصاویر بزرگ در بالای مجموعه موضوع شما نیست.
اجباری نیست تصاویر پس زمینه غول پیکر خود را در دستگاه های تلفن همراه آرم دهید. مردم می توانند فارغ از آنها زندگی کنند.
همیشه بهینه سازی تصویر را به روشی مقیاس پذیر اجرا دهید.
گزینه های زیادی برای انجام این شغل در سطح های متعدد مانند CDN، سرور، به وسیله CMS، با API و غیره وجود دارد.
در اینجا یکسری مورد وجود داراست:
بهینه سازی تصویر CDNs:
Akamai Image Manager
imgix
Image Engine
Cloudinary
Uploadcare
بهینه سازی تصویر APIs:
ShortPixel
Fastly Image Optimizer
Kraken.io
TinyPNG
Imagify
GUI:
ImageOptim
Squoosh
Command Line: در صورت به کار گیری از صفحه ها وب ، gulp یا grunt ، Imagem دارای ماژول npm است
JPEG:
Guetzli
MozJPEG
PNG:
pngquant
Zopfli
GIF:
Gifsicle
SVGO
WordPress/Drupal
من پیشنهاد خاصی ندارم. گزینه های زیادی برای وردپرس و دروپال پیدا خواهید کرد.
Lazy Load Images
در شرایطیکه کسی به شما گفته می باشد که باید “تصاویر offscreen” را به تعویق بیاندازید، این همان چیزی می باشد که شما نیاز دارید.
اصولاً این به تانی پرت کردن بارگذاری تصاویری هست که در بالای دسته قرار ندارند زیرا هنوز ضروری نیستند.
هنگامی که مخاطب آغاز به پیمایش کرد، تصاویر بارگیری میشوند.
من ممکن است بیانکنم شما کتابخانه ای که از IntersectionObserver به کار گیری می کند را میخواهید ولی به دلیل تامین از مرورگر احتمالاً دارای یک منبع تغذیه میباشد.
محبوب ترین کتابخانه برای این گزینه lazysizes ها می باشند، البته آیتم های بسیاری برای ست آپ خود پیدا خواهید کرد.
از نگاه کروم 76، بارگذاری lazy در مرورگر وارد شده میباشد.
من انتظار دارم مرورگرهای بیشتری نیز به زودی این شغل را جاری ساختن دهند، ولی موقتاً بخواهیم از این روش برای Chrome با polyfill برای سایر مرورگرها استفاده کنیم. وردپرس بارگیری lazy را به طور پیش فرض در نسخه 5.4 اضافه کرده است.
تصاویر Responsive/Resized
این قضیه در امر ارائه تصویر مناسب برای صفحه مناسب است.
بارگیری یک تصویر بزرگ و آنگاه کاهش اندازه آن، وقت و منابع را هدر میدهد.
برای این فعالیت راه حل های خود کار زیادی وجود دارد.
از جمله، بسیاری از CDN ها به آن رسیدگی می کنند، و همچنین مواردی مانند پکیج npm، ابزار ImageMagick CLI یا افزونه ها / ماژول های متعدد برای سیستم های متفاوت وجود دارااست.
قالب های تصویر درحال تغییر و تحول
قالب های متفاوت مانند webp به دلیل دفاع از مرورگر خوب میباشند ولی خلل ساز نیز میباشند.
شما یا بایستی تشخیص و تعویض زیادی اعمال دهید یا از خدماتی استفاده فرمائید که این کار را برای شما جاری ساختن دهد. راهنماهای زیادی برای این فعالیت وجود داراست.
وزن و اندازه صفحه
این اندازه کل منابع ترکیبی است.
صفحه ها کوچک تر سریع تر میباشند. ما قبلاً در زمینهی بسیاری از بهینه سازی ها مانند کوچک سازی، فشرده سازی، و به سادگی خلاص شدن از شر هر چیزی که گزینه استفاده نیست، حرف کرده ایم.
هرچه برگه ای که بار اول بارگذاری میگردد کوچک تر باشد، سریع تر نمایش داده میشود.
غرض بایستی دستکم اطلاعات باشد تا محتویات تاحدامکان با سرعت بیشتری بالاتر از تیم لود قرار گیرد.
سپس میتوانید سایر اطلاعات موردنیاز را در ورقه بارگیری کنی، تمامی اینها هنگامی اتفاق می افتد که همه چیز را تا حد ممکن کوچک نگه دارید.
اشتباهات معمولاً از طریق کد، تصاویر و کلیات وب سایت های مرتبط با عملکرد یا ابزارها شکل می دهند.
فرصت های دیگر تلاش وب
گزینه های زیادی برای بهبود سرعت شیت وبسایت تان وجود دارد. من میخواهم مفاد اصلی دیگری را پوشش دهم، اما فرصت های بسیار زیادی وجود داراست زیرا سرعت شیت موضوعی غامض می باشد.
کچینگ (cache)
کچینیک نسخه ذخیره شده از یک فایل می باشد. سوای نیاز به بارگیری مجدد آنان، می توانید از فایلهای ذخیره شده در کاغذ سپس مجددا استعمال نمائید.