رفع خطای Avoid CSS @import

در این جلسه قصد داریم درباره مشکل رایج AvoidCSS @import صحبت کنیم و ببینیم چطور میتونیم این مشکل را در ساخت سایت پیدا و رفع کنیم و و چرا اصلا این موضوع برای افزایش سرعت سایت ما مشکل‌ساز است. با ما همراه باشید.

خلاصه‌ای از خطا

نام: Avoid CSS @import

نوع: CSS
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: ۹۷%

Avoid CSS @import چیست و چگونه کار میکند؟

import-css

این متد یک فایل css را در درون یک فایل css دیگر وارد میکند یا به عبارتی فراخوانی میکند، خیلی وقت‌ها برنامه‌نویس‌ها به اشتباه میان فایل استایل دهی اصلی را در HTML فراخوانی می‌کند و بقیه فایل‌های استایل‌دهی را با دستور زیر داخل فایل استایل‌دهی اصلی صدا می‌زنند.

چرا نباید از @import در CSS برای فراخوانی فایل‌ها استفاده کنیم؟

دلایل زیادی این موضوع داره که یکی از آن‌ها لود موازی است، در پروژه‌های بزرگ که از فایل‌های استایل‌دهی زیادی استفاده می‌کنند و لازم است که در جاهای مختلف فایل‌های CSS رافراخوانی کنند و اگر از @import برای فراخوانی فایل‌های css استفاده کنیم فایل‌ها به شکل پشت سر هم لود می‌شوند یعنی اگر ما دو بار از این دستور برای فراخوانی فایل‌های استایل‌دهی استفاده کنیم فایل دوم لود نمی‌شود تا زمانی که فایل اول کامل لود شود و این موضوع می‌تواند مشکلاتی را به دلیل طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی، قیمت طراحی سایت) در زمان بارگزاری و کاهش بالا رفتن سرعت سایت به موجود اورد و باعث می‌شود صفحه ما کندتر لود بشود درواقع با این روش لود موازی را از دست می‌دهیم. و از طرف دیگر استفاده از این دستور ذکر شده از نظر بهینه سازیو سئو خطا است و موتورهای جستجو مانند گوگل و سایر موتورهای جستجو نمره منفی به سئو داخلی سایت می‌دهند.

جایگزین مناسب CSS @import

با ابزارهای آنلاین می‌توان به راحتی فایل‌هایی که به شکل @import فراخوانی شده‌اند را پیدا کرد و یکی از بهترین ابزارهای آنلاین سایت GTmetrix است و بعد از زدن آدرس سایت در بخش مربوط به Avoid CSS @import خطاها را پیدا کنید و از جایگزین‌های بهتر همانند دستور زیر استفاده کنید و در بخش head سایت فراخوانی کنید و یا اینکه اگه امکانش بود با فایل‌های CSS دیگر ادغام کنید. در آینده نحوه ادغام صحیح فایل‌های CSS را در دوره GTmetrix اشاره خواهیم کرد.

رفع خطای Avoid bad requests

در این جلسه قصد داریم درباره مشکل رایجAvoid bad requests صحبت کنیم و ببینیم چطور میتونیم این مشکل را درساخت سایت پیدا و رفع کنیم و علت اصلی به وجود اومدن آن چیه تا باعث کاهش بهینه سازی سایت ما نشه. با ما همراه باشید.

خلاصه‌ای از خطا

نام: Avoid bad requests

نوع: محتوا
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: ۹۷%

Avoid bad requests چیست؟

خیلی وقت‌ها فایل‌های HTML و CSS شما یک درخواستی را سمت سرور دارن مثلا برای لود یک عکس یا فایل HTMLدیگه‌ای که وجود نداره، در اینجا چه اتفاقی می‌افتد؟ باعث می‌شود مرورگر و سرور به دور از هدف فعالیت انجام بدهند و سرور زمان بیشتری برای گشتن پاسخ مرورگر صرف کند چون دنبال چیزی می‌گردند که وجود ندارد. همانند مکالمه زیر می‌توان تشبیه کرد:

مرورگر: من به این عکس نیاز دارم
سرور: من چنین عکسی رو ندارم
مرورگر: پس چرا در سند HTML چنین عکسی رو صدا کردن؟
سرور: خب ندارم من خیلی گشتم ولی پیدا نکردم

bad-requests

پیغام خطای 404

همه ما با خطای 404 تا به حال روبه‌رو شده‌ایم و وقتی به این خطا برمیخوریم که فایلی وجود نداشته باشد، حال وقتی bad requests به وجود میاد که کاربر با خطای 404 یا پیدا نشدن صفحه‌ای روبه‌رو بشود، خطای 404 یک پاسخ استاندارد HTTPاست که نشان می‌دهد کاربر توانایی برقراری با سرور را دارد اما سرور نمی‌تواند درخواست گرفته شده از سمت کاربر را پیدا کند.
در این حالت سرور صفحه خطایی با عنوان “404 Not Found” تولید می‌کند وقتی کاربر به دنبال لینک شکسته شده یا لینک مرده است.

 خطای Avoid bad requests چگونه پیدا کنیم؟

