خلاصه جلسه اول‎ ‎

چگونه ‏speed ‎‏ در سرچ کنسول را از حالت ‏moderate‏ به حالت ‏fast ‎‏ ببریم؟

گوگل سایتی را ‏fast ‎‏ می داند که سرعت بارگذاری آن برای دسکتاپ زیر 3 ثانیه و برای موبایل زیر1 ‏ثانیه ‏باشد.‏

عوامل زیادی در سرعت سایت موثر هستند از جمله وب سرور،‎ ‎اینترنت،‎ ‎محل سرور،‎ ‎سخت افزاری ‏سایت ‏وعوامل دیگه.‏

برای افزایش ‏performance‏ از ‏Gtmetrix ‎‏ استفاده می کنیم.‏

سایت خود را در ‏Gtmertix ‎‏ اسکن کنید.‏

برای شما صفحه ای می آید که دو باکس دارد:‏

• performance scores
•  ‏page details

باکس اول ‏performance scores‏ شامل:‏

‏ ‏page speed score ‎‏ : که سایت شما را براساس معیارهای منطبق بر استاندارد گوگل می سنجد.‏

Yslow score‏: سایت شمار ا بر طبق استاندارهای منطبق بر یاهو می سنجد.‏

این معیارها به هم نزدیک هستند و با انجام دادن یکی آن یکی هم درست می شود.‏

باکس دوم ‏‎ ‎‏ ‏page details‏ که شامل :‏

Fully loaded time‏: زمانی که طول می کشد که صفحه شما کاملا لود شود. این زمان در ایران به ‏دلیل ‏بعضی تحریم ها و برنامه ها که شاید برنامه نویس در کدها قرار داده باشد بیشتر از حد معمول ‏باشد. ‏دلیل دیگر اینکه بعضی سرورها در خارج از ایران هستند واز کاربرهای ایرانی دورند.‏

Total page size‏: حجم صفحه باید کمتر از 3 مگابایت باشد. این زمان در سایت های مختلف و بنا به ‏نوع ‏فعالیتشان متفاوت است.‏

Requests‏: تعداد درخواست های که به سرورفرستاده می شود تا یک صفحه لود شود. هرچه تعداد ‏این ‏درخواست ها کمتر باشد سرعت سایت بالاتر است.‏

در قسمت ‏page speed ‎‏ در سربرگ ‏type ‎‏ نشان می دهد هر کدام از گزینه مربوط به کدام قسمت ‏سایت ‏هستند.‏

IMAGE

‏1)‏ Serve scaled image

عکس خود را با کدنویسی تغییر سایز ندهید. بهتر است عکس خود را بوسیله ابزارهای گرافیکی ‏مانند ‏فتوشاپ به سایزی که برای سایت خود لازم دارید تنظیم کنید.‏

‏2)‏ ‎Optimize image

در این قسمت جی تی متریکس ورژن اپتیمایز عکس را به شما می دهد.‏

ولی بهتر است قبل ازآپلود فایل آنرا اپتیمایز کنید.‏

روش دستی: عکسی را که می خواهید در محتوای سایت قرار دهید بهتر است با فرمت ‏jpge ‎‏ باشد. ‏کیفیت ‏عکس تغییر نمی کند ولی حجم بشدت کاهش می یابد. در فتوشاپ عکس را ‏save for web ‎‏ ‏ذخیره کنید ‏همچنین یک گزینه به نام ‏progressive ‎‏ در فتوشاپ هست بهتر است قبل از ذخیره عکس ‏آنرا فعال کنید.‏

این گزینه باعث می شود که عکس شما ابتدا بصورت پیکسل های شطرنجی ظاهر شود و بصورت پرده ‏سینما ‏پایین نیاید و ساختار عکس از ابتدا ظاهر شود.‏

عکس های را که برای آیکون ها استفاده می کنید بهتر است با فرمت ‏png ‎‏ باشد.‏

فرمت ‏svg‏ ‏‎ ‎را زمانی می توانید استفاده کنید که بخواهید از انیمیشن متحرک در سایت خود استفاده ‏کنید. ‏این فرمت از عکس را گوگل در نتایج خود نشان نمی دهد.‏

