تولید محتوا مبتنی بر اصول سئو و کپی‌رایتینگ

minify resources چیست؟ حذف خطا minify javascript css

ما در این مقاله به شما اموزش میدهیم که minify resources چیست؟ حذف خطا minify javascript css چگونه صورت میپذیرد.

Minify Resources يا کاهش منابع HTML ،CSS و جاوا اسکريپت، فرآيند حذف کاراکترهاي غيرضروري (مثل Whitespaceها، کامنت ها، کدهاي بي استفاده و غيره) از داخل فايل هاي HTML و CSS و جاوا اسکريپت بدون تاثير روي نحوه ي پردازش آن ها توسط مرورگر مي باشد.

اين کار کاهش سايز و در نتيجه بارگزاري سريع تر فايل ها را به دنبال دارد. همچنين بارگزاري سريع تر باعث افزايش سرعت سايت، رضايت بيشتر کاربران و در نهايت بهبود رتبه در صفحه ي نتايج موتورهاي جستجو مي شود.

به عنوان مثال به کد زير دقت کنيد:

نمونه اي از کد html

همان طور که مي بينيد کد بالا داراي کاراکترهاي غيرضروري مثل فاصله است که بعد از minification به صورت زير در مي آيد:

نمونه کد minify شده


تفاوت بين Minification و Compression

کاهش منابع يا minification و فشرده سازي يا Compression فايل ها، با اينکه هر دو جهت بالابردن و افزايش سرعت سايت به کار گرفته مي شوند ولي دو موضوع کاملا متفاوت هستند.

فشرده سازي روشي براي کاهش حجم فايل قبل از ارسال از طرف سرور به سمت مرورگر است درحالي که minification فرآيند حذف کاراکترهاي غيرضروري بنابراين از ساخت فايل هاي HTML و CSS و جاوا اسکريپت توسط برنامه نويس مي باشد. براي اطلاعات بيشتر در مورد فشرده سازي فايل ها مقاله ي «افزايش سرعت سايت با Gzip Compression» را مطالعه کنيد.


روش هاي انجام Minification

گوگل ابزارهاي زير را براي فايل هاي HTML ،CSS و جاوا اسکريپت پيشنهاد داده است:

  • براي minify HTML، از HTMLMinifier استفاده کنيد.
  • براي minify CSS، از CSSNano و csso استفاده کنيد.
  • براي minify JavaScript، از UglifyJS استفاده کنيد. البته ابزار Closure Compiler نيز خيلي موثر است که در ادامه آن را به صورت کامل توضيح داده ام.


Closure Compiler چيست؟

Closure Compiler ابزاري براي دانلود و اجراي سريع تر کدهاي جاوا اسکريپت و همچنين کامپايلري واقعي براي آن مي باشد که به جاي کامپايل از source language به کد ماشين (machine code)، کدها را از جاوا اسکريپت به کدهاي جاوا اسکريپت بهتري کامپايل مي کند. اين کامپايلر جاوا اسکريپت را تجزيه و تحليل، کدهاي مرده را حذف و در نهايت هر آن چه که به دست آمده را minimize مي کند.


مزاياي استفاده از Closure Compiler 

  • Closure Compiler حجم فايل هاي جاوا اسکريپت را کاهش داده تا سريع تر بارگزاري شوند و باعث استفاده ي کمتر از پهناي باند مي شود.
  • Closure Compiler کمک مي کند تا کد جاوا اسکريپت با باگ کمتر و نگه داري آسان تر ايجاد شود.


چگونگی
استفاده از Closure Compiler 

ساده ترين راه براي آشنا شدن با سرويس Closure Compiler، بهينه سازي کدي ساده در اين ابزار است. براي آغاز لينک closure-compiler.appspot.com را در مرورگر خود باز کنيد. در اين صفحه تابع ساده ي Hello Word را مي بينيد:

تابع Hello Word در Closure Compiler

در سمت راست صفحه، روي دکمه ي “Compile” کليک نماييد تا نتايج را ببينيد:

کد کامپايل شده در Closure Compiler

چيزي که بعد از زدن اين دکمه مي بينيد، نسخه ي بهينه شده ي کد اصلي است که البته دقيقا مثل همان عمل مي کند. سرويس Closure Compiler کد را از ۹۲ بايت به ۵۵ بايت به وسيله ي پاک کردن کامنت ها و فضاهاي خالي و تغيير نام سمبل هاي اصلي، کاهش داد.

