آموزش رفع خطای Minify JavaScript and CSS

می‌دانستید که در زمینه سئو، افزایش اندک سرعت سایت می‌تواند برای شما به منزله پیمودن رهی صد ساله در یک گام باشد؟ میدانستید که با کاهش 1 ثانیه‌ای زمان بارگذاری سایت، 11% از بازدیدکنندگان سایتتان را از دست می‌دهید؟ راجع به تاثیری که افزایش سرعت بر بهبود سئو، متخصصان آنقدر  سخن‌ گفته‌اند که در اینجا دیگر به آن نمی‌پردازیم. برای اینکه خلاصه‌ای از این تاثیر را بدانید می‌توانید به مقاله تاثیر سرعت سایت بر سئو مراجعه بفرمایید. افزایش سرعت برای افراد تازه کار در بهینه سازی موتورهای جستجو، چندان کار راحتی نیست. خبر خوب آنکه، همه ما می‌توانیم راه‌های افزایش سرعت را با مطالعه و کسب تجربه به مرور آموزش ببینیم و رتبه وب سایت خود را در نتایج جستجوی گوگل بهبود ببخشیم. راه‌های زیادی برای افزایش سرعت وجود دارند که بطور مبسوط می‌توانید در مقاله تکنیک های افزایش سرعت سایت مطالعه کنید. یکی از آنها MINIFY کردن کدهای نوشته شده برای یک وب سایت است. از خطاهایی که در GTmetrix برای متخصصان آشنا به نظر می‌رسد، خطای Minify JavaScript and CSS  است. رفع این خطا می‌تواند سرعت را به میزان چشمگیری افزایش بدهد

شناخت و رفع خطای Minify JavaScript and CSS

ای نگاه، در ادامه ابتدا راجع به مفهوم Minify کردن یک فایل توضیح خواهد داد و پس از آن نحوه رفع خطای Minify JavaScript and CSS را یاد خواهیم گرفت.

Minify کردن چیست؟

معنی لغوی Minify کردن، کوچک کردن و مختصر کردن است و در حوزه بهینه سازی موتورهای جستجو به معنای کاهش اندازه فایل‌های JavaScript، CCS و HTML یک سایت به کار می‌رود که باعث کاهش تعداد درخواست‌های HTTP می‌شود. چرا Minify کردن مهم است؟  به دلیل آنکه یکی از موثرترین و محبوب‌ترین راه‌ها برای کاهش اندازه صفحات مورد نظر شما در یک وب سایت و در نتیجه بهینه سازی موتورهای جستجو، Minify کردن است.

فایل‌های CSS، HTML و JavaScript شامل تعداد بسیار زیادی کد هستند که به دلیل آنکه توسط انسان‌ها نوشته می‌شوند، دارای فاصله‌های منطقی، تعویض خطوط و عوامل دیگری هستند که کار کدنویسی و خواندن آنها را برای مهندسان بعدی آسان می‌کند. اما کامپیوترها برای خواندن کدهای ذکر شده نیاز به المان‌هایی مانند موارد ذکر شده ندارند. Minify کردن فایل‌های یک وب سایت، المان‌های غیر ضروری را از این فایل‌ها حذف می‌کند. از المان‌هایی که شما با Minify کردن قادر خواهید بود با حذف آنها به میزان قابل توجهی سایز وب سایت خود را کاهش دهید، می‌توان به موارد زیر اشاره کرد:

• فاصله (space) های غیرضروری در فایل‌ها
• Line-break های غیرضروری در فایل‌ها
• کدهای غیرضروری نوشته شده در فایل‌ها

?

حالا که دریافتیم که با Minify کردن فایل‌های یک وب سایت تا چه میزان می‌توانیم سرعت بارگذاری آن را بالا ببریم، خطای Minify JavaScript and CSS  در GTmetrix چندان نیز خطای سخت‌گیرانه‌ای به حساب نمی‌آید. علاوه بر افزایش سرعت سایت، Minify کردن حالت مبهمی به فایل‌های کدنویسی شما می‌بخشد که فهم آنها را برای کاربران معمولی دشوار می‌کند. باید توجه داشته باشید که Miniy کردن فایل‌ها به هیچ وجه راه مناسبی برای امنیت بخشیدن به آنها نیست.

برای آغاز راه رفع خطای Minify JavaScript and CSS، باید ابتدا وضعیت فعلی فایل‌های موجود روی وب سایت فعلی خودتان را معلوم کنید. به کمک یکی از ابزارهای تحلیل سایت شما قادر خواهید بود تحلیل مفیدی از وضع فعلی صفحه سایتتان داشته باشید. مانند ابزارهای معرفی شده برای کاهش درخواست‌های HTTP ها در اینجا نیز Google PageSpeed Insight، GTmetrix و Pingdom به عنوان بهترین ابزارها برای ارزیابی وضعیت سایت پیشنهاد می‌شود.

و اما...

ابزارهای Minify کردن در وردپرس