سپس عکس های خود را در سایت هایی که فشرده سازی می کنند آپلود کنید و خروجی را در سایت ‏قرار ‏دهید. بهترین سایت در این زمینه ‏tinypng.com ‎‏ است زیرا زیر مجموعه خود گوگل است.‏

روش مکانیزه: برای هر عکسی که آپلود می شود سایزهای مختلفی مانند سایز موبایل، آیکون،‎ ‎دسکتاپ ‏از ‏عکس ساخته شود و‎ ‎در مواقعی که فراخونی بشوند بصورت هوشمند خودش انتخاب می کند در چه ‏سایزی ‏ارائه بدهد.این عکس ها را در موقع آپلود نیز اپتیمایز کنید.‏

در وردپرس این کار بوسیله پلاگین ‏smush‏ انجام می شود.‏

‏3)‏ Specify image dimensions‏

ابعاد تصاویر خود را بوسیله تگ های ‏html ‎‏ و‎ ‎با اتریبتوت های ‏img ‎‏ مشخص کنید زیرا کراولر سریعتر‎ ‎آن‎ ‎را ‏می خواند.‏

اگر ابعاد آن مشخص نشود وقتی کلاینت در مرورگر‎ ‎آن‎ ‎را سرچ کند چون ابعاد را ندارد دوباره به ‏سرور ‏درخواست ارسال می شود برای تعیین ابعاد و‎ ‎یک درخواست اضافه می شود و زمان لود را ‏افزایش ‏می‌دهد.‏

‏4)‏ ‎Combine image using css sprites

زمانی که آیکون ها سایت را با فرمت ‏png ‎‏ ذخیره کرده اید هر کدام از این ها برای فراخوانی یک ‏درخواست ‏دارند با وجود اینکه حجم کمی دارند.‏‎ ‎

css sprites ‎‏ این امکان رو به شما می دهد که تمام این آیکون ها را بصورت یه عکس در بیاوردید و ‏برای ‏فراخوانی همه آن ها یک درخواست ارسال می شود. با استفاده از ‏css ‎‏ به آن مختصات می دهید. ‏با این کار ‏هر عکسی را بخواهید فراخوانی می کنید با این تفاوت که برای هر عکس، درخواستی جداگانه ‏ارسال ‏نمی‌شود.‏

راهکار بهتر این است که شما برای آیکون های خود از ‏font awesome ‎‏ استفاده کنید با این کار ‏تعداد ‏درخواست ها را کاهش می دهید و همچنین برای دفعات بعدی آن را کش می کنید.‏

SERVER

‏1)‏ Leverage browser caching‏

به این معنی است که شما بعنوان ادمین سایت تعیین کنید که منابع شما در دستگاه کلاینت کش شود ‏یا ‏خیر یا اگر کش شود برای چه مدتی؟

‏ کش کردن این مزیت را دارد که کاربر برای دفعات بعدی که به سایت شما مراجعه کند برخی منابع شما ‏مانند ‏لوگو از سایت شما دانلود نشده و از لوکال کلاینت دانلود شود واین باعث می شود سایت زودتر بالا ‏بیاید.‏

اگر کش بصورت درست تنظیم نشود در سایت های که اطلاعات خود را روزانه آپدیت می کنند ممکن ‏است ‏شما کش یک هفته ای را تنظیم کرده باشید با این کار تا یک هفته دیگه صفحه شما در دستگاه ‏کلاینت ‏آپدیت نمی شود.‏

برای اینکار کدی را که در قسمت ‏more ‎‏ این گزینه در ‏gtmrtrix‏ است که زمان بندی کش قسمت ‏های ‏مختلف سایت را مشخص کرده است را در فایل ‏htaccess‏ سایت خود قرار دهید.‏

برای سایت های وردپرسی پلاگین های ‏wprocket، ‏wp total cache‏ این کار را انجام می دهد. ‏

‏2)‏ Enable compression‏

کلاینت به سرور درخواست ارسال می کند، سرور فایل های که حجم بالایی دارند را فشرده می کند ‏تا ‏حجمشان کمتر شود و سرعت انتقال سریعتر باشد.‏

روش های مختلفی برای تنظیم فشرده سازی وجود دارد بستگی دارد سرور شماIIS ‎‏ باشد یا ‏Apache‏ .‏

