بهینه سازی سرعت سایت با GTMetrix
بهینه سازی سرعت سایت با GTMetrix
با اعلام گوگل در سالهای اخیر سرعت یک صفحه وب یک عامل کلیدی در نتایج رتبه بندی آن در میان سایر وب سایت ها می باشد. ابزارهای آنلاین زیادی همراه با قابلیت های متفاوت برای افزایش عملکرد وب سایت وجود دارد. در این مقاله ما به بررسی ابزار یا وب سایت GTmetrix ونحوه کمک آن به کسب و کار شما صحبت می کنیم.
بریم سراغ یه آشنایی کلی از سایت GTMetrix :
سایت GTMetrix یک سایت خارجی می باشد که برای طراحان وب سایت ها و سئو کاران و صاحبان وب سایت ها ایجاد شده است که به آنها در بهبود سرعت سایت یا PageSpeed ( سرعت بارگزاری صفحات سایت) کمک میکند . و اطلاعات لازم را در خصوص سرعت بارگزاری سایت به آنها ارایه میدهد.
به عنوان یک پینگ دام شناخته شده وتوسط GT.net ایجاد شده است.هدف اصلی GTMetrix تجزیه و تحلیل عملکرد وب سایت شما و ارائه لیستی از توصیه های قابل اجرا برای بهبود آن است. به شما امکان می دهد عناصری را که منجر به کند شدن زمان بارگذاری صفحه می شوند ، بررسی کنید. از سیستم درجه بندی و نمرات برای نشان دادن عملکرد خوب یک وب سایت استفاده می کند. GTmetrix از هر دو وب سایت YSlow و Google PageSpeed Insights را ترکیب می کند تا هر جزئیاتی را که برای بهبود عملکرد وب سایت خود نیاز دارید به شما اطلاع دهد.
در نظر داشته باشید که گاهی بهینه سازی سرعت سایت با GTMetrix کمی گیج کننده می باشد. چون تمام تجزیه و تحلیل هایی که انجام می دهد از چیزهایی پیچیده است که فقط یک فرد متخصص می تواند از آنها استفاده کند. اما همیشه با کمی تلاش در این زمینه شما هم می توانید یک نمای کلی از آن را یاد گرفته و از آن در بهبود روند سایت خود استفاده کنید.
شروع کنید!
برای شروع می توانید وارد وب سایت GTMetrix شوید و آدرس وب سایت خود را در کادر مربوطه وارد کرده و به آن اجازه تجزیه و تحلیل دهید. پس از مدتی یک گزارش کامل از عملکرد وب سایت با نمره سرعت صفحه در سطح بالا ، زمان بارگذاری و اندازه کلی صفحه به شما ارائه می شود. همچنین پیشنهادهایی در مورد بهبود کارایی شما در سرعت وب سایت در اختیارتان قرار می دهد.
GTMetrix اطلاعات مفید زیادی را دراختیار ما قرار می دهد که با استفاده از آنها می توان به درک کاملی از عملکرد وب سایت رسید. از جمله:
- زمان بارگذاری کامل وب سایت
- اندازه گیری صفحه وب سایت براساس مگابایت(MB)
- تعداد کل اطلاعات مفیدی که وب سایت در هر زمان استفاده می کند
GTMetrix دارای یک نسخه اصلی و یک نسخه حرفه ای است. نسخه اصلی رایگان است. می توانید با یا بدون ورود به GTmetrix از آن استفاده کنید. با این حال ، در صورت ورود به وب سایت آن و ایجاد حساب کاربری ، حتی با نسخه رایگان نیز امکانات بیشتری دریافت خواهید کرد.
درنسخه حرفه ای یا ممتاز به ابزارهای بیشتری دسترسی دارد. اگر به آنها علاقه دارید ، می توانید آن را خریداری کنید. با این حال. نسخه رایگان آنقدر قدرتمند است که امکانات زیادی را در اختیار شما قرار می دهد.
ایجاد حساب کاربری در سایت GTmetrix
اگر با GTmetrix یک حساب کاربری ایجاد کرده و وارد سیستم شوید (چیزی که به شدت توصیه می شود) ، این امکان را خواهید داشت که محل سرور تست را انتخاب کنید. انتخاب مکان بر نتایج آزمایش شما تأثیر می گذارد. این امر به این دلیل اتفاق می افتد که هر چه فاصله مکان آزمایش از مکان واقعی وب سایت شما بیشتر باشد ، تأخیر بیشتر می شود و از این رو سرعت را کندتر می کند.
همچنین ، پس از ورود به سیستم ، گزینه انتخاب مرورگر و پلتفرم (Windows ، Android ، تلفن ، تبلت و غیره) را نیز دریافت خواهید کرد. همچنین می توانید سرعت اتصال را انتخاب کنید ، حریم خصوصی را روشن کنید ، یک ویدیو ایجاد کنید و غیره. اگر وارد سیستم نشدید ، به این ویژگی ها دسترسی نخواهید داشت. با این حال ، فراموش نکنید که برخی از عناصر موجود در این ویژگی ها برای کاربران رایگان محدود شده است و فقط برای کاربران ثبت نام شده در نسخه حرفه ای یا برتر آنها قابل دسترسی است.
افزایش سرعت سایت با GTmetrix
مطالبق با تصویر بالا بعد اینکه آدرس سایت مورد نظرتون رو در کادر آنالیز وارد کردین، روی دکمه “Test your site ” کلیک کنین تا عملیات بررسی سایت شروع شه. بعد از مدت کوتاهی صفحه ای به شکل زیر باز میشه که نتایج بررسی انجام شده رو بهتون نشون میده.
نتیجه آنالیز وب سایت توسط جی تی متریکس :
نتیجه حاصل از دو بخش اصلی GTmetrix Grade و Web Vitals تشیکل شده:
GTmetrix Grade:
از دو معیار محاسبه می شود. آنها عبارتند از :
- GTmetrix Performance: این عدد از ابزار حسابرسی سایت Lighthouse به دست می آید.
- GTmetrix Performance: این معیار عملکرد اختصاصی GTmetrix است که برای اندازه گیری عملکرد کلی یک صفحه وب استفاده می کند.
Web Vitals:
گوگل در سال 2020 چیزی به نام وب ویتال را معرفی کرد. Web Vitals مجموعه ای از معیارها است که بر تجربه کاربر و عملکرد وب می باشد. سایت شما باید در هر دو مورد برتری داشته باشد. اگرچه Web Vitals معیارهای زیادی دارد ، GTmetrix فقط سه مورد از آنها را در نظر می گیرد :
· Largest Contentful Paint :
LCP نشان دهنده مدت زمانی است که طول می کشد تا بزرگترین قسمت وب سایت شما بارگیری شود. LCP می تواند هر چیزی باشد ، از یک تصویر قهرمان گرفته تا یک ویدیوی معرفی ، و حتی فقط یک متن! سرعت بارگذاری این بزرگترین قسمت وب سایت شما بستگی به آنچه در بالای سایت شما قرار دارد بستگی دارد.
· Total Blocking Time :
TBT نشان دهنده کل زمان مسدود شدن یک صفحه وب قبل از شروع تعامل کاربران با آن است. عوامل زیادی باعث ایجاد بلوک می شوند. CSS و جاوا اسکریپت دو مورد از آن عوامل هستند. شما ممکن است عبارت “مسدود کردن رندر” را بشنوید. این معمولا توسط CSS و JavaScripts ایجاد می شود.
· Cumulative Layout Shift :
CLS به پرش بزرگ یا حتی کوچک طرح هنگام بارگذاری صفحه وب اشاره دارد. این مورد در گذشته یک مشکل بزرگ نبود و بسیاری از مدیران وب سایت از این ترفند استفاده می کردند تا افراد را مجبور به کلیک بر روی تبلیغات یا خرید چیزهایی کنند که نمی خواستند. در حال حاضر ، گوگل این معیار مهم را در ارزیابی سئو هر وب سایت قرار داده است.
نکته مهم:
اگر CLS سایت شما عدد بزرگی دارد، شما دربین انبوهی از سایت ها گم شده اید!
در قسمت پایین چند تب دیگر وجود داردکه هریک را به اختصار توضیح می دهیم:
The Summary Tab:
در این تب شما جدول زمانی از رویدادهای کلیدی وب سایت را بصورت تصویری از سرعت آنها مشاهده خواهید کرد. همچنین موارد زیر را می توانید در اینجا پیدا کنید:
- TTFB
- اولین رنگ محتوا
- بزرگترین رنگ محتوا
- زمان تعامل
- زمان بارگذاری
- زمان بارگذاری کامل
The Performance Tab:
در اینجا خواهید دید که عملکرد سایت شما در همه معیارهای Core Web Vitals چگونه است. اگر کلید جزئیات متریک را روشن کنید ، مقدار مورد نظر برای هر متریک و ارزش واقعی سایت شما را به شما نشان می دهد. این شامل شش پارامتر است:
- First Contentful Paint
- Speed Index
- Largest Contentful Paint
- Time to Interactive
- Total Blocking Time
- Cumulative Layout Shift
The Structure Tab:
این جایی است که لیستی از مسائل ، تاثیری که این مسائل بر آنها وارد می کند و اقداماتی که می توانید برای بهبود سایت خود انجام دهید را مشاهده خواهید کرد.
The Waterfall Tab:
در این تب می توانید درخواست های فردی را در یک صفحه وب مشاهده کنید. می توانید هر درخواستی را از اینجا تجزیه و تحلیل کنید و دریابید که چه چیزی باعث مشکل کند شدن بارگیری می شود.
The Video Tab:
تب ویدئو جایی است که می توانید یک فیلم ضبط شده از نحوه بارگیری صفحه وب خود را مشاهده کنید. این امر به ویژه در صورتی مفید است که وب سایت شما فقط در مرورگرها و اندازه های صفحه خاص دارای مشکلات بصری باشد.
The History Tab:
این تب به صورت گرافیکی نتایج آزمایشات گذشته را به شما نشان می دهد. تعداد آزمایشاتی که حساب رایگان می تواند ذخیره کند محدود است. اگر به تعداد بیشتری نیاز دارید ، باید نسخه پریمیوم آن را تهیه کنید.
کلام آخر:
در این مقاله سایت بطور کلی بهینه سازی سرعت سایت با GTMetrix بررسی شد. اگر علاقمند به مطالعه بیشتر در این زمینه هستید وپیشنهاد میکنم مقاله آموزش افزایش سرعت سایت gtmetrix را در وب سایت ما مطالعه کنید و برای ارتباط بیشتر با ما به صفحه اینستاگرام مراجعه کنید.
با آموزش منو ریسپانسیو Responsive واکنش گرا از تیم وب یار خدمت شما هستیم,اگر اصول کلی در مورد کدهای ریسپانسیو را نمیدانید و میخواهید صحفه ای ریسپانسیو بسازید حتما مطلب آموزش کدهای طراحی سایت ریسپانسیوResponsive را بخوانید. آموزش طراحی منو ریسپانسیو Responsive قدم به قدم با من همراه باشید تا ببینید که به چه راحتی به طراحی و کدنویسی یک منو ریسپانسیو (واکنش گرا) میپردازیم,و شما پس از یاد گرفتن کدهای طراحی منو واکنش گرا به راحتی میتوانید منو ریسپانسیو داشته باشید که در حالت عادی به صورت افقی نمایش داده بشود,و در صفحه نمایش هایی همانند موبایل ,تبلت,به صورت یک آیکون نمایش داده شود که با کلیک کردن بر روی این آیکون منو به صورت منوی کشویی ریسپانسیو نمایش داده شود. برای این کار ما از هیچ فریم ورکی استفاده نمیکنیم . خودمون با Media Query ها این کار رو به راحتی انجام میدیم . اول از همه بذارید با منطق این موضوع آشناتون کنم . ما با استفاده از Media Queries میتونیم تعیین کنیم که صفحه ی وبمون تو هر رزولوشن به چه شکلی نمایش داده بشه . برای منویی که قراره ایجاد کنیم هم به همین صورت عمل می کنیم . یک منو طراحی می کنیم و با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا منو بصورت عادی نمایش […]
حالا چند وقتیه که اصطلاح طراحی فلت خیلی باب شده,البته بهتر بگم چندین سال,من هم امروز تصمیم گرفتم درباره ی آموزش طراحی فلت در اصفهان مقاله جدیدی در وب یار قرار بدهم.تا کسانی که مایل به دانستن اطلاعات درباره ی طراحی فلت هستند,به اطلاعاتی جامع و کامل از طراحی فلت برسند.خب حالا قدم به قدم تا انتهای این پست با من باشید تا ببنید که چه مطالب مفیدی از طراحی فلت بدست می آورید. خب خیلی وقتتون رو نمی‌گیرم و سریع شروع میکنم. اول از همه:طراحی فلت چیست (flat design) طراحی فلت به نوع جدیدی از طراحی گفته میشود که اول ازهمه در کشورهای خارجی باب شد. که در آن از نوع خاصی از رنگ ها ,آیکون ها و محدودیت های خاص خودش استفاده میشه و یک شعار خاص. در واقع همه چیز ساده است اما زیبا… در طراحی تخت به مانند طراحی سنتی دیگر از سایه‌های مخلتف ، گرادینت‌ها ، آنیمیشن‌ها ، تکسچرها و پترنها استفاده نمی‌شود.این نوع طراحی clean ، ساده و دارای یک ساختار تمیز و مرتب است ، فضای خالی زیاد دارد ، رنگ‌ها روشن، ساده و یکپارچه هستند، همه‌ی المان‌ها ۲ بعدی می‌باشند ، گوشه‌ها شارپ هستند ، روی تایپوگرافی نوشته‌ها کار شده است و دکمه‌ها و المان‌ها یک دست بدون سایه و برآمدگی هستند.نمونه های معروف شروع به کار طراحی فلت رو در طراحی […]
روش های مختلفی برای تغییر فونت و رنگ در ویژوال استدیو وجود دارد. به عنوان مثال، میتوانید تم تیره پیش‌فرض (که به آن «حالت تاریک» نیز گفته میشود) به یک تم روشن، یک تم آبی، یک تم با کنتراست اضافی، یا موضوعی که با تنظیمات سیستم شما مطابقت دارد، تغییر دهید. همچنین می توانید نوع فونت و اندازه متن را هم در IDE و هم در ویرایشگر کد تغییر دهید. تم رنگ را تغییر دهید در نوار منو، Tools > Options را انتخاب کنید. در لیست گزینه ها، Environment > General را انتخاب کنید. با استفاده از فهرست تم رنگی، تم پیش‌فرض تیره، تم روشن، تم آبی یا آبی (کنتراست اضافی) را انتخاب کنید. همچنین می توانید با انتخاب گزینه Use system setting، از تم مورد استفاده ویندوز استفاده کنید. توجه داشته باشید! وقتی تم رنگی را تغییر می‌دهید، متن در IDE به فونت‌ها و اندازه‌های پیش‌فرض یا سفارشی‌شده قبلی برای آن تم باز می‌گردد. تغییر فونت و اندازه متن میتوانید فونت و اندازه متن را برای تمام پنجره‌های قاب و ابزار IDE یا فقط برای پنجره‌ها یا عناصر متنی خاص تغییر دهید. برای تغییر اندازه فونت و متن در IDE در نوار منو، Tools > Options را انتخاب کنید. گزینه ها، Environment > Fonts and Colors را انتخاب کنید. در لیست Show settings for Environment را انتخاب […]
دارت یک زبان برنامه نویسی نو ظهور است که توسط گوگل ارائه شده است. تا پیش از معرفی فریمورک فلاتر این زبان در بین برنامه نویسان ناشناخته بود. با معرفی فریمورک محبوب فلاتر که توسط ان میتوان یک بار کدنویسی کنید و بارها برای دستگاه های مختلف ios ، android ، window از آن خروجی بگیرید. که به زبان دارت نوشته شده است زبان برنامه نویسی دارت نیز محبوبیت خود را بین برنامه نویسان پیدا کرد. در این مقاله قصد داریم با این زبان برنامه نویسی بیشتر آشنا شویم. مروری برزبان برنامه نویسی دارت این زبان در 10 اکتبر 2011 توسط توسط Lars Back و KasperLund که از کارشناسان ارشد شرکت گوگل بودند ارئه شد. سال 2013 اولین نسخه رسمی این زبان منتشر شد. در آن زمان هدف از ارائه این زبان ساخت وب اپلیکیشن ها بود. پس از آن تغییرات زیادی در ساختار اصلی این زبان صورت گرفت در سال 2018 نسخه 2 این زبان ارائه شد که این نسخه با نسخه قبلی خود تغییرات زیادی از فرمت داینامیک تا استاتیک داشت. در نسخه جدید بیشتر تمرکز بر روی برنامه نویسی cross platform یعنی یک بار کد نویسی و خروجی گرفتن برای سیستم عامل های مختلف قرار گرفت. دارت از زبان های برنامه نویسی مختلفی مثل C , C++ , C# , java , Javascript , Kotlin , Ruby […]
برای آموزش طراحی سایت در فتوشاپ باید سرعت طراحی سایتتان در فتوشاپ بالا باشد در این آموزش طراحی سایت با فتوشاپ photoshop به شما کلید های سریع طراحی سایت در فتوشاپ را آموزش میدهیم. ترفند شماره 1: چگونه یک قسمت از یک سند را که از چند لایه تشکیل شده کپی کنیم وقتی منطقه ای از یک سند را انتخاب کنید و برای انجام عمل کپی کلیدهای Ctrl+C را می فشارید آن منطقه تنها از لایه انتخابی کپی می شود. اما اگر شما بخواهید از تمام اجزای لایه ها در آن قسمت در یک لایه جدید کپی داشته باشید می توانید با افزودن کلید Shift به کلیدهای Ctrl+C این کار را انجام دهید. ترفند شماره 2: اسناد خود را در کنار هم مشاهده کنید در ابتدای تاریخ فتوشاپ (زمان زندگی دایناسورها!) وقتی تعدادی سند را باز می کنید فتوشاپ آنها را به صورت جلوی هم نمایش می دهد. یعنی تصاویر یکی پس از دیگری در جلوی هم باز می شوند که این روش Cascading نام دارد. اما اگر بخواهید به طور مثال 4 تصویر باز شده خود را کنار هم قرار دهید کافیست از منوی Windows منوی Documents را باز کرده و گزینه Tile را انتخاب کنید. ترفند شماره 3:حالت ارائه طرح به مشتری در فتوشاپ زمان آن فرا رسیده که طرح نهایی خود را به مشتری نشان […]
امروزه داشتن یک وب سایت و برنامه های کاربردی مربوط به آن به بخشی ضروری برای هر کسب و کاری تبدیل شده است.و هر کسی به دنبال بهترین فریمورک برای ساخت وب سایت خود می گردد. مقایسه ی نود جی اس و جنگو امری طبیعی درهنگام توسعه ی یک وب سایت می باشد. در این مقاله مقایسه ای دقیق از نود جی اس و جنگو به شما ارائه خواهیم داد. متوجه می شوید که تفاوت های این دو در چیست و چگونه می توانید از لوپ مقایسه ی آن ها نجات پیدا کنید!! وقتی نوبت به توسعه اپلیکیشن وب می‌رسد، برای تقویت برنامه وب خود به یک برنامه قوی نیاز دارید. Node.js و Django دو فریمورک منبع باز هستند که به دلیل عملکرد همه جانبه آن ها ، بسیار مورد بحث قرار گرفته اند. Node.js vs Django نود جی اس یک محیط بین پلتفرمی دارد که برای ساخت اپلیکیشن های کارآمد و سریع مورد استفاده قرار می گیرد. اساس آن جاوا اسکریپت است و می تواند هم در سمت سرور و هم در سمت مشتری اجرا شود. دلیل محبوبیت Node.js این است که ، ابزاری آسان برای اجرای جاوا اسکریپت خارج از مرورگر می باشد. از طرفی جنگو یک فریمورک سطح بالا و بین پلتفرمی پایتون است. این برنامه بر روی توسعه ی سریع برنامه ها و حذف کارهای تکراری […]