آموزش بهینه سازی PageSpeed سایت با GTMetrix (بخش پایانی)
آموزش بهینه سازی PageSpeed سایت با GTMetrix (بخش پایانی)
Use a Content Delivery Network (CDN) : فعال کردن قابلیت CDN
CDN این توانایی را به شما میدهد که فایل هایی مثل تصویر و استایل و جاوا اسکریپت‌های خود را بر روی سرورهای مختلفی در جهان بگذارید و به محض درخواست یوزر برای لود شدن وبسایت این فایل‌ها از نزدیک‌ترین سرور برای آن ها فرستاده شود و در آخر سرعت لود وبسایت بالا برود.
منتها چون ما در تحریم می باشیم و سرعت لود شدن سرورهای خارج از کشور به علت محدودیت‌های تحریم‌ها و نیز خود فیلترینگ های داخلی چندان تفاضلی با هم دیگر ندارند و هم چون تا اکنون سروری برای بهره گیری از توانایی CDN در درون کشور هم وجود نداشته است (شاید هم بوده و ما اطلاعی نداریم) برای ماهایی که بالای ۸۰ الی ۹۰% بازدید وبسایتمان از داخل کشور می باشد اهمیتی ندارد.
در برخی مواقع هم مشاهده شده که حتی سرعت لود شدن وبسایت را هم کم کرده است.
بنابراین زیاد به خودتان برای بهره گیری از این روند شخت نگیرید.
در وردپرس برای این کار افزونه‌های وردپرس بسیاری وجود دارند که با یک جستجوی بسیار راحت در گوگل می توانید به فهرست بلند بالای عنوان های آن ها دسترسی داشته باشید.
البته یادتان باشد اکثر این افزونه‌های وردپرس از سرورهای پولی بهره گیری میکنند و شما می بایست مبلغی را برای بهره گیری بپردازید.
Make fewer HTTP requests : تلفیق فایل‌های شبیه به هم
GTMetrix با این گزینه به شما آگاهی می دهد تا جایی که امکان دارد فایل‌های شبیه به هم را تلفیق کنید.
مانند تلفیق فایل‌های استایل یا تلفیق فایل‌های جاوا اسکریپت و نیز از یکتا سازی عکس ها با توانایی sprites در CSS هم بهره گیری کنید.
دوستانی که از وردپرس بهره گیری میکنند میتوانند افزونه autoptimize را نصب کنند.
(این افزونه کارهای بسیار دیگری هم انجام میدهد که بعد نصب خودتان به آسانی میتوانید متوجه شوید)
Add Expires headers : معیین کردن زمان برای فایل‌های کش شده
این گزینه برابر با گزینه “Specify a cache validator” در قسمت PageSpeed می باشد.
Configure entity tags (ETags) : پیکربندی E Tag ها
تا جایی که ما اطلاع داریم راه اندازی چندین سرور با بهره گیری از تنظیمات E Tag می‌تواند باعث پرهیز از بروز خطای ۳۰۴ شود.
این کار به شکل دستی بسیار سخت می باشد اما افزونه w3 total cach کم و بیش این کار را در وردپرس انجام میدهد. مسلما باز هم برای ما ایرانی ها کاربردی ندارد!
Compress components with gzip : فعال کردن و بهره گیری از توانایی gzip
این گزینه برابر با گزینه “Enable gzip compression” در قسمت PageSpeed می باشد.
Minify JavaScript and CSS : کاهش حجم کدهای JavaScript و CSS
این گزینه برابر با گزینه “Minify CSS” و “Minify JavaScript” در قسمت PageSpeed می باشد.
Reduce DNS lookups : کاهش تعداد درخواست‌های DNS lookups
GTMetrix از این گزینه مقصودش این می باشد که به شما بگوید که تعداد درخواست های بارگزاری فایل را به سرورهایی دیگر غیر از سرور خودتان کم کنید.
به معنای دیگر درخواست‌هایی که برای سرویس هایی مثل آمار بازدید، تبلیغ های کلیکی، پاپ‌آپ‌ها و… را در وبسایتتان کم کنید.
نکته : DNSlookup ها منجر به اضافه شدن یک تاخیر به درخواست‌های اولیه فرستاده شده به سمت یک میزبان (سرور) را در پی دارد که می توان گفت فرستادن درخواست به سمت تعداد بسیاری از میزبان‌های متعدد منجر به کاهش کارایی یک وبسایت می باشد.
Avoid empty src or href : خالی نبودن مقدار برای صفت های href و src
این گزینه تلاش دارد به شما بگوید زمانی که از تگ هایی مانند a یا img در کدهایتان بهره گیری کرده اید مقدار صفت لینک و یا مقدار نشانی آن ها را بدون مقدار رها نکنید یا فاصله ندهید مانند ” ” .
بلکه چنانچه نیازی به آن ندارید آن را پاک کنید یا داخل آن یک نشانی معتبر بگذارید. با این روند مشکل این قسمت حل میشود.
Avoid URL redirects : کم کردن ریدایرکت های وبسایت
این گزینه کم و بیش برابر با گزینه “Minimize redirects” در قسمت PageSpeed می باشد.
بهترین شیوه حل آن این می باشد که بروید داخل کدها بین لینک ها را بگردید و هر نشانی را که صفحه را به نشانی جدیدی ریدایرکت میکند حذف کنید.
یا این که می توانید برای لینک هایتان target=”_blank” را بگذارید تا در صفحه جدید باز شوند مانند کد پایین( البته این روند در برخی جا ها جواب نمیدهد و باز از شما ایراد میگیرد) :
Make AJAX cacheable : کش کردن AJAX
چنانچه شما هم برای این که از لود کردن مداوم صفحه برای لود شدن داده ها خسته شده اید و رو به بهره گیری از AJAX در جی کوئری آورده اید و به یاری آن داده ها را فراخوانی میکنید، این گزینه به شما می گوید این کدها را هم در کش مرورگر یوزر درج کنید تا سرعت وبسایتتان بالاتر برود.
Put CSS at the top : انتقال فراخوانی‌های استایل به بالاترین حد امکان
در این گزینه GTMetrix می گوید فراخوانی‌هایی که برای بارگزاری فایل های استایل انجام میدهید را به قسمت head وبسایت منتقل کنید. این کار منجر به تکثیر وبسرعت بارگزاری وبسایت میشود.
Put JavaScript at bottom : انتقال فراخوانی‌های جاوا اسکریپت به پایین ترین حد امکان
این گزینه برعکس گزینه بالا میگوید فایل‌های جاوا اسکریپت را به پایین ترین مکان یعنی بالای تگ انتقال دهید.
این منجر می شود که اول وبسایت بارگزاری شود و سپس برود سراغ فایل های جاوا اسکریپت بنابراین یادتان باشد اگر این کار به شمای کلی وبسایتتان آسیبی نمیزند حتما این کار را انجام بدهید.
Remove duplicate JavaScript and CSS : حذف موردهای تکرای از JavaScript و CSS
GTMetrix در اینجا به شما می گوید برای کاهش ظرفیت اول فایل های تکراری استایل و جاوا اسکریپت در حالت وجود و سپس توابع تکرای داخل آن ها را حذف کنید تا سرعت وبسایتتان بالاتر برود.
Avoid AlphaImageLoader filter : عدم بهره گیری از فیلتر AlphaImageLoader
فیلتر AlphaImageLoader هنگامی بهره گیری می شود که بخواهیم از عکس های شفاف مانند PNG در وبسایت بهره گیری کنیم و بخواهیم آن را در اینترنت اکسپلورر بهره گیری کنیم.
بهره گیری از دستور AlphaImageLoader منجر می شود عمل رندر صفحه تا لود کامل عکس متوقف شود و نیز حافظه بیشتری را بهره گیری میکند.
فکر میکنیم این مشکل در نسخه های تازه اینترنت اکسپلورر حل شده است منتها چنانچه هنوزهم میخواهید از آن بهره گیری کنید کافی است به جای بهره گیری از دستور AlphaImageLoader ازسی اس اس هک _filter بهره گیری کنید.
البته اکثر زمان ها کلا حتی سفارش نمیشود که از فیلتر ها هم بهره گیری کنید.
Avoid HTTP 404 (Not Found) error : حذف لینک‌هایی که به خطای ۴۰۴ میرسند
امکان دارد شما در وبسایتتان از عکس ها یا فایل هایی بهره گیری کرده اید که به گذر زمان این فایل‌ها یا عکس ها از سرور پاک شده اند.
GTMetrix با این گزینه به شما هشدار می دهد که یا این لینک ها را حذف کنید یا آپدیت کنید.
Reduce the number of DOM elements : کم کردن عنصرهای DOM در جاوا اسکریپت
بهتر است از عنصر های DOM کمتری در جاوا اسکریپت های وبسایت بهره گیری کنید تا هم خود فایل های جاوا اسکریپت سریع تر لود شوند و هم در آخر وبسایت.
Do not scale images in HTML : عدم تغییر مقدار عکس ها با HTML
در اینجا GTMetrix میخواهد به شما بگوید، HTML این توانایی را ندارد که عکس های شما را کوچک یا بزرگ کند بلکه یا آن را کش میدهد تا بزرگ تر نمایش داده شود یا آن ها را فشرده میکند تا کوچکتر دیده شود و در حقیقت حجم آن ثابت است.
بنابراین بهتر است عکس ها را در اندازه ای که لازم دارید درست کرده و بهره گیری کنید.
Reduce cookie size و Use cookie-free domains : کاهش حجم کوکی
از طرف سرور برای هر دامنه یک کوکی معین می شود، این کار برای تکثیر سرعت باز کردن صفحه ها برای دفعه های بعدی می باشد منتها اگر تعداد این کوکی ها بیشتر شود و یا احتیاجی به کوکی نباشد ، افت سرعت وبسایت را به دنبال دارد.
چنانچه GTMetrix خطایی در این گزینه برای شما گرفته است راه حل آن بسیار آسان می باشد.
کافی است یک ساب دامین ایجاد کنید سپس تمامی فایل هایی که GTMetrix آن جا نمایش داده شده است را به این ساب دامین انتقال دهید و لینک هایشان را از سوی ساب دامین بگذارید.
با این کار هم فشار از دامنه اصلی کم میشود و هم این مورد حل میشود.
Use GET for AJAX requests : تعریف درخواست های AJAX به شکل GET
در این گزینه به شما میگوید اگر از آجاکس بهره گیری کرده اید و درخواستی را می فرستید این درخواست ها را با متد GET بفرستید.
Avoid CSS expressions : عدم بهره گیری از عبارت های CSS برای توسعه سازگاری با مرورگرها
GTMetrix در اینجا هشدار می دهد که از عبارت هایی که در CSS برای توسعه سازگاری با مرورگر ها به ویژه IE وجود دارند بهره گیری نکنید.
این کار علاوه بر افزایش ظرفیت، رخی خطرهای امنیتی را هم به دنبال دارد.
Make favicon small and cacheable : ثبت favicon برای وبسایت
این گزینه می گوید که بهتر است برای وبسایتتان یک آیکن در نظر بگیرید (۱۶*۱۶) تا به عنوان یه نماد کوچک برای وبسایتتان در مرورگر نمایش داده شود و نیز می گوید آن را در کش مرورگر هم درج کنید تا در هر صفحه دوباره لود نشود.
تماس با آرتایار