برای اینکار کدی را که در قسمت ‏more ‎‏ این گزینه در ‏gtmrtrix‏ است را در فایل ‏htaccess‏ قرار دهید ‏این ‏روش برای سرورهای ‏apache‏ است .‏

‏3)‏ Specify cache valiator‏

‏4)‏ Spacify avary : Accept Encoding headerd‏

هر فایلی یک هدر دارد که خودش را معرفی می کند. تا مرورگر آن را بشناسد.‏

برای فایل های خود هدر مشخص کنید.‏

‏5)‏ ‎Avoid landing page redirects

هر ریدایرکت اضافه باعث می شود تجربه کاربری بدی ایجاد کند و باعث شده کاربر به چیزی که می ‏خواهد ‏دیرتر برسد. بنابراین از ریدایرکت اضافه پرهیز کنید.‏

‏6)‏ ‎Enable keep Alive

این مورد قابلیتی است که باید در سرور وجود داشه باشد. وقتی تعداد زیادی درخواست به سرور داده ‏می‌شود ‏بجای اینکه برای هر درخواست سه مرحله ‏connection‏ ، ‏handshake‏ و ‏disconnection‏ ‏انجام شود ‏همه آنها بصورت یک درخواست به سرور انتقال داده شوند بدون اینکه ‏disconnection‏ در ‏بین آن ها رخ ‏بدهد. با اینکار شما زمان زیادی را سیو می کنید.‏

‏7)‏ Defer parsing of javascrip‏

منابع جاوا اسکریپت را در انتهای تگ ‏body‏ قرار دهید. وقتی این منابع را در تگ ‏header‏ قرار دهید تا ‏تمام ‏منابع هدر لود نشود منابع دیگر لود نمی شود و زمان لود شدن سایت شما زیاد می شود. به این کار ‏defer ‎parsing ‎‏ می گویند.‏

‏8)‏ Minify javascipt‏

‏9)‏ Minify css‏

‏10)‏ Minify html‏

در فایل های جاوا اسکریپت و‎ css ‎‏ ممکن است اینتر، کامنت، فاصله وجود داشته باشد که حجم را ‏اشغال ‏کند. فایل ها‎ ‎‏ را ‏minfy ‎‏ کنید و ورژن ‏minify‏ ‏‎ ‎شده را در سایت خود بگذارید. بعد از اینکار می ‏توانید آن ها ‏را نیز باندل کنید.‏

‏11)‏ Specify a character set early‏

این فاکتور تاثیر کمی در سرعت سایت دارد. این مورد را در سرور تعریف کنید.‏

‏12)‏ Put css in document head ‎‏

مقداری از فایل های ‏‎ css‏ که مربوط به اسکلت سایت است و در ‏first view‏ دیده می شوند را در ‏تگ ‏head ‎‏ قرار دهید. برای اینکه اول فایل های درون تگ هد و سپس باقی فایل ها را فراخوانی می کند.‏

‏ در قسمت ‏yslow ‎‏ گزینه ای که مربوط به سرور است ‏

‏13)‏ ‏‏Use content delivery network (CDN)‎‏

اگر سرور از مکانی که منابع سایت در آن قرار دارد دور باشد سرعت دریافت منابع برای آن کاربر ‏کند ‏می‌شود. ‏CDN‏ را برای این بوجود می آوریم که منابع را در نزدیکترین جایی قرار دهیم که کاربر آن ‏را ‏تحویل بگیرد.‏

‏14)‏ Reduce DNS lookups‎‏

‏ فرایند رسیدن به سایت شما از یه تعداد زیادی ‏DNS ‎‏ سرور عبور می‌کند. در مقابل هر دامینی که دارید ‏یه ‏آی پی وجو دارد. در یک جدول یک سمت اسم دامین ها و در سمت دیگه آی پی قرار دارد. به این ‏فرآیند که ‏هر دامین آی پی متناظر خودش رو پیدا کنه ‏looKup‏ کردن می گویند. برای اینکه دامین از ‏سرورها عبور کنند ‏تا وظیفه هر سرور انجام بشود لوک اپ زیادی نیاز دارد بنابراین بهتر است که این ‏زنجیره کوتاه باشد.‏