بسیاری از اوقات خطاهای bad requests بسیار آشکار هستند مانند زمانی که یک تصویر قرار هست در جایی باشد ولی نیست، و نبودن یک تصویر مثلا در بکگراند (background) بسیار آشکار و معلوم است.
خیلی وقت‌ها هم ممکن است از خطای bad requests هیچ نشانه‌هایی نمایان نشود، پس همیشه سعی داشته باشید از لود شدن و فراخوانی فایل‌هایی که لازم نیست در آن صفحات لود شوند اجتناب کنید، منظورم از فایل‌ها همان عکس‌هایی که مورد استفاده قرار نمی‌گیرند یا فایل‌های CSS و JS که لازم به لود آنها نیست، این امر کمک بسیاری به طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی) شما در بالا بردن هر چه سریع‌تر پاسخ از سمت سرور می‌کند و باعث می‌شود با این خطا کمتر روبه‌رو شوید و نتیجه آن افزایش سرعت سایت وردپرس یا هر CMS دیگری و نیز بهبود سئو سایت خواهد بود.
با استفاده از ابزارهای page speed tool همانند سایت جی تی متریکس، سایت pingdom و webpagetest شما می‌توانید صفحات مورد نظر خود را بررسی کنید و بهترین راه و مطمئن‌ترین ابزاری است که میتوان برای پیدا کردن این خطاها استفاده کرد ولی در کل میتوان از ابزار Inspect در مرورگرها هم استفاده کرد به این منظور اول باید صفحه‌ای که قصد دارید خطاهای آن را جویا شوید رفته و سپس کلیک راست کرده و گزینه Inspect  را انتخاب کنید، در قسمت Console شما میتوانید خطاهای موجود را با رنگ قرمز مشاهده نمایید.

چگونه مشکل Avoid bad requests را رفع کنیم؟

گاهی رفع خطاهای bad requests بسیار راحت‌تر از پیدا کردن ‌انهاست. اگر شما با یک یا چند خطای bad requests روبه‌رو شدید کافیست آن خط کدی که در حال فراخوانی یک فایل (فایلی که سمت سرور وجود ندارد) است را حذف کنید یا یک جایگزین مناسب برای آن فایل ایجاد کنید، مثلا اگر صفحه شما یک عکسی را فراخوانی می‌کند یا به اصطلاح آن را صدا می‌زند، اما عکس وجود ندارد، کافیست آدرس “src” که یکی از اتریبیوت‌های img است را تغییر داده و آدرس یک عکس دیگر را بدهید یا کلا کدهای فراخوانی آن عکس را حذف کنید تا مشکل درخواست بد به وجود نیاید.

روش اشتباه برای حل خطا Avoid bad requests

گاهی در زمان حل این مشکل ممکن است فکر ریدایرکت کردن را داشته باشید، به شکل کلی این روش برای رفع خطا پیشنهاد نمی‌شود چرا که بیشتر صورت مسئله را پاک می‌کند، در درجه اول بهتر است آدرسی که حاوی خطا bad requests هست را حذف کنید و یا جایگزین آدرس صحیح کنید، اگر به عنوان مثال دانش برنامه نویسی نداشتید و یا مشکلاتی وجود داشت اخرین راه ریدایرکت کردن آدرس آن درخواست بد به یک آدرس صحیح است.

پس به شکل خلاصه برای رفع مشکل bad requests از لینک‌های شکسته، لینک‌های مرده و همچنین خطاهای 404 و 410  و درخواست‌های بی‌فایده جلوگیری کنید تا باعث افزایش سرعت لود سایت شما شود .

رفع خطای Avoid a character set in the meta tag در GTmetrix

در این مقاله ما درباره ارور Avoid a character set in the meta tag صحبت خواهیم کرد و رفع این ارور باعث می‌شود ارور دیگری به نام Specify a character set early هم رفع شود.

خلاصه‌ای از خطا

نام: Avoid a character set in the meta tag

نوع: محتوا
اولویت: کم
میزان سختی: راحت
میانگین امتیاز: ۹۹%

avoid-a-character-set-in-the-meta-tag

خطا Avoid a character set in the meta tag

character set از جمله استانداردهای بین‌المللی که کامل‌تر از بقیه استانداردهای موجود به رفع نیازهای مربوط به تبادل اطلاعات چندزبانه پرداخته‌ است، این character setها از قبل تعریف شده هستند و وجود آنها در صفحات تعیین کننده این است که محتویات سایت چگونه به کاربران نمایش داده شود. بسته به اینکه مقدار character set چه چیزی باشد مرورگر محتویات سایت شما را به کاربران نشان می‌دهد. پراستفاده‌ترین مقدار این متاتگ UTF-8 است و البته مقادیر دیگری همانندASCII هم موجود است. متاتگ character set تقریبا همانند کد زیر است.

