
مدرس: علی حسینی
زمان برگزاری دوره: برگزار شده در 17 فروردین 99
محل برگزاری دوره: در منزل شما
خلاصه جلسه اول
چگونه 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
زمانی که طول می کشد همه المان ها که قابل اینترکتیو است درکل صفحه لود شوند.