‏15)‏ Reduce the number of DOM elements‏

DOM‏ اختصار عبارت ‏Document object model‏ است. ‏

زمانی که به مرورگر درخواست می دهید که سایتی بالا بیاید درخواست به سرور انتقال داده می شود و ‏سرور ‏خروجی ‏html‏ را می دهد.این ‏html ‎‏ المان های زیادی مانند عکس و نوشته دارد و به این ها ‏object ‎‏ ‏می‌گویند که ‏‎ id ‎منحصر به فرد دارد. هر چه تعداد این المان ها بیشتر باشد مرورگر شما ‏cpu ‎‏ ‏بیشتری را ‏اشغال می کند. ‏

در این قسمت از ما می خواهد که تعداد المان ها را کاهش دهیم که تجربه کاربری بهتری داشته باشیم.‏

‏16)‏ Make ajax cacheable‏

Ajax‏ تکنیکی برای ایجاد صفحات وب بطور سریع و پویا است. به صفحات این امکان را می دهد ‏که ‏بصورت غیر همزمان و تنها با تبادل اندک اطلاعات با سرور ، بخشی از صفحه را بروز رسانی کنند. به ‏این ‏ترتیب می توان تنها بخشی هایی از صفحه را بدون بار گذاری کل صفحه تغییر داد. اگر ‏ajax ‎‏ ‏وجود ‏نداشت کاربر برای دریافت اطلاعات از سرور، حتی دریافت اطلاعات سبک، باید کل صفحه ‏را ‏refresh‏ ‏می‌کرد. بسیاری از سایت های معروف دنیا از این فناوری استفاده می کنند.‏

‏17)‏ Avoid AlphaImageLoader filter‏

‎ AlphaImage‏ یک اتریبیوت است که میزان شفافیت تصاویر را نشان می دهد.‏

این گزینه می خواهد تصاویر را به این صورت لود نکنید.‏

‏18)‏ ‎ Use cookie free domains‏

هر دامینی که استفاده می کنید برای شما کوکی ایجاد می کند، یا برنامه نویس آن را ست می کند یا ‏خودش ‏ایجاد می شود. برای هر منبعی که در سایت وجود دارد کوکی ایجاد می شود که این خود زمان بر ‏است. بهتر ‏است به این شکل نبوده و برای ساب دامین ها کوکی ست نکنید.‏

خلاصه جلسه دوم

waterfall

در این قسمت شما می توانید ببینید هر درخواست شما چه زمانی نیاز دارد که انجام شود و در هر قسمت ‏از ‏سایت خود که دچار مشکل بودید آن را برطرف کنید.‏

رنگ های موجود در ‏waterfall ‎‏ نشان دهنده چیست؟

رنگ بژ یا کرم: ‏blocking

رنگ بژ نشان می دهد که درخواست توسط سرور دریافت شده ولی یا مسدود شده یا در صف پردازش ‏قرار ‏گرفته است. در سرورهای سریع و گران تر امکان دریافت چندین فایل به صورت همزمان وجود دارد ‏که این ‏مسئله را کاهش می دهد.‏

رنگ آبی: ‏DNS lookup

در طول این زمان به دنبال پیدا کردنDNS lookup ‎‏ ها است.هر چه تعداد کمتر باشد بهتر است.‏

رنگ سبز: ‏connecting

رنگ سبز زمان اتصال به سرور را نشان می دهد. پس رنگ سبز طولانی مشکل در شبکه، یا مشکل سرور ‏در ‏پاسخگویی را نشان می دهد. مثلا زمانی که درخواست ها به سرور زیاد است این مشکل پیش می ‏آید‎.‎

سبز کم رنگ که مقداری سبز پررنگ تر در اون وجود داره نشان دهنده ‏ssl ‎‏ است. نشان دهنده وجود ‏ssl ‎‏ در ‏سایت است. ‏

‏ رنگ قرمز: ‏sending

در این مرحله درخواستی که از سرور برای واحد پاسخگو فرستاده شده ارسال می شود. چون سرور ‏خودش ‏پاسخگو است این زمان بسیار کم است.‏

رنگ بنفش: ‏waiting‏ ‏

