Select Page

Minification- Giảm thiểu kích thước tệp HTML, CSS, JS

Minification- Giảm thiểu kích thước tệp HTML, CSS, JS

Minification là gì?

Minification là quá trình giảm thiểu mã và đánh dấu trong các trang web và các tệp chức năng của chúng ta. Đó là một trong những phương pháp chính được sử dụng để giảm page load time và sử dụng băng thông trên các trang web. Minification cải thiện đáng kể tốc độ trang web và khả năng tiếp cận, trực tiếp chuyển thành trải nghiệm người dùng tốt hơn.

Đối với hầu hết người dùng đang sử dụng băng thông di động như hiện nay. Minification đem lại một lợi ích lớn cho người dùng truy cập trang web của chúng ta thông qua một kế hoạch dữ liệu hạn chế.

Tại sao phải Minification các tệp HTML, CSS, JS

Khi tạo các tệp HTML, CSS và JavaScript (JS), các nhà phát triển thường sử dụng khoảng cách-space, chú thích và các biến được đặt tên để tạo mã và đánh dấu cho chính họ. Nó cũng giúp những người khác sau này có thể làm việc trên tài sản của nhà phát triển- mã code. Đây là một điểm cộng trong giai đoạn phát triển nhưng nó trở thành điểm trừ khi trang web của chúng ta phục vụ cho khách truy cập.

Vì sao ư? Origin Server và trình duyệt web có thể phân tích nội dung tệp mà không có các nhận xét và mã có cấu trúc tốt trong code, cả hai đều tạo ra lưu lượng mạng bổ sung mà không cung cấp bất kỳ lợi ích về chức năng nào.

Để giảm thiểu các tệp JS, CSS và HTML, các nhận xét và các không gian bổ sung cần được xoá, cũng như các tên biến dạng để giảm thiểu mã và giảm kích thước tệp. Phiên bản tệp tối thiểu cung cấp chức năng tương tự đồng thời giảm băng thông của các yêu cầu mạng.

Dưới đây là cách một nhà phát triển viết tệp HTML để sử dụng trong một trang web:

 
 
<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package llorix-one-lite
 */
?>
      <footer itemscope itemtype="http://schema.org/WPFooter" id="footer" role="contentinfo" class = "footer grey-bg">
            <div class="container">
                  <div class="footer-widget-wrap">
                  
                        <?php
                              if ( is_active_sidebar( 'footer-area' ) ) {
                        ?>
                        <div itemscope itemtype="http://schema.org/WPSideBar" role="complementary" id="sidebar-widgets-area-1" class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 1','llorix-one-lite' ); ?>">
                        <?php
                        dynamic_sidebar( 'footer-area' );
                        ?>
                        </div>
                        
                        <?php
                              }
                              if ( is_active_sidebar( 'footer-area-2' ) ) {
                        ?>
                        <div itemscope itemtype="http://schema.org/WPSideBar" role="complementary" id="sidebar-widgets-area-2" class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 2','llorix-one-lite' ); ?>">
                        <?php
                        dynamic_sidebar( 'footer-area-2' );
                        ?>
                        </div>
                        <?php
                              }
                              if ( is_active_sidebar( 'footer-area-3' ) ) {
                        ?>
                        <div itemscope itemtype="http://schema.org/WPSideBar" role="complementary" id="sidebar-widgets-area-3" class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 3','llorix-one-lite' ); ?>">
                     <?php
                        dynamic_sidebar( 'footer-area-3' );
                        ?>
                        </div>
                        <?php
                              }
                              if ( is_active_sidebar( 'footer-area-4' ) ) {
                        ?>
                        <div itemscope itemtype="http://schema.org/WPSideBar" role="complementary" id="sidebar-widgets-area-4" class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 4','llorix-one-lite' ); ?>">
                        <?php
                        dynamic_sidebar( 'footer-area-4' );
                        ?>
                        </div>
                        <?php
                              }
                        ?>
                  </div><!-- .footer-widget-wrap -->
              <div class="footer-bottom-wrap">
                        <?php
                              global $wp_customize;
                              /* COPYRIGHT */
                              $llorix_one_lite_copyright = get_theme_mod( 'llorix_one_lite_copyright',apply_filters( 'llorix_one_lite_copyright_default_filter','Themeisle' ) );
                              if ( ! empty( $llorix_one_lite_copyright ) ) {
                              echo '<span class="llorix_one_lite_copyright_content">' . esc_attr( $llorix_one_lite_copyright ) . '</span>';
                              } elseif ( isset( $wp_customize ) ) {
                              echo '<span class="llorix_one_lite_copyright_content llorix_one_lite_only_customizer"></span>';
                              }
                              /* OPTIONAL FOOTER LINKS */
                              echo '<div itemscope role="navigation" itemtype="http://schema.org/SiteNavigationElement" id="menu-secondary" aria-label="' . esc_html__( 'Secondary Menu','llorix-one-lite' ) . '">';
                                    echo '<h1 class="screen-reader-text">' . esc_html__( 'Secondary Menu', 'llorix-one-lite' ) . '</h1>';
                                    wp_nav_menu(
                                          array(
                                                'theme_location'    => 'llorix_one_lite_footer_menu',
                                                'container'         => false,
                                                'menu_class'        => 'footer-links small-text',
                                                'depth'                   => 1,
                                                'fallback_cb'       => false,
) );
                              echo '</div>';
                              /* SOCIAL ICONS */
                              $llorix_one_lite_social_icons = get_theme_mod( 'llorix_one_lite_social_icons' );
                              llorix_one_lite_social_icons( $llorix_one_lite_social_icons, true ); ?>
                  
              </div><!-- .footer-bottom-wrap -->
                  <?php echo apply_filters( 'llorix_one_plus_footer_text_filter','<div class="powered-by"><a href="http://themeisle.com/themes/llorix-one/" rel="nofollow">Llorix One Lite </a>' . esc_html__( 'powered by','llorix-one-lite' ) . '<a href="http://wordpress.org/" rel="nofollow">' . esc_html__( 'WordPress','llorix-one-lite' ) . '</a></div>' ); ?>
          </div><!-- container -->
      </footer>
      <?php wp_footer(); ?>