این خطا به معنی عدم تعیین نوع کاراکتر نیست، متاسفانه یک وب سایت ایرانی به اشتباه مقاله‌ای را انتشار می‌دهد و بقیه دوستان هم در بحث کپی کردن حرفه‌ای هستند و نتیجه این می‌شود که وقتی رفع ارور Avoid a character set in the meta tag را در گوگل سرچ می‌کنیم از ۱۰طراحی سایت (طراحی سایت شرکتی،طراحی سایت فروشگاهی، قیمت طراحی سایت) موجود در صفحه اول ۹ تا به اشتباه نوشته اند. حتی اگر دانش کافی نداشته باشیم ولی کمی در ترجمه زبان انگلیسی کنجکاو باشیم در می‌یابیم که Avoid به معنای اجتناب است و Gtmetrix می‌گوید از متاتگ character set اجتناب کن و استفاده نکن ولی سایت‌های ایرانی نوشته‌اند این خطا به معنی عدم تعیین character set در صفحات است و اگر استفاده کنید این خطا رفع می‌شود

بررسی قسمت‌های مختلف سایت GTmetrix

وارد سایت جی تی متریکس شوید و آدرس سایت خود یا یک سایت دیگر را وارد کنید تا به بررسی ابزارهای بهینه سازی سئو سایت در جی تی متریکسبپردازیم. ما در سایت جی تی متریکس طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی،قیمت طراحی سایت) سئوراز را وارد کرده و نتایج بررسی شده در آن سایت را در شکل زیر اورده‌ایم.

قسمت-های-مختلف-سایت-جی تی متریکس

ما با بهینه سازی اصولی توانسته‌ایم رتبه A در نتایج سایت GTmetrix را کسب کنیم هر چند بهینه سازی و افزایش سرعت لود سایت فقط منوط به فاکتورهای بالا نیست و گاهی که با رعایت تمام فاکتورهای سایت جی تی متریکس، لود سایت و افزایش آن نه تنها بهتر نشده بلکه بدتر هم شده، رعایت فاکتورهای بالا جی تی متریکس به شرایط سایت و سیاست‌های آن بستگی دارد و باید فاکتورهای دیگر که در بالا نادیده گرفته شده است را هم بررسی و آنالیز کرد. سایت سئوراز امکانی را برای کاربران خود ایجاد کرده است که میتوانند در صفحه افزایش سرعت سایت درخواست خود را دهند.

تشریح قسمت‌های مختلف سایت GTmetrix

در قسمت Performance Scores آدرس سایت آنالیز شده، تاریخ آنالیز سایت و مکان سرور آنالیزکننده، و همچنین در قسمت Using نوع مرورگری که با آن سایت شما آنالیز شده و رتبه سایت شما درج شده است.

PageSpeed Score

در این قسمت به فاکتورهایی که گوگل برای بهینه سازی لود یک سایت مدنظر دارد را سایت GTmetrix بررسی میکند و سایت سئوراز امتیاز 96 از 100 و درجه A را گرفته است. و همینطور میانگین کلی Pagespeed سایت‌ها 70 درصد است.

YSlow Score

در این قسمت به فاکتورهایی که یاهو برای بهینه سازی لود یک سایت مدنظر دارد را سایت GTmetrix بررسی میکند و سایت سئوراز امتیاز 94 از 100 و درجه A را گرفته است.. YSlow ابزار و استانداردهای یاهو میباشد و میانگین کلی YSlow سایت‌ها 68 درصد است. البته باید خاطر نشان کرد که ممکن است در آینده نزدیک این قسمت از سایت GTmetrix حذف شود چرا که دیگر سیاست‌های یاهو زیر تغییر کرده است.

Fully Loaded Time

زمان بارگزاری سایت را بر حسب ثانیه نشان می‌دهد و میانگین سایت‌هایی که در جی تی متریکس مورد بررسی قرار گرفته‌اند 8.3 ثانیه بوده است و سایت میزفا با آمار فوق العاده خود فقط در زمان 2.9 ثانیه زیر لود کامل میشود.

Total Page Size

حجم یک صفحه یا سایتی که جی تی متریکس مورد بررسی قرار داده و میانگین کلی سایت‌های مورد بررسی قرار گرفته 2.56MB است و سایت سئوراز فقط 629KB حجم دارد و تقریبا 5 برابر کمتر از میانگین کل.

Requests