رنگ بنفش نشان دهنده پردازش یک درخواست توسط سرور است. یا به عبارت دیگر وقتی یک ‏درخواست ‏ارسال می شود، چقدر باید صبر کنیم تا پاسخ آن را بگیریم. پس ممکن است مشکل در سمت‎ ‎back-‎end ‎داشته باشیم. مثلا عدم رعایت کلیدهای خارجی در دیتابیس (در حجم بالا سرعت را کاهش ‏می دهد) یا ‏درخواست های سنگین برای پردازش اطلاعات و دسترسی به دیتابیس و… ‏

نمودار بنفش به اسم‎ waiting ‎یا در انتظار شناخته می شود‎.‎

رنگ خاکستری:‏receiving

مدت زمان دریافت اطلاعات از سمت سرور به کلاینت. در این زمان چون ارتباط برقرار است زمان زیادی ‏را ‏صرف نمی کند.‏

‏ در قسمت توضیحات هر درخواست اطلاعاتی به شما می دهد مانند ‏response version ‎‏ که باید ‏http ‎‏ ‏آن ‏‏2 باشد.‏

Css ‎‏ جزء منابعی است که حجم بالا دارند این گونه منابع مرحله ‏waiting ‎‏ و ‏receiving ‎‏ طولانی دارند.‏

اول منابعی را صدا بزنید که ‏cpu ‎‏ ومموری کمتری اشغال می کنند. بنابراین آن قسمت ‏css ‎‏ که ‏اسکلت ‏صفحه را نشان می دهد وحجم کمتری دارد را جدا کنید و در تگ ‏head ‎‏ قرار دهید در تگ ‏style ‎‏ ‏بصورت ‏inline‏ قرار دهید وcss ‎‏ باندل شده را در انتهای هد قرار دهید.‏

فایل هایjs ‎‏ در انتهای تگ ‏body ‎‏ قرار دارد بعد از ‏css ‎‏ لود می شوند.‏

Timings

در تب ‏timings‏ ‏

زمانی که برای‎ connect ‎، ‏redirects‏ وbackend‏ صرف می شود را با هم جمع می کنند و بعنوان ‏TTFB‏ ‏حساب می شوند.‏

TTFB‏ اختصار عبارت ‏time to first byte‏ مدتی زمانی که طول می کشد یک بایت از سمت سرور ‏به ‏کلاینت برسد. بهترین زمانی که برای این کار باید در نظر بگیریم زیر 500 میلی ثانیه باید باشد.‏

اگر این زمان طولانی باشد یا مشکل از شبکه است که به ریدایرکت و ‏connect‏ ربط داشته یا کد نویسی ‏و ‏یا ‏backend‏ مشکل دارد.‏

خلاصه جلسه سوم

Page speed insights ‎

Page speed insights‏ زیر مجموعه پروژه بزرگتری به نام ‏lighthouse‏ یا همان فانوس دریایی، علاوه ‏بر ‏سرعت سایت به تجربه کاربری نیز می پردازد.‏

وقتی سایت را در ‏lighthouse‏ اسکن می کنید ‏

دارای 5 قسمت است:‏

‏1)‏ ‎Performance

‏2)‏ Accessibility‏

‏3)‏ Best practices‏

‏4)‏ ‎Seo

‏5)‏ Progressive web app‏

این ویژگی امکان می دهد تا سایت به اپلیکیشن موبایل وصل شود

‎Performance

همان ‏page speed insights ‎‏ است این قسمت 6 متریک دارد که لایت هاوس در ورژن جدید ‏خود ‏تعدادی از آن ها را حذف می کند وخروجی آن بهwaterfall ‎‏ جی تی متریکس نزدیک است که اعداد ‏در ‏آن برای نسخه موبایل و دسکتاپ تغییر می کنند و به بررسی تجربه کاربری نیزمی پردازد. گوگل ‏این ‏اطلاعات را با توجه به الگوریتم رنک برین خود بدست می آورد، زیرا وقتی سرعت پایین باشد کاربر ‏تجربه ‏خوبی از سایت ندارد.‏‎ ‎

First contentful paint‏ ‏‎(FCP)‎

‏ از زمانی که کاربر به صفحه می رسد و مروگر می خواهد صفحه را رندر کند اولین قسمت هایی از ‏محتوای ‏سایت که شامل عکس و اسکلت اولیه سایت نمایش داده شود را محاسبه می کند.‏