</body>
</html>

Sau khi minified, mã giống như thế này:

 
 
  1. <?php
  2. /**
  3. * The template for displaying the footer.
  4. *
  5. * Contains the closing of the #content div and all content after
  6. *
  7. * @package llorix-one-lite
  8. */
  9. ?>
  10. <footer itemscope itemtype="http://schema.org/WPFooter" id="footer" role="contentinfo" class = "footer grey-bg">
  11. <div class="container">
  12. <div class="footer-widget-wrap">
  13. <?php
  14. if ( is_active_sidebar( footer-area ) ){?divitemscopeitemtype:http://schema.org/WPSideBar role=complementary id=sidebar-widgets-area-1 class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 1','llorix-one-lite' ); ?>"> <?php dynamic_sidebar(footer-area)}if ( is_active_sidebar( footer-area-2 ) ){?divitemscopeitemtype:http://schema.org/WPSideBar role=complementary id=sidebar-widgets-area-2 class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 2','llorix-one-lite' ); ?>"> <?php dynamic_sidebar(footer-area-2)}if ( is_active_sidebar( footer-area-3 ) ){?divitemscopeitemtype:http://schema.org/WPSideBar role=complementary id=sidebar-widgets-area-3 class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 3','llorix-one-lite' ); ?>"> <?php dynamic_sidebar(footer-area-3)}if ( is_active_sidebar( footer-area-4 ) ){?divitemscopeitemtype:http://schema.org/WPSideBar role=complementary id=sidebar-widgets-area-4 class="col-md-3 col-sm-6 col-xs-12 widget-box" aria-label="<?php esc_html_e( 'Widgets Area 4','llorix-one-lite' ); ?>"> <?php dynamic_sidebar(footer-area-4)}

Tệp footer.php có dung dượng 5417 byte, sau khi minification còn 1502 byte, tệp này đã giảm đến 260%. Tôi đã sử dụng chức năng minification hết cỡ, còn lại duy nhất là một mã code chỉ origin server và trình duyệt web mới có thể đọc được. Điều này giảm đáng kể thời gian tải trang và thời gian nhận byte đầu tiên.

Minification đã trở thành tiêu chuẩn thực hành để tối ưu hóa trang web. Tất cả các nhà phát triển HTML, CSS, thư viện JavaScript chính (bootstrap, JQuery, AngularJS, …) cung cấp các phiên bản minified các tệp của họ cho các triển khai sản xuất, thường được biểu thị bằng một min.js- phần mở rộng tên.

Sử dụng công cụ để Minification

Dưới đây là một số công cụ giúp chúng ta minification các tệp HTML, CSS, JS trên website, mỗi công cụ đều có những đặc điểm riêng. Tất nhiên, mỗi người trong chúng ta sẽ hợp với một công cụ trực tuyến nào đó, bạn có thể tìm thấy nó trong danh sách của tôi.

  1. CSS Compressor- Online Code Compressor
  2. Styleneat- CSS Organizer
  3. ProCSSor
  4. Clean CSS- Optimize and Format your CSS
  5. CSS Comb
  6. Helium CSS
  7. CSSS Beautifier
  8. Code Beautifier- CSS Formatter and Optimiser
  9. CSS Lint
  10. ZBugs
  11. The W3C CSS Validation Service
  12. Critical CSS

Tôi sử dụng công cụ số 1 để tiến hành minification tệp code vừa rồi, bạn có thể thử lại các con số của tôi chính xác hơn. Nếu sử dụng WordPress, bạn có thể sử dụng plugin để minification trên trang web của bạn bằng WP-Autoptimize, một phương pháp đơn giản được nhiều nhà quản lý sử dụng hơn.

About The Author

Rain Nguyen

Tôi là Rain, người sáng lập và là biên tập viên của blog RN DOT COM. Tôi làm việc để xây dựng một cộng đồng vững mạnh bằng cách hướng dẫn mọi người viết blog kiếm tiền, xây dựng hệ thống kinh doanh của chính mình qua hệ thống bài viết của tôi. Nếu bạn thấy bài viết nào đó hay, hãy chia sẻ nó như một cách giúp tôi hỗ trợ những ai đang khao khát như bạn. I love all my friends!

Leave a reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

"