تعداد درخواست‌هایی که به سرور برای بارگزاری قسمت‌های گوناگون سایت ارسال میشود شامل عکس‌ها فایلهای css و یا js . و میانگین کلی آن 86 درخواست است و سایت سئوراز فقط با 27 درخواست کل صفحه را لود میکند. توجه داشته باشید که هر چه تعداد درخواست‌های رد و بدل شده بین سرور و مرورگر کمتر باشه هم فشار کمتری به سرور وارد می‌شود و هم سرعت سایت بالاتر می‌رود.

PageSpeed

اطلاعات بدست اومده از بررسی سایت با الگوریتم های گوگل را با جزئیات بیشتر به همراه اخطارها نشان می‌دهد.

YSlow

اطلاعات بدست اومده از بررسی سایت با الگوریتم های یاهو را با جزئیات بیشتر به همراه اخطارها نشان می‌دهد.

Waterfall

تو این بخش با استفاده از نمودار زمان بارگزاری هر بخش رو نشان می‌دهد. و میتوان اطلاعات مفیدی را از نحوه بارگزاری سایت در این بخش گردآوری کرد. waterfall با تجزیه و تحلیل آبشاری در ابزارهای مختلف دیگر هم هست، مثلا در گوگل کروم هم چنین ابزار سئو قرار گرفته است که بسیار می‌تواند به شما در بهینه سازی سرعت کمک کند، در همین جهت پیشنهاد می‌شود حتما مقاله تجزیه و تحلیل سرعت سایت با ابزار Devtools گوگل کروم را مطالعه نمایید.

Timings

در این پنل که جدیدا اضافه شده زمان onload را نشان میدهد، توجه داشته باشید که onload به بارگزاری اولیه سایت گفته میشود و Fully load به بارگزاری کامل یک وب سایت گویند. و همچنین مقدار زمان اولین درخواست انجام شده (TTFB) را نشان می‌دهد.

Video

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

History

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

معرفی سایت GTmetrix و اهمیت بالا بودن سرعت سایت

در این مقاله قرار است ابزار بی‌نظیر جی تی متریکس GTMetrix را معرفی کنیم. بعد از معرفی سایت GTMetrix.com و گفتن یک سری از ویژگی‌های عالی این ابزار آنلاین سرعت سایت، به مبحث اهمیت بهبود سرعت وسئو سایت می‌پردازیم که چرا باید به افزایش سرعت سایتمان اهمیت بدهیم و نقش سایت جی تی متریکس در کجای این ماجرا قرار دارد.

آشنایی با سایت جی تی متریکس

مقدمه – ابزارهای آنلاین

طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) های مختلف و ابزارهای آنلاین در زمینه های طراحی سایت و سئو و مواردی از این قبیل، برای هر مدیر وب سایت و طراح سایت می‌تواند مفید باشد. بررسی و استفاده از ابزارهای آنلاین و خدمات و مطالب این سایت‌های خدماتی، طراحان سایت و مدیران وب سایت‌ها را با نوآوری‌ها، مقاله‌ها و ایده‌های نو همسو می‌کند و کمک به بهینه سازی سایت و همچین بهبود عملکرد سایت میشود. بکارگیری ابزارهای آنلاین و سایت‌های خدماتی در مراحل مختلف طراحی‌ها چه طراحی سایت چه طراحی‌های دیگر آنلاین و همینطور راه اندازی و مدیریت و پشتیبانی وب سایت در موفق بودن یک سایت چه در حوزه طراحی و گرافیک ، چه در حوزه فنی و پشتیبانی می تواند موثر باشد.

معرفی سایت GTmetrix.com

جی تی متریکس GTmetrix چیست
سایت GTmetrix یکی از ابزارهای آنلاین قوی و پرطرفدار است مخصوصا در ایران طرفداران زیادی به این سایت سر میزنند و وب سایت خودشان را مورد ارزیابی قرار میدهند، و جالب آن است که بدانید بیشترین ترافیک سایت جی تی متریکس از سمت ایران است و کاربران ایرانی بیشتر از هر کاربران دیگری وارد این سایت میشوند، GTmetrix یک سایت کارآمد جهت تست و آنالیز سرعت بارگذاری وب سایت است که به بررسی لودینگ و پارامترهای مختلف که در سرعت بارگذاری وبسایت تاثیرگذار هستند، می پردازد. و سعی دارد با نشان دادن فاکتورهای لازم باعث افزایش سرعت سایت شما شود. قصد داریم دوره کامل و جامعی را درباره معرفی سایت GTmetrix و نحوه بهینه سازی اصولی سایت توسط ابزار جی تی متریکس را بررسی و آنالیز کنیم. چرا که درطراحی سایت‌های ایرانی هیچ یک به بررسی کامل و رفع خطاهای موجود در سایت جی تی متریکس به شکل کامل نپرداخته اند،  پس با آموزش افزایش سرعت سایت با ابزار جی تی متریکس همراه باشید