آموزش سئو Minify Html JavaScript and CSS

آخرین بروز رسانی: آذر ۱۸, ۱۳۹۴

آموزش سئو Minify Html JavaScript and CSS

به عمل حذف فاصله‌ها و کدهای اضافی که باعث سنگینی صفحات سایت می‌شود Minify گفته می‌شود، MiniFy را با فشرده‌سازی کدهای سایت اشتباه نگیرید. در این آموزش می‌خواهیم شما را با Minify کردن کدهای قالب سایت آشنا کنیم.

قابلیت Minify چیست؟

Minify کاری هست که یک بهینه‌ ساز وبسایت باید انجام دهد، با Minify می‌توان حجم قالب را کم کرد و سرعت لود سایت را چندین برابر کرد. تأثیر این عمل بخوبی در سایت‌های آنلالیز سئوی On Page نمایش داده می‌شود.

چگونه Minify را در وردپرس استفاده کنم؟

استفاده از Minify در وردپرس بسیار آسان است، هم می‌توانید قالب خود را Minify نمایید و یا می‌توانید با استفاده از پلاگین‌ها wp-Minify و یا wp super cache و یا دیگر پلاگین‌های cache وردپرس این
عملیات را انجام دهید.

ولی پیشنهاد می‌شود از پلاگین استفاده W3 Total Cache نمایید. برای راه اندازی minify با استفاده ازW3 Total Cache به منوی Minify در پلاگینW3 Total Cache بروید.

معرفی ابزار برای Minify کردن استاندارد کدها

سایت های زیادی وجود دارند که به صورت آنلاین این کار را برای شما انجام میدهند.

http://htmlcompressor.com/compressor
http
://tools.w3clubs.com/cssmin
http
://www.willpeavy.com/minifier
http
://www.minifyweb.com
http
://jscompress.com
http
://cssminifier.com
http
://refresh-sf.com/yui
https
://developers.google.com/speed/docs/insights/MinifyResources
http
://www.minifyjavascript.com

و …

استفاده از روش دستی

هدف اصلی من از ارسال این آموزش ، آموزش این بخش است.

۱ – html :

برای این که html سایت خودتون را minfy کنید ، ابتدا باید این کد را اولین خط فایل index.php قرار دهید.

<?php
function sanitize_output($buffer) {
$search
= array(
‘/>[^S ]+/s’,
‘/[^S ]+</s’,
‘/(s)+/s’
);
$replace
= array(
‘>’,
‘<‘,
‘۱’
);
if (preg_match(“/<html/i”,$buffer) == 1 && preg_match(“/</html>/i”,$buffer) == 1) {
$buffer
= preg_replace($search, $replace, $buffer);
}
return $buffer;
}
ob_start
(“sanitize_output”);
?>
این کد به شکل های مختلف در سایت ها موجود است ، بهترینش هست که من پیدا کردم ، به هر حال اگر درست کار نکرد ، میتوانید از یک کد دیگر استفاده کنید. فقط کافیه minfy html output را جستجو کنید.

بعد این کد هم آخرین خط فایل index.php قرار دهید :

<?php
ob_end_flush
();
?>

کد های سایت شما باید بین این دو کد قرار بگیرند. به همین راحتی

نمونه :

<?php
function sanitize_output($buffer) {
$search
= array(
‘/>[^S ]+/s’,
‘/[^S ]+</s’,
‘/(s)+/s’
);
$replace
= array(
‘>’,
‘<‘,
‘۱’
);
if (preg_match(“/<html/i”,$buffer) == 1 && preg_match(“/</html>/i”,$buffer) == 1) {
$buffer
= preg_replace($search, $replace, $buffer);
}
return $buffer;
}
ob_start
(“sanitize_output”);
?>
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>Test</title>
</head>
<body>
this is test text
</body>
</html>
<?php
ob_end_flush
();
?>

۲ – css , javascript :

برای minfy کردن فایل های css و javascript سایت خود ، ابتدا این اسکریپت را از یکی از لینک های زیر دانلود کنید.

https://code.google.com/p/minify
https
://github.com/mrclay/minify

از حالت فشرده خارج کنید و سپس فولدر min را در root سایت خود کپی کنید.

حالا ۲ روش برای minfy کردن وجود دارد :

۲-۱ – مستقیم :

در این روش شما آدرس فایل را مستقیم به اسکریپت ارسال میکند و آدرس فایل ها قابل دیدن است :

http://example.org/min/?f=js/quick-test.js
http
://example.org/min/?f=css/quick-test.css

با گذاشتن , بین فایل ها ، میتوانید چندین فایل را یکجا صدا بزنید. پیشنهادی

نمونه :

http://forum.wp-parsi.com/public/min/index.php?ipbv=fa11d69d698cbe0f3287c01a12de13fb&f=public/style_css/css_1/ipb_help.css,public/style_css/css_1/calendar_select.css,public/style_css/css_1/ipb_common.css,public/style_css/css_1/ipb_styles.css

 

نقل قول

این اسکریپت یک generator هم داره که میتونه آدرس فایل را خودکار براتون بسازه.
برای این کار وارد فولدر min شوید و فایل config.php را باز کنید.
مقدار $min_enableBuilder را برابر true قرار داده و سپس وارد آدرس زیر در مرورگر خود شوید :

پسورد در فایل کانفیگ موجود است.

بعد از انجام کار ، دوباره مقدار $min_enableBuilder را برابر false قرار دهید.

۲-۲ – غیر مستقیم : پیشنهادی

در این روش شما آدرس فایل را در یک آرایه به صورت گروه ذخیره میکنید و سپس فقط نام گروه را در آدرس وارد میکنید.

نمونه :

http://example.org/min/?g=css

برای این کار وارد فولدر min شده و سپس فایل groupsConfig.php را باز کنید.

۲ مثال به عنوان نمونه در این فایل وجود دارد ، میتوانید از حالت comment خارج کنید و استفاده کنید.

نمونه :

return array(
‘js’ => array(‘//js/file1.js’, ‘//js/file2.js’),
‘css’ => array(‘//css/file1.css’, ‘//css/file2.css’),
);

css و js که در این مثال نام برده شده اند ، همان نام گروه هستند که در آدرس فایل وارد میکنیم.

نحوه استفاده :

بعد از انجام مراحل ، کافیه که فقط فایل را در صفحه به راحتی و مثل همیشه صدا بزنید.

<link rel=“stylesheet” type=“text/css” href=“http://example.org/min/?g=css”>
<script type=“text/javascript” src=“http://example.org/min/?g=js”></script>

خب شما توانستید به راحتی کدهای سایت خود را minfy کنید.

مطالب مرتبط

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017