براي راحتي بيشتر، سرويس Closure Compiler فايل خروجي default.js را براي يک ساعت پشتيباني مي کند. چنانچه هر گونه تغييري در کد اوليه ايجاد نماييد و آن را در همان ساعت دوباره کامپايل کنيد، سرويس Closure Compiler فايل خروجي را با نتايج جديد دوباره تغيير مي دهد.

نکته: براي جلوگيري از سواستفاده، Closure Compiler تعداد کامپايل هاي متوالي را که مي توانيد اجرا کنيد، محدود مي کند. چنانچه پيغام “Too many compiles performed recently Try again later” (اخيرا کامپايل زيادي انجام شده، بعدا دوباره امتحان کنيد) را ديديد، به اين معني است که بيشتر از محدوديت در نظر گرفته شده از اين ابزار استفاده کرده ايد.


بهينه سازي فايل جاوا اسکريپت

مي توانيد محتويات يک يا چند فايل جاوا اسکريپت را با استفاده از Closure Compiler UI بهينه سازي کنيد. براي اين کار مراحل زير را دنبال کنيد:

  •  آدرس فايل خود را در قسمت URL صفحه کپي کنيد.
  •  روي Add کليک کنيد. (اگر بيش از يک فايل براي اضافه کردن داشتيد، مراحل ۱ و ۲ را تکرار نماييد تا زماني که همه ي فايل هايتان اضافه شود. همچنين مي توانيد اسم فايل ها را به طور مستقيم در قسمت متن تايپ کنيد.)
  • اگر مي خواهيد سرويس Closure Compiler فايل هاي فشرده ارائه دهد، يک نام براي فايل خروجي با استفاده از پارامتر output_file_name@ در بالاي فيلد ورودي انتخاب کنيد.توجه نماييد که پيش فرض براي نام فايل خروجي default.js است ولي بايد آن را به يک نام معنادار براي پروژه ي خود تغيير دهيد. همچنين به ياد داشته باشيد که سرويس Closure Compiler فايل خروجي را روي سرور خود براي مدت يک ساعت پشتيباني مي کند.
  • روي Compile کليک کنيد.

    بايد جاوا اسکريپت بهينه شده را در پنل سمت راست ببينيد، مانند زير:

نمايش مثالي در Closure Compiler

براي استفاده از کد بهينه شده، مي توانيد آن را cut کرده و در فايل source خود paste نماييد يا فايل را در دايرکتوري خود دانلود نماييد و يا به طور مستقيم در تگ اسکريپت (به مدت يک ساعت) به فايل لينک دهيد.

پلاگين هاي Minification براي وردپرس، دروپال و جوملا

پلاگين هاي minification متفاوتي براي سيستم هاي مديريت محتوا وجود دارند که با درنظر گرفتن نوع سيستم خود مي توانيد از آن ها استفاده کنيد.

به عنوان مثال براي وب سايت هاي وردپرسي مي توانيد Better WordPress Minify و Autoptimize، براي دروپال Minify module و براي جوملا JCH Optimize را به کار ببريد.

جمع بندي

ابزارهاي ديگري نيز در منابع مختلف معرفي شده اند که مي توانيد از آن ها استفاده کنيد. مانند:

  • csscompressor.net (اين امکان را به شما مي دهد تا سطح minificationاي که در نظر داريد را انتخاب کنيد) و cssminifier.com براي بهينه سازي CSS
  • jscompress.com و javascript-minifier.com براي بهينه سازي جاوا اسکريپت
  • htmlcompressor.com و minifycode.com براي بهينه سازي HTML

همان طور که گفتم استفاده از minification هم براي بازديدکننده و هم براي صاحب سايت مفيد است. بنابراين همين حالا يکي از ابزارهاي معرفي شده را انتخاب و آغاز به کار کنيد. البته چنانچه ابزار ديگري نيز مي شناسيد و از آن استفاده مي کنيد، با من در بخش نظرات به اشتراک بگذاريد.


منابع

developers.google

keycdn

برای دریافت جدیدترین به روز رسانی ها در موبایل خود مشترک ما شوید

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.