امروز با ما ملاقات کنید تا در مورد مسائل عملی صحبت کنیم. بله، ما واقعاً تصمیم گرفتیم به شما در انجام برخی از کارهای خانه کمک کنیم. یا مثلا کار سایت. احتمالاً موافقید که هیچ یک از ما نمی‌خواهیم با یک وب‌سایت دست‌زدن برخورد کنیم. ما ترجیح می‌دهیم یک نرم‌افزار بدون مشکل با سرعت بارگذاری صفحه و قابلیت ناوبری مناسب داشته باشیم. چرا ما به عنوان روح هایی که تقریباً در میانه قرن بیست و یکم زندگی می کنند، نخواهیم بود؟ پس در مورد وب سایت شما چطور؟ به خصوص با فایل‌های CSS، HTML و JavaScript (JS) خود را چگونه نگه می‌دارید؟ آیا قبلاً هر فرمولی را امتحان کرده اید که آنها را قابل کنترل تر نشان دهد؟ اگر هنوز نیاز دارید، مقاله ما اینجا برای شماست. چگونه فایل های JS را کوچک کنیم؟ چگونه فایل های CSS و HTML وب سایت خود را به حداقل برسانیم؟
ما به شما نشان خواهیم داد که چگونه فایل های JS، CSS و HTML را کوچک کنید. به عبارت دیگر، نکاتی را مرور می کنیم که عناصر اضافی را از وب سایت شما حذف می کند.
Minifying چیست؟
حتی اگر این اصطلاح کاملاً خود توضیحی به نظر می رسد، بیایید محتاط باشیم و آن را تعریف کنیم. وقتی چیزی مانند “minify JS” می گوییم، به کوچک سازی یا کاهش کاراکترهای بی فایده در کد منبع جاوا اسکریپت اشاره می کنیم. چه نوع شخصیت هایی؟ خب، ممکن است این موارد برای ما آشنا و حتی «تزیینی» باشند: شکسته‌های خطوط و فاصله‌های سفید از معمول‌ترین نمونه‌ها هستند. اما چرا می خواهیم چنین عناصر پیش پا افتاده ای را حذف کنیم؟ به این دلیل که آنها چیزی جز اتلاف وقت برای مرورگر وب شما نیستند. در واقع، آنها سرعت خواندن داده های آن را کاهش می دهند. از این رو این باید مکانی را که ذکر کردیم تمیز کند.
خوب، از نظر بصری به آن فکر کنید. بدون کوچک سازی، کدهای شما چندین خط را اشغال می کنند که می توانند صفحات و صفحات را پر کنند. اما با کوچک‌سازی، می‌توانید اطلاعات ضروری را حتی در یک خط هم مناسب کنید. اگر بخواهیم بگوییم، «بلا بله دیگر خبری نیست». در واقع موضوع ساده کیفیت بر کمیت است. برای اینکه وب سایت خود را بهتر کار کند، نیازی به شارژ اضافی ندارید. در واقع کاملا برعکس است.
در مجموع، Minification فرآیندی است که ابتدا اجزای متنی وب سایت شما را بررسی می کند. هنگامی که موارد اضافی را شناسایی می کند، به نوعی همه آن را به شیوه ای فیلتر شده و ساده تر بازنویسی می کند.
بنابراین چگونه فایل های خود را کوچک کنیم؟
قبل از شروع، اجازه دهید بگوییم که ما عمدتاً روی گزینه های وردپرس تمرکز خواهیم کرد. اینجا بمبی نیست WP همچنان پر استفاده ترین پلتفرم ایجاد وب سایت است و شرط می بندم که بسیاری از شما از آن استفاده می کنید. بنابراین ارائه مثال‌هایی از طریق یک سناریوی واقعی و واقعی منطقی است، اینطور نیست؟
شما می توانید فرآیندهای کوچک سازی را عمدتاً از طریق دو روش انجام دهید: دستی یا با یک افزونه. بیایید ببینیم اینها با جزئیات بیشتر در مورد چیست.
کوچک سازی دستی
اصطلاح “دستی” را خیلی تحت اللفظی نگیرید. لزوماً به این معنی نیست که تمام وزن روی شانه های شما خواهد بود. مطمئن باش ابزارهایی وجود دارند که می توانند شما را به طور موثر همراهی کنند. استفاده از GTMetrix یکی از راه‌هایی است که می‌توان به آن دست یافت.
- آدرس وب سایت خود را وارد کنید و از قبل آماده کنید! لیستی از فایل های خود را دریافت خواهید کرد که بهتر است کوچک شوند.
- لیست را بررسی کنید. شما سه بخش را مشاهده خواهید کرد که به ترتیب “minify CSS” (یعنی فایل های CSS نیاز به حداقل سازی دارند)، “minify JS” و “minify HTML” را مشاهده خواهید کرد. هر کدام منابع مرتبطی را که نیاز به کاهش اندازه و تخمین کاهش (به صورت درصد بیان می شود) نشان می دهد.
- سپس روی «مشاهده نسخه بهینه شده» کلیک کنید و شروع به دانلود نسخه های کوچک شده کنید. در اینجا مراقب باشید: این قسمت دستی کار است و نباید از آن بگذرید.
- آخرین اما نه کم‌اهمیت، شما باید فایل‌های اصلی، یعنی فایل‌های موجود در فهرست وب خود را بازنویسی کنید. در واقع، شما نسخه های کوچک شده جدید را به آنها اضافه خواهید کرد. این کار را می توان از طریق یک کلاینت FTP یا یک مدیر فایل در hPanel انجام داد.
جایگزین دستی دیگر استفاده از ابزارهایی مانند Minify (موجود در minifier.org) است. به عنوان مثال، یکی از خدمات JS minify و CSS minify را پیشنهاد می کند. روش معمول در اینجا به شرح زیر است:
- با دانلود فایل های مورد نظر از وب سایت خود شروع کنید. فراموش نکنید که نسخه های آنها را به عنوان پشتیبان ذخیره کنید.
- سپس محتوای فایل را در قسمت اختصاصی کپی و پیست کنید.
- در نهایت، باید تغییرات را تأیید کنید: کد را در فایل دانلود شده ذخیره کنید و آن را در فهرست وب سایت خود آپلود کنید.
اگر نمی خواهید وقت خود را با کدها بگذرانید چه؟ روش دوم زیر را بررسی کنید.
کوچک سازی با یک پلاگین
بنابراین در اینجا برای کسانی است که تمایل دارند فرآیندهای خودکار بیشتری را ترجیح دهند. وردپرس چندین افزونه را در اختیار شما قرار می دهد. چه به دنبال یک مینی‌فایر HTML یا یک مینی‌فایر CSS باشید، احتمالاً شیار خود را در آنجا پیدا خواهید کرد. نمونه ای از منوی آلاکارته می خواهید؟
وردپرس Super Minify
افزونه ای با استعدادهای فراوان. برای ترکیب، ذخیره سازی درون خطی یا کوچک سازی. این مانند یک افسون یا، به عبارت دقیق تر، به عنوان یک کمپرسور HTML، JS و CSS عمل می کند. بنابراین به طور طبیعی در مورد استفاده از کش مرورگر نیز همراه خوبی است.
بهینه سازی خودکار
در حال حاضر یک کلاسیک. این نه تنها فایل های JS، CSS و HTML را کوچک می کند. همچنین می‌تواند آنها را در حافظه پنهان کند و/یا آنها را با هم جمع کند. علاوه بر این، می‌تواند آنها را به گونه‌ای برنامه‌ریزی کند که در زمانی که می‌خواهید، به راحتی بارگیری شوند. فهمیدی. قطعاً ابزاری است که احتمالاً شما را به استادی در عملکرد وب سایت تبدیل می کند.
Merge + Minify + Refresh
یک فرمول تقریبا همه در یک، همانطور که با نام مشخص است. توجه داشته باشید که فقط برای CSS و JS کار می کند (نه HTML). همچنین امکان فشرده سازی gzip را فراهم می کند. کوچک سازی با ادغام فایل های CSS و JS در گروه ها از طریق WP-Cron انجام می شود. ممکن است بهبودها در مقایسه با سایر پلاگین ها چشمگیر نباشد. با این حال، این ابزار هنوز ارزش آزمایش را برای تنوع عملیاتی دارد که اجازه می دهد. در واقع، شما قادر خواهید بود چندین مرحله از فرآیند کوچک سازی را بدون تلاش زیاد پیگیری کنید.
وردپرس Minify بهتر است
یک شرط مطمئن در واقع، ما همیشه باید مطمئن شویم که کوچک‌سازی موضوع ما و سایر ویژگی‌های وب‌سایت‌هایمان را خراب نمی‌کند. به لطف این افزونه، دیگر علامت سوالی در این زمینه وجود ندارد. وب سایت شما “قابل تشخیص” باقی می ماند (به اصطلاح). علاوه بر این، این افزونه سازگاری چند سایت را همراه با یکپارچه سازی CDN تضمین می کند. زیرا چیزی که ما می خواهیم این نیست که فقط JS و فایل های دیگر را به خاطر آن کوچک کنیم. ما همچنین خواهان اثربخشی در هر جنبه دیگر از عملکرد سایت هستیم.
پستهای اخیر
راهنمای کدهای زمان پاسخگویی سرور
فرض کنید می خواهید یک جفت کفش ورزشی بخرید تا در حین قدم زدن در مرکز خرید از آن استفاده کنید. به جای مراجعه به یک فروشگاه فیزیکی، تصمیم به خرید کفش گرفتید…
همانطور که گفتیم این فقط یک نمونه بود. در آزمایش سایر افزونه های موجود تردید نکنید تا زمانی که پلاگینی را پیدا کنید که به نظر می رسد برای وب سایت شما سازگارتر است. همچنین، اگر برای شما پیچیده است، قبل از رفتن به هر چیز دیگری یاد بگیرید که CSS برای چه چیزی استفاده می شود و HTML چیست.
بنابراین آیا کوچک سازی تصمیم عاقلانه ای است؟
با قضاوت از آنچه در طول مقاله دیدیم، به نظر می رسد که اینطور باشد. وقتی فایل‌های JS، CSS و HTML را کوچک می‌کنید، آنها را از عناصر غیر ضروری و زائد نجات می‌دهید. این تأثیر مثبت غیرقابل انکاری بر زمان بارگیری/دانلود دارد. همین امر در مورد استفاده از پهنای باند نیز صدق می کند. فراموش نکنید که شما وب سایت خود را برای دیگران طراحی می کنید تا خودتان. بنابراین حتی اگر خودتان با کدهای پیچیده احساس راحتی می کنید، باید چیزهای ساده تری را به مخاطبان خود ارائه دهید. به خصوص امروزه، هیچکس زمان یا حوصله اضافی برای از دست دادن در وب سایت های کم سرعت ندارد. رقابت بسیار بزرگ است، بنابراین هر دستاورد از نظر بهینه سازی و عملکرد تقریبا مقدس است.
نتیجه؟ همین الان گاو نر را کنار شاخ بگیرید و این تغییر ساده و در عین حال ضروری را به سایت خود پیشنهاد دهید.
