{"id":2161,"date":"2024-12-09T11:06:19","date_gmt":"2024-12-09T07:36:19","guid":{"rendered":"https:\/\/cotion.co\/fa\/blog\/?p=2161"},"modified":"2026-02-08T11:34:22","modified_gmt":"2026-02-08T08:04:22","slug":"unminified-css","status":"publish","type":"post","link":"https:\/\/cotion.co\/fa\/blog\/unminified-css\/","title":{"rendered":"\u0631\u0641\u0639 \u062e\u0637\u0627\u06cc Minify CSS"},"content":{"rendered":"<p><strong>\u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc<\/strong><strong> CSS<\/strong> \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0634\u0627\u0645\u0644 \u062d\u0630\u0641 \u062a\u0645\u0627\u0645\u06cc \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0627\u0632 \u06a9\u062f CSS \u0645\u0627\u0646\u0646\u062f \u0641\u0627\u0635\u0644\u0647\u200c\u0647\u0627\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a\u060c \u0634\u06a9\u0633\u062a \u062e\u0637\u0648\u0637 \u0648 \u0641\u0631\u0645\u062a\u200c\u0628\u0646\u062f\u06cc \u0627\u0633\u062a\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u06cc\u0627 \u062e\u0631\u0648\u062c\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f. \u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644\u060c \u0628\u0647\u0628\u0648\u062f \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0627\u062a\u060c \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0627\u0631\u062a\u0642\u0627\u06cc \u0631\u062a\u0628\u0647\u200c\u0628\u0646\u062f\u06cc \u062f\u0631 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0627\u0633\u062a.<\/p>\n<h2>\u0686\u0631\u0627 \u0628\u0627\u06cc\u062f CSS \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u0634\u0648\u062f\u061f<\/h2>\n<ol>\n<li><strong>\u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc<\/strong><strong>:<\/strong><br \/>\n\u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647 \u062d\u062c\u0645 \u06a9\u0645\u062a\u0631\u06cc \u062f\u0627\u0631\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u06a9\u0646\u062f\u062a\u0631 \u06cc\u0627 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644.<\/li>\n<li><strong>\u06a9\u0627\u0647\u0634 \u0645\u0635\u0631\u0641 \u067e\u0647\u0646\u0627\u06cc \u0628\u0627\u0646\u062f<\/strong><strong>:<\/strong><br \/>\n\u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u062a\u0631 \u0628\u0627\u0639\u062b \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0627\u0646\u062a\u0642\u0627\u0644 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646\u06cc \u0628\u0627 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u062f\u0631 \u0645\u0635\u0631\u0641 \u062f\u0627\u062f\u0647 \u0648 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0628\u0627 \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0628\u0627\u0644\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/li>\n<li><strong>\u0628\u0647\u0628\u0648\u062f \u0634\u0627\u062e\u0635\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<\/strong><strong>:<\/strong><br \/>\n\u0632\u0645\u0627\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 CSS \u0628\u0647 \u0628\u0647\u0628\u0648\u062f \u0634\u0627\u062e\u0635\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f <strong>\u0627\u0648\u0644\u06cc\u0646 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627<\/strong><strong> (FCP)<\/strong> \u0648 <strong>\u0628\u0632\u0631\u06af\u062a\u0631\u06cc\u0646 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627<\/strong><strong> (LCP)<\/strong> \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<li><strong>\u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0626\u0648<\/strong><strong>:<\/strong><br \/>\n\u0635\u0641\u062d\u0627\u062a \u0628\u0627 \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0631\u062a\u0628\u0647 \u0628\u0627\u0644\u0627\u062a\u0631\u06cc \u062f\u0627\u0631\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0633\u0631\u0639\u062a \u06cc\u06a9 \u0641\u0627\u06a9\u062a\u0648\u0631 \u0645\u0647\u0645 \u062f\u0631 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645 \u0631\u062a\u0628\u0647\u200c\u0628\u0646\u062f\u06cc \u06af\u0648\u06af\u0644 \u0627\u0633\u062a.<\/li>\n<\/ol>\n<h2>\u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS<\/h2>\n<ol>\n<li><strong>\u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u062f\u0633\u062a\u06cc<\/strong><strong>:<\/strong><br \/>\n\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0627\u0632 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u062d\u0630\u0641 \u06a9\u0646\u0646\u062f. \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u06cc\u0627 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u062d\u062a\u0645\u0627\u0644 \u0628\u0631\u0648\u0632 \u062e\u0637\u0627 \u062a\u0648\u0635\u06cc\u0647 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n<li><strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631<\/strong><strong>:<\/strong><br \/>\n\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f <strong>CSSNano<\/strong>\u060c <strong>Clean-CSS<\/strong> \u06cc\u0627 <strong>UglifyCSS<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<li><strong>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0633\u0627\u062e\u062a \u0648 \u0686\u0627\u0631\u0686\u0648\u0628\u200c\u0647\u0627<\/strong><strong>:<\/strong><br \/>\n\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0633\u0627\u062e\u062a \u0645\u062d\u0628\u0648\u0628 \u0645\u0627\u0646\u0646\u062f <strong>Webpack<\/strong>\u060c <strong>Gulp<\/strong> \u0648 <strong>Grunt<\/strong> \u067e\u0644\u0627\u06af\u06cc\u0646\u200c\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/li>\n<li><strong>\u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646<\/strong><strong>:<\/strong><br \/>\n\u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f <strong>MinifyCSS.com<\/strong> \u06cc\u0627 <strong>CSS Minifier<\/strong> \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u062e\u0648\u062f \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0646\u0633\u062e\u0647 \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u0646\u062f.<\/li>\n<\/ol>\n<h2>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS<\/h2>\n<p>\u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS (CSS Minification) \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u0624\u062b\u0631 \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u062d\u0630\u0641 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc\u060c \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0631\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0627\u062f\u0647 \u0648 \u0632\u0645\u0627\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0627\u062a \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p>&nbsp;<\/p>\n<ol>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc<\/li>\n<\/ol>\n<p>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u06a9\u062f\u060c \u0641\u0636\u0627\u06cc \u0633\u0641\u06cc\u062f\u060c \u06a9\u0627\u0645\u0646\u062a\u200c\u0647\u0627 \u0648 \u0633\u0627\u06cc\u0631 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p><strong>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u062d\u0628\u0648\u0628<\/strong><strong>:<\/strong><\/p>\n<ul>\n<li><strong>Online Minifiers:<\/strong>\n<ul>\n<li><a href=\"https:\/\/cssminifier.com\/\" rel=\"nofollow noopener\" target=\"_blank\">CSS Minifier<\/a><\/li>\n<li><a href=\"https:\/\/www.cleancss.com\/\" rel=\"nofollow noopener\" target=\"_blank\">CleanCSS<\/a><\/li>\n<\/ul>\n<\/li>\n<li><strong>Build Tools:<\/strong>\n<ul>\n<li><strong>Webpack:<\/strong> \u0627\u0632 \u067e\u0644\u0627\u06af\u06cc\u0646\u200c\u0647\u0627\u06cc \u0645\u0627\u0646\u0646\u062f css-minimizer-webpack-plugin \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li><strong>Gulp:<\/strong> \u0628\u0627 \u067e\u0644\u0627\u06af\u06cc\u0646 gulp-clean-css.<\/li>\n<li><strong>Parcel:<\/strong> \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u062f\u0631 \u0632\u0645\u0627\u0646 \u062a\u0648\u0644\u06cc\u062f.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Command-Line Tools:<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f csso-cli.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ol start=\"2\">\n<li>\u062d\u0630\u0641 \u06a9\u062f\u0647\u0627\u06cc CSS \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc<\/li>\n<\/ol>\n<p>\u06a9\u062f\u0647\u0627\u06cc \u0628\u0644\u0627\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0641\u0636\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0627\u0634\u063a\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0628\u0644\u06a9\u0647 \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0646\u06cc\u0632 \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n<p><strong>\u0631\u0648\u0634\u200c\u0647\u0627<\/strong><strong>:<\/strong><\/p>\n<ul>\n<li><strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f<\/strong><strong> PurifyCSS <\/strong><strong>\u06cc\u0627<\/strong><strong> UnCSS:<\/strong> \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u06a9\u062f\u0647\u0627\u06cc CSS \u0628\u0644\u0627\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0648 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/li>\n<li><strong>\u0628\u0631\u0631\u0633\u06cc \u062f\u0633\u062a\u06cc<\/strong><strong>:<\/strong> \u062d\u0630\u0641 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0627\u062a \u062e\u0627\u0635 \u06cc\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0647\u0633\u062a\u0646\u062f.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ol start=\"3\">\n<li>\u0641\u0634\u0631\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0633\u062a\u06cc CSS<\/li>\n<\/ol>\n<p>\u0627\u06af\u0631 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0648\u0686\u06a9 \u0627\u0633\u062a\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u06a9\u062f\u0647\u0627 \u0631\u0627 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0634\u06cc\u0648\u0647\u200c\u0647\u0627<\/strong><strong>:<\/strong><\/p>\n<ul>\n<li><strong>\u062d\u0630\u0641 \u0641\u0636\u0627\u06cc \u0633\u0641\u06cc\u062f \u0648 \u062e\u0637\u0648\u0637 \u0627\u0636\u0627\u0641\u06cc<\/strong><strong>:<\/strong><\/li>\n<\/ul>\n<ul>\n<li>body {<\/li>\n<li>margin: 0;<\/li>\n<li>padding: 0;<\/li>\n<li>}<\/li>\n<\/ul>\n<p>\u0628\u0647:<\/p>\n<p>body{margin:0;padding:0;}<\/p>\n<ul>\n<li><strong>\u062d\u0630\u0641 \u06a9\u0627\u0645\u0646\u062a\u200c\u0647\u0627<\/strong><strong>:<\/strong><\/li>\n<\/ul>\n<ul>\n<li>\/* This is a comment *\/<\/li>\n<\/ul>\n<p>\u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n<ul>\n<li><strong>\u0627\u062f\u063a\u0627\u0645 \u062e\u0637\u200c\u0647\u0627<\/strong><strong>:<\/strong> \u062a\u0631\u06a9\u06cc\u0628 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0645\u0634\u0627\u0628\u0647 \u062f\u0631 \u06cc\u06a9 \u062e\u0637.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ol start=\"4\">\n<li><strong>4<\/strong>. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Shorthand \u0646\u0648\u0634\u062a\u0627\u0631 \u06a9\u0648\u062a\u0627\u0647<\/li>\n<\/ol>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0646\u0648\u0634\u062a\u0627\u0631 \u06a9\u0648\u062a\u0627\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644 CSS \u0631\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644\u200c\u0647\u0627<\/strong><strong>:<\/strong><\/p>\n<ul>\n<li>\u0628\u0647\u200c\u062c\u0627\u06cc:<\/li>\n<\/ul>\n<ul>\n<li>padding-top: 10px;<\/li>\n<li>padding-right: 10px;<\/li>\n<li>padding-bottom: 10px;<\/li>\n<li>padding-left: 10px;<\/li>\n<\/ul>\n<p>\u0627\u0632:<\/p>\n<p>padding: 10px;<\/p>\n<ul>\n<li>\u0628\u0647\u200c\u062c\u0627\u06cc:<\/li>\n<\/ul>\n<ul>\n<li>background-color: #ffffff;<\/li>\n<\/ul>\n<p>\u0627\u0632:<\/p>\n<p>background: #fff;<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"5\">\n<li><strong>5<\/strong>. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Preprocessor\u0647\u0627 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0633\u0627\u062e\u062a (Build Tools)<\/li>\n<\/ol>\n<p>Preprocessor\u0647\u0627 \u0645\u0627\u0646\u0646\u062f <strong>Sass<\/strong> \u06cc\u0627 <strong>Less<\/strong> \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u062a\u0627 \u06a9\u062f\u0647\u0627\u06cc \u0642\u0627\u0628\u0644\u200c\u0641\u0647\u0645\u200c\u062a\u0631\u06cc \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0641\u0627\u06cc\u0644 CSS \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0631\u0648\u0634\u200c\u0647\u0627<\/strong><strong>:<\/strong><\/p>\n<ul>\n<li><strong>Sass <\/strong><strong>\u0648<\/strong><strong> Less:<\/strong> \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u06cc\u0627 \u067e\u0644\u0627\u06af\u06cc\u0646\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<ul>\n<li>sass input.scss output.min.css &#8211;style=compressed<\/li>\n<\/ul>\n<ul>\n<li><strong>PostCSS:<\/strong> \u0628\u0627 \u067e\u0644\u0627\u06af\u06cc\u0646\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f cssnano \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f\u0647\u0627 \u0631\u0627 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ol start=\"6\">\n<li>\u062d\u0630\u0641 Vendor Prefix\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc<\/li>\n<\/ol>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f Autoprefixer \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u067e\u06cc\u0634\u0648\u0646\u062f\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0648 \u0628\u0647\u200c\u0631\u0648\u0632 \u0646\u06af\u0647\u200c\u062f\u0627\u0634\u062a\u0646 CSS.<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"7\">\n<li>\u062a\u0631\u06a9\u06cc\u0628 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS<\/li>\n<\/ol>\n<p>\u062a\u0631\u06a9\u06cc\u0628 \u0686\u0646\u062f \u0641\u0627\u06cc\u0644 CSS \u0628\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0639\u062f\u0627\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc HTTP \u0631\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p><strong>\u0627\u0628\u0632\u0627\u0631\u0647\u0627<\/strong><strong>:<\/strong><\/p>\n<ul>\n<li>Gulp\u060c Webpack \u06cc\u0627 Rollup \u0628\u0631\u0627\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0648 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ol start=\"8\">\n<li><strong>8<\/strong>. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Content Delivery Network (CDN)<\/li>\n<\/ol>\n<p>\u0628\u0631\u0627\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0627\u06cc (\u0645\u0627\u0646\u0646\u062f Bootstrap \u06cc\u0627 Tailwind)\u060c \u0627\u0632 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0631\u0648\u06cc CDN \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0645\u062b\u0627\u0644<\/strong><strong>:<\/strong><\/p>\n<p>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css&#8221;&gt;<\/p>\n<p>&nbsp;<\/p>\n<ol start=\"9\">\n<li><strong>9<\/strong>. \u0645\u0627\u0646\u06cc\u062a\u0648\u0631\u06cc\u0646\u06af \u0648 \u0628\u0631\u0631\u0633\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a<\/li>\n<\/ol>\n<ul>\n<li>\u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f <strong>Lighthouse<\/strong> \u06cc\u0627 <strong>GTmetrix<\/strong> \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u0634\u0645\u0627 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f \u06cc\u0627 \u0646\u0647\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>10. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTTP\/2 \u0648 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u063a\u06cc\u0631\u0647\u0645\u0632\u0645\u0627\u0646<\/h3>\n<p>\u0627\u06af\u0631 \u0627\u0632 HTTP\/2 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647 \u0631\u0627 \u0628\u0627 <strong>Preloading<\/strong> \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>&lt;link rel=&#8221;preload&#8221; href=&#8221;style.min.css&#8221; as=&#8221;style&#8221;&gt;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h2>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0646\u0638\u0627\u0631\u062a \u0628\u0631 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc<\/h2>\n<ul>\n<li><strong>Google Lighthouse:<\/strong> \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647\u200c\u0627\u0646\u062f \u06cc\u0627 \u062e\u06cc\u0631 \u0648 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n<li><strong>PageSpeed Insights:<\/strong> \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc CSS \u063a\u06cc\u0631 \u06a9\u0648\u0686\u06a9\u200c\u0634\u062f\u0647 \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u062a\u0623\u062b\u06cc\u0631 \u0622\u0646\u200c\u0647\u0627 \u0628\u0631 \u0632\u0645\u0627\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0631\u0627 \u0627\u0631\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h2>\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h2>\n<p>\u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS \u06cc\u06a9 \u0631\u0648\u0634 \u0633\u0627\u062f\u0647 \u0627\u0645\u0627 \u0645\u0624\u062b\u0631 \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628 \u0627\u0633\u062a. \u0628\u0627 \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc\u060c \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0646\u062a\u0627\u06cc\u062c \u0633\u0626\u0648 \u0631\u0627 \u0627\u0631\u062a\u0642\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f. \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u06cc\u06a9 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u062c\u0627\u0645\u0639 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc\u060c \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u06cc \u0633\u0631\u06cc\u0639\u060c \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<div class=\"alert alert-info mt-4\"><a href=\"https:\/\/cotion.ir\/fa\/seo-services\/\" target=\"_blank\" rel=\"noopener nofollow\"><i class=\"fa fa-hand-point-left ml-2 text-danger h5\"><\/i>\u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0634\u0627\u062e\u0635 \u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06ccCSS \u0648\u0628\u0633\u0627\u06cc\u062a\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u06a9\u0648\u0686\u06a9\u200c\u0633\u0627\u0632\u06cc CSS \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0634\u0627\u0645\u0644 \u062d\u0630\u0641 \u062a\u0645\u0627\u0645\u06cc \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0627\u0632 \u06a9\u062f CSS \u0645\u0627\u0646\u0646\u062f \u0641\u0627\u0635\u0644\u0647\u200c\u0647\u0627\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a\u060c \u0634\u06a9\u0633\u062a \u062e\u0637\u0648\u0637 \u0648 \u0641\u0631\u0645\u062a\u200c\u0628\u0646\u062f\u06cc \u0627\u0633\u062a\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u06cc\u0627 \u062e\u0631\u0648\u062c\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627 \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f. \u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0641\u0627\u06cc\u0644\u060c \u0628\u0647\u0628\u0648\u062f \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0627\u062a\u060c \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0627\u0631\u062a\u0642\u0627\u06cc \u0631\u062a\u0628\u0647\u200c\u0628\u0646\u062f\u06cc [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2248,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[67],"tags":[65,62,63],"class_list":["post-2161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-----performance","tag-65","tag-62","tag-63"],"_links":{"self":[{"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/posts\/2161"}],"collection":[{"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/comments?post=2161"}],"version-history":[{"count":5,"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/posts\/2161\/revisions"}],"predecessor-version":[{"id":2577,"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/posts\/2161\/revisions\/2577"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/media\/2248"}],"wp:attachment":[{"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/media?parent=2161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/categories?post=2161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cotion.co\/fa\/blog\/wp-json\/wp\/v2\/tags?post=2161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}