در اینجا نتایج یک تحقیق را روی پلاگین‌های مختلف مناسب برای Minify کردن فایل‌ها در سایت‌های وردپرسی می‌آوریم. در این تحقیق یک سایت نوشته شده با استفاده از وردپرس مورد تحقیق و بررسی قرار گرفته است. صفحه اصلی سایت مورد بررسی، پیش از اعمال Minify، دارای حجمی برابر با 311.6 کیلو بایت و زمان بارگذاری 0.61 ثانیه بوده است. سپس Minify کردن آن توسط سه پلاگین Autoptimize، Fast Velocity Minify و  Merge + Minify + Refresh مقایسه می‌شوند. افزونه‌های نام برده کاربرد بسیاری برای رفع خطای Minify JavaScript and CSS دارند و بصورت رایگان می‌توانید آنها را نصب کنید.

1.تحلیل خطای Minify JavaScript and CSS با استفاده از Autoptimizer

پلاگین Autoptimizer، از افزونه‌های محبوب برای Minify کردن در سایت‌های نوشته شده با وردپرس است. علاوه بر کمک به رفع خطای Minify JavaScript and CSS، با استفاده از این افزونه شما می‌توانید کدهای خود را دسته بندی کنید، آنها را کش کنید و حتی به منظور بهبود عملکرد وب سایتتان، تنظیمات را طوری انجام دهید که آنها با تاخیر بارگذاری شوند. کار کردن با این پلاگین نیز ساده است. آن را نصب و Activate کنید. به کشوی setting بروید. در آنجا می‌توانید هر کدام از فایل‌های HTML، JavaScript یا CSS را بهینه (Optimize) کنید.

تست پژوهش انجام گرفته، نشان داد که Minify کردن فایل‌ها با استفاده پلاگین Autoptimize، اندازه صفحه اصلی سایت را به حجمی برابر با 297.8 کیلو بایت رساند و زمان بارگذاری را به 0.85 ثانیه کاهش داد. شاید این مقدار کم به نظر برسد اما تاثیر قابل توجهی بر سرعت سایت خواهد داشت.

?

2. Fast Velocity Minify

پلاگین Fast Velocity Minify یکی از محبوب‌ترین افزونه‌ها برای رفع خطای Minify JavaScript and CSS است. علاوه بر Minify کردن، با استفاده از این پلاگین، شما می‌توانید فایل‌های CSS و JavaScript خود را با هم ادغام کنید و از این طریق درخواست‌های HTTP را به میزان چشمگیری کاهش دهید. کاهش این درخواست ها تاثیری باورنکردنی بر سرعت سایت دارد. برای آنکه راجع به درخواست‌های HTTP و تاثیر کاهش آنها بدانید، می‌توانید مقاله تکنیک های کاهش درخواست های HTTP را مطالعه فرمایید. از دیگر کاربردهای این پلاگین می‌توان به امکان ایجاد کپی کش شده از فایل‌ها اشاره کرد. بر خلاف Autoptimize این پلاگین به طور خودکار فایل‌های HTML، JavaScript و CSS شما را Minify می‌کند. با این وجود، شما می‌توانید با رفتن به Setting، کشوی Fast Velocity Minify، قابلیت Minify کردن یک یا چند عدد از فایل‌ها را بطور دستی از کار بیندازید. بعلاوه پلاگین Fast Velocity Minify این قابلیت را به شما می‌دهد که برای یک فایل به خصوص از Minify شدن جلوگیری کنید.

آزمایش‌های این تحقیق روی این افزونه نشان داد که با استفاده از آن حجم Home page سایت مورد نظر از 311.5 کیلو بایت به 291.3 کیلو بایت کاهش پیدا کرد. همچنین زمان بارگذاری آن به 0.55 ثانیه رسید. همانطور که می‌بینید این مقدار نسبت به Autoptimize رکورد بهتری محسوب می‌شود.

?

3. آنالیز خطای Minify JavaScript and CSS با استفاده از Merge + Minify + Refresh

بسیاری از متخصصان سئو که در کار با GTmetrix، با خطای  Minify JavaScript and CSS سر و کله می‌زنند، با پلاگین  Merge + Minify + Refresh اشنا هستند. همانطور که از نام این افزونه برمی‌آید، با استفاده از آن شما می‌توانید فایل‌های CSS و JavaScript خود را ادغام کرده و Minify نمایید. همچنین قابلیت کش کردن فایل‌ها را نیز به مدیران سایت می‌دهند و از این طریق با حذف کردن زمان مورد نیاز برای بارگذری فایل‌های بارگذاری شده در دفعات قبل، به ظاهر شدن وب سایت در صفحه نمایش کاربران سرعت می‌بخشند. همچنین با اعمال تغییرات، این پلاگین‌ها همه چیز را به صورت اتوماتیک آپدیت خواهند کرد.

مانند افزونه Fast Velocity Minify، پلاگین  Merge + Minify + Refresh نیز به صورت خودکار Minify کردن فایل‌های CSS و JavaScript را فعال می‌کند. اما این افزونه قابلیت Minify کردن فایل‌های HTML را ندارد. همچنین، شما قادر خواهید بود برخی از فایل‌ها را از فرآیند Minification خارج کنید و برای کسب بهترین نتیجه Gzip encoding را فعال کنید.

با تست کردن این افزونه برای افزایش سرعت سایت، حجم صفحه اصلی، به 300.3 کیلو بایت و زمان بارگذاری به 0.58 ثانیه رسید. بنابراین، در مجموع عملکرد این پلاگین نسبت به دو پلاگین قبلی ضعیف‌تر ارزیابی می‌شود.

ای نگاه امیدوار است توانسته باشد فرآیند Minify کردن و افزونه‌های مناسب برای آن را معرفی کرده باشد.