تاثیر این مسئله زمانی روشن می شود که کاربر همزمان چند تب از سایت های مختلف را باز کرده ‏ومنتظر لود ‏آن ها است. هر صفحه ای که زودتر باز شوند را کلیک می کند و باعث افزایش نرخ کلیک ‏سایت می‌شود.‏

FCP‏ بین 0 تا 2 ثانیه برای سایت سریع است و رنگ آن سبز می شود. این عدد برای موبایل زیر 1 ثانیه ‏و ‏برای دسکتاپ زیر 3 ثانیه مناسب است.‏

چگونه این آیتم را بهبود بدهیم؟

فایل ‏css ‎‏ را حداقل دو بخش کنید. در هد سایت اطلاعاتی قرار بدهید که اسکلت سایت را ایجاد کنند ‏و ‏سایت را ‏table‏ ‏less‏ طراحی کنید وبجای آن از تگ ‏div ‎‏ استفاده کنید. از وب فونت گوگل استفاده کنید ‏و ‏آن را کش کنید ، از ‏CDN‏ استفاده کنید.‏

First Meaningful Paint‏ ‏‎(FMP)‎

‎ ‎در ورژن جدیدلایت هاوس این گزینه حذف شده است.‏

FMP ‎‏ مدت زمانی است که طول می کشدکه یک محتوای با معنا به کاربر ارائه دهد. محتوای با معنا ‏یعنی ‏محتوایی که کاربر بفهمد چیزی که به دنبال آن می گردد در این سایت هست.‏

توصیه ای که می شود علاوه بر اینکه عکس و ‏CSS ‎‏ را به ‏CDN ‎‏ انتقال می دهید و آن را کش ‏می‌کنید، ‏مقداری ازCSS ‎‏ را به هد انتقال دهید و بصورت ‏inline ‎‏ قرار دهید.‏

Speed index‏ ‏‎(si)‎

با چه سرعتی طول می کشد که مروگر بتواند محتوا را نمایش دهد. این معیار سنجش نشان دادن ‏کانتنت با ‏معنا برای کاربر است.‏

در این مرحله صفحه لود شده است. زمانی که مراحل قبلی بهینه شود این مرحله خود به خود امتیاز ‏بهتری ‏بدست می‌آورد.‏

بهتر است از انیمیشن های سنگین استفاده نکنید و طوری کد بنویسید که همه المان ها بصورت مجزا ‏لود ‏شوند.‏

First cpu idle

اولین زمانی که ‏cpu‏ سمت مرورگر کار نمی کند و باری روی دوش ‏cpu ‎‏ نیست. نشان می دهد منابع ‏برای ‏لود شدن در دستگاه کلاینت مصرف ‏cpu ‎‏ زیادی ندارند. معمولا مصرف‎ cpu ‎بالا به جاوا اسکریپت ‏ربط دارد ‏هر قدر این زمان کمتر باشد نشان دهنده اینست که برای لود شدن به زمان کمتری نیاز دارد.‏

گوگل خوانایی و تجربه کاربری برایش اهمیت دارد. هر کدام از این آیتم ها روی این دو مورد ‏تاثیرگذار ‏هستند.‏

این مورد بزودی جای خود را به آیتم ‏tti ‎‏ می‌دهد.‏

First input delay‏ ‏‎(FID)‎

وقتی سایتی لود می شود المان های دارد که از کاربر اینترکشن می خواهد مثلا یک صفحه فرم، یا یک ‏دکمه ‏یا لینک دارد. در این صفحات، زمان از صفر تا وقتی که این المان ها در این صفحات قابل فعالیت ‏برای کاربر ‏شوند محاسبه می شود.‏

Max potation first input delay

ماکزیمم حالت برایFID‏ است.‏

‏ برای بهبود آن، منوی اصلی سایت را بالای سایت بگذاریم تا سریع لود شود و اینترکشن رخ بدهد. این ‏مورد ‏نیز روی تجربه کاربری تاثیر می گذارد.‏

Time to interactive

‏ زمانی که طول می کشد همه المان ها که قابل اینترکتیو است درکل صفحه لود شوند.‏