20 Mẹo để tối ưu hóa thời gian tải trang
Tốc độ tải trang web là một phần quan trọng nhất của khả năng sử dụng của trang web và SEO. Google xem xét tốc độ trang là một trong số 200 yếu tố xếp hạng ảnh hưởng đến vị trí của một trang web trong kết quả tìm kiếm hữu cơ và được biết đến để làm giàu kinh nghiệm người dùng. Với nhiều trang web khác trong niche của bạn cạnh tranh để kiếm được lưu lượng truy cập trang web và giữ cho mọi người ấn tượng với khả năng sử dụng phong phú đang trở thành quan trọng hơn mỗi ngày. Nếu trang web của bạn không tải một cách nhanh chóng có thể là bạn sẽ mất khách truy cập trang web để cạnh tranh của bạn trong một vài giây.
Dưới đây là 20 lời khuyên nhanh chóng nhằm mục đích tối ưu hóa thời gian tải trang web của bạn:
Các hình ảnh trên trang web của bạn mất rất nhiều kích thước trang của bạn và cuối cùng có thể ảnh hưởng đến thời gian tải trang của bạn. Đó là không đủ để giảm bớt hình ảnh trang web của bạn trong trình biên tập HTML bởi vì đó chỉ thay đổi sự xuất hiện của hình ảnh trong các front-end và không kích thước thực tế của nó. Sử dụng các công cụ biên tập hình ảnh bên ngoài để thay đổi kích thước hình ảnh, chẳng hạn như Photoshop.
Dưới đây là một số công cụ trực tuyến để tối ưu hóa hình ảnh trang web của bạn:
- JPEG & PNG Stripper
- Smush.it
- Trực tuyến Tối ưu hóa hình ảnh
- SuperGIF
Cho tối ưu dành cho thời gian tải trang của bạn đó là lý tưởng để dính vào các định dạng ảnh chuẩn như JPG, PNG và GIF.
Một số trang web có thể cần văn bản cách điệu để làm cho trang web trông hấp dẫn. Tuy nhiên, bạn phải nhớ rằng trong văn bản dưới hình thức một hình ảnh có thể mất rất nhiều kích thước trang web và là không sử dụng cho SEO. Vì thế, lý tưởng để sử dụng phong cách văn bản trong CSS và giữ mọi thứ trong định dạng văn bản thay thế.
Một trang web đó đòi hỏi phải bổ sung có thể làm chậm tốc độ tải trang của bạn. Không phải tất cả các plugin không cần thiết, ví dụ, bổ sung phần xã hội mà là một-phải có cho mỗi trang web những ngày này. Điều đó nói rằng, luôn luôn kiểm tra xem nếu có một thay thế tốt hơn để các plugin, ví dụ, sử dụng một CMS với các plugin xã hội trong xây dựng.
Nó là một thực hành tốt để đặt JS trang web của bạn và CSS trong các tập tin bên ngoài. Khi trang web tải các trình duyệt lưu trữ những tập tin bên ngoài và làm giảm thời gian tải trang. Hơn nữa, có JS và các tập tin CSS bên ngoài cho phép để bảo trì trang web dễ dàng.
Mỗi khi một người truy cập tải một trang web, tập tin hình ảnh trang web của bạn, CSS và Java file tải là tốt, do đó chiếm rất nhiều thời gian tải trang. Khi bạn sử dụng hệ thống bộ nhớ đệm HTTP trên trang web của bạn nó cho phép các tài nguyên tập tin được lưu trữ hoặc lưu bởi trình duyệt hoặc ủy quyền. Trên trang tải lặp đi lặp lại những tập tin này có thể được lấy từ các tập tin lưu trữ hơn là tải về tất cả hơn một lần nữa từ mạng. Hơn nữa, bằng cách tối ưu hóa hệ thống bộ nhớ đệm của trang web của bạn, bạn cũng có xu hướng giảm băng thông và chi phí lưu trữ trên trang web của bạn.
Đảm bảo rằng JS tập tin của bạn được đặt ở phần cuối của tài liệu như JS tải tập tin có thể gây trở ngại cho việc tải các tập tin tiếp theo.
Tránh chuyển hướng làm tăng tốc độ phục vụ. Một số chuyển hướng là không thể tránh khỏi và cần phải được đặt đúng chỗ nhưng bạn phải nhớ rằng điều này đòi hỏi một HTTP bổ sung làm tăng thời gian tải trang. Kiểm tra các liên kết bị hỏng và sửa chữa chúng ngay lập tức.
DNS (Domain Name System) Lookup xảy ra khi một URL (tên máy) được gõ vào một trình duyệt và một lợi nhuận giải quyết DNS địa chỉ IP của máy chủ. Thời gian cần thiết cho quá trình này là khoảng 20 - 120 phần nghìn giây, tuy nhiên, nhiều tên máy chủ có thể được sử dụng cho các yếu tố khác nhau trên một trang web, trong đó bao gồm URL, hình ảnh, tập tin kịch bản, phong cách và các yếu tố flash. Với nhiều tên máy chủ duy nhất tra cứu DNS cũng tăng do đó tăng thời gian tải trang. Giảm số lượng các tên máy độc đáo sẽ làm giảm số lượng tải về song song, có thể làm tăng thời gian tải trang. Vì thế, lý tưởng để sử dụng một máy chủ khi bạn có ít hơn sáu tài nguyên. Bạn cũng có thể sử dụng đường dẫn URL thay vì tên máy. Điều này có nghĩa rằng nếu bạn có một trang blog đó được lưu trữ trên blog.yoursite.com, thay vào đó bạn có thể lưu trữ nó trên www.yoursite.com / blog.
Làm sáng mã của trang web của bạn bằng cách loại bỏ bất kỳ HTML hoặc CSS mà là không cần thiết. Nếu trang web của bạn được xây dựng trên một CMS, rất có thể là bạn đã cài đặt sẵn CSS class và id 'khai' giúp thiết kế các chủ đề. Loại bỏ lớp không sử dụng và khai báo ID hoặc kết hợp nhiều tờ khai thành một.
Trong khi nó là khôn ngoan để giữ các tab trên số liệu thống kê lưu lượng truy cập trang web của bạn, nó không phải là khuyến khích sử dụng nhiều phần mềm theo dõi vì điều này có thể cản trở thời gian tải trang. Nếu bạn đang sử dụng một CMS như WordPress, bạn có thể cho phép các số liệu thống kê WP chạy các kịch bản trên trang của bạn hoặc Google Analytics, nhưng không bao giờ cả. Thương mại điện tử mua sắm giỏ hàng CMS có xu hướng có của kịch bản theo dõi mặc định của họ mà không có thể được xóa khi bạn sử dụng Google Analytics để thay thế.
Tương tự như các tập tin trên máy tính của bạn được nén và nén để giảm bớt kích thước trong quá trình chuyển tập tin trực tuyến, các file nặng trên trang web của bạn có thể được nén với một cái gì đó gọi là nén G-Zip . Điều này tiết kiệm băng thông và thời gian tải về và nhất là làm giảm tốc độ tải trang của bạn. Bạn nên cấu hình máy chủ để nó trả về nội dung nén.
Sử dụng CSS Sprites để giảm số lượng các yêu cầu hình ảnh. Kết hợp các hình nền vào một hình ảnh duy nhất bằng cách sử dụng CSS background-image và background-position yếu tố. Kết hợp hình ảnh nội tuyến vào stylesheets lưu trữ của bạn. Các yêu cầu HTTP được nhân rộng khi có kịch bản trùng lặp trong mã để đảm bảo rằng bạn xác định và loại bỏ những kịch bản trùng lặp. Để giữ nhân bản dưới sự kiểm soát sử dụng Script tag trên trang HTML của bạn, như trong ví dụ dưới đây:
<script type="text/javascript" src="menu_1.0.17.js"> </ script>
Bạn có thể sử dụng một chức năng insertScript trong trang PHP của bạn, như trong ví dụ này:
<? Php insertScript ("menu.js")>
Bạn có thể sử dụng hết hạn tiêu đề cho các thành phần tĩnh của trang web và tiêu đề Cache-Control cho những người năng động. Sử dụng các tiêu đề làm cho các thành phần khác nhau của một trang web, bao gồm cả hình ảnh, stylesheets, kịch bản và đèn flash, khả năng lưu nhớ. Điều này sẽ giảm thiểu tối đa các yêu cầu HTTP và do đó cải thiện thời gian tải trang. Với việc sử dụng hết hạn tiêu đề bạn thực sự có thể kiểm soát độ dài của thời gian mà các thành phần của một trang web có thể được lưu trữ, như trong ví dụ dưới đây:
Ngày hết hạn: Thứ Tư, 20 Tháng Tư 2015 20:00:00 GMT
Nếu máy chủ của bạn là Apache, bạn có thể thiết lập thời gian cho các nội dung được lưu trữ bằng cách sử dụng các chỉ thị ExpiresDefault. Điều này đặt ra ngày hết hạn như một số năm nhất định từ ngày hiện tại:
"Truy cập cộng thêm 15 năm" ExpiresDefault
Đó là tiêu chuẩn thực hành để đặt phong cách ở phía trên cùng của tài liệu. Các yếu tố trang đó đã được cung cấp từ máy chủ mở dần trong trình duyệt của bạn như khởi xướng bởi những yếu tố phong cách. Từ thanh điều hướng và logo cho các trang nội dung, sự tiến triển hình ảnh của một trang web tải cho kinh nghiệm người dùng phong phú, thậm chí nếu người dùng có một kết nối Internet chậm. Phong cách trang cũng cải thiện thời gian tải trang.
Giảm tính chất là quá trình loại bỏ các ký tự không sử dụng từ mã giúp giảm kích thước của nó và thời gian tải tiếp theo.
Sau đây là hai công cụ giảm tính chất như vậy có sẵn trực tuyến:
- JSMin
- YUI Compressor
Nó được tìm thấy rằng việc sử dụng thuộc tính html 'Phương pháp' GET xử lý dữ liệu nhanh hơn nhiều so với POST khi yêu cầu dữ liệu trên một trình duyệt. Mặc dù cả hai phương thức HTTP đạt được kết quả tương tự, POST gửi các tiêu đề đầu tiên và sau đó gửi dữ liệu trong khi GET chỉ mất một gói tin TCP để gửi dữ liệu. Ngoài ra, GET được khuyến khích cho các yêu cầu AJAX vì nó có thể được lưu trữ và vẫn còn trong lịch sử trình duyệt.
Đánh dấu đông đúc, ví dụ, một với rất nhiều yếu tố <div>, có thể làm chậm đáng kể các đối tượng tài liệu Model (DOM) truy cập trong JavaScript. Thay vì sử dụng các bảng lồng nhau để bố trí, bạn có thể sử dụng grids.css, fonts.css và reset.css. Bạn có thể kiểm tra số phần tử DOM bằng cách gõ như sau trong giao diện điều khiển Firebug của:
document.getElementById ('*') chiều dài.
Bạn cũng có thể để giảm thiểu truy cập DOM của bộ nhớ đệm tài liệu tham khảo cho các thành phần truy cập, cập nhật các nút ẩn và tránh sử dụng JavaScript để sửa chữa bố trí.
Các dữ liệu được lưu trữ trong các tập tin cookie được trao đổi giữa máy chủ và trình duyệt. Do đó, bằng cách giảm kích thước của các tập tin cookie bạn giảm kích thước của dữ liệu được chuyển và tăng thời gian tải trang. Loại bỏ các cookie không cần thiết và thiết lập của bạn hết hạn ngày để một khoảng thời gian sớm hơn thời gian, hoặc không cung cấp hết hạn ngày ở tất cả để giảm kích thước của các tập tin cookie.
Nếu bạn đang sử dụng một CMS như WordPress bạn nên kiểm tra thường xuyên để cập nhật phần mềm nhưng không tải các trên một trang web trực tiếp. Đầu tiên thực hiện nâng cấp trên một máy chủ riêng biệt để kiểm tra chúng. Giữ ngang nhau của bản cập nhật phần mềm cũng giúp cải thiện tốc độ của trang web.
Dưới đây là 20 lời khuyên nhanh chóng nhằm mục đích tối ưu hóa thời gian tải trang web của bạn:
1. Tối ưu hóa Kích thước:
Các hình ảnh trên trang web của bạn mất rất nhiều kích thước trang của bạn và cuối cùng có thể ảnh hưởng đến thời gian tải trang của bạn. Đó là không đủ để giảm bớt hình ảnh trang web của bạn trong trình biên tập HTML bởi vì đó chỉ thay đổi sự xuất hiện của hình ảnh trong các front-end và không kích thước thực tế của nó. Sử dụng các công cụ biên tập hình ảnh bên ngoài để thay đổi kích thước hình ảnh, chẳng hạn như Photoshop.
Dưới đây là một số công cụ trực tuyến để tối ưu hóa hình ảnh trang web của bạn:
- JPEG & PNG Stripper
- Smush.it
- Trực tuyến Tối ưu hóa hình ảnh
- SuperGIF
2. Image File Format:
Cho tối ưu dành cho thời gian tải trang của bạn đó là lý tưởng để dính vào các định dạng ảnh chuẩn như JPG, PNG và GIF.
3. Tránh Tiêu đề Đồ họa:
Một số trang web có thể cần văn bản cách điệu để làm cho trang web trông hấp dẫn. Tuy nhiên, bạn phải nhớ rằng trong văn bản dưới hình thức một hình ảnh có thể mất rất nhiều kích thước trang web và là không sử dụng cho SEO. Vì thế, lý tưởng để sử dụng phong cách văn bản trong CSS và giữ mọi thứ trong định dạng văn bản thay thế.
4. Tránh Plugins không cần thiết:
Một trang web đó đòi hỏi phải bổ sung có thể làm chậm tốc độ tải trang của bạn. Không phải tất cả các plugin không cần thiết, ví dụ, bổ sung phần xã hội mà là một-phải có cho mỗi trang web những ngày này. Điều đó nói rằng, luôn luôn kiểm tra xem nếu có một thay thế tốt hơn để các plugin, ví dụ, sử dụng một CMS với các plugin xã hội trong xây dựng.
5. Tránh Inline JS và các tập tin CSS:
Nó là một thực hành tốt để đặt JS trang web của bạn và CSS trong các tập tin bên ngoài. Khi trang web tải các trình duyệt lưu trữ những tập tin bên ngoài và làm giảm thời gian tải trang. Hơn nữa, có JS và các tập tin CSS bên ngoài cho phép để bảo trì trang web dễ dàng.
6. Tối ưu hóa Caching:
Mỗi khi một người truy cập tải một trang web, tập tin hình ảnh trang web của bạn, CSS và Java file tải là tốt, do đó chiếm rất nhiều thời gian tải trang. Khi bạn sử dụng hệ thống bộ nhớ đệm HTTP trên trang web của bạn nó cho phép các tài nguyên tập tin được lưu trữ hoặc lưu bởi trình duyệt hoặc ủy quyền. Trên trang tải lặp đi lặp lại những tập tin này có thể được lấy từ các tập tin lưu trữ hơn là tải về tất cả hơn một lần nữa từ mạng. Hơn nữa, bằng cách tối ưu hóa hệ thống bộ nhớ đệm của trang web của bạn, bạn cũng có xu hướng giảm băng thông và chi phí lưu trữ trên trang web của bạn.
7. Đặt mã JavaScript vào cuối của tài liệu:
Đảm bảo rằng JS tập tin của bạn được đặt ở phần cuối của tài liệu như JS tải tập tin có thể gây trở ngại cho việc tải các tập tin tiếp theo.
8. Tránh Chuyển hướng:
Tránh chuyển hướng làm tăng tốc độ phục vụ. Một số chuyển hướng là không thể tránh khỏi và cần phải được đặt đúng chỗ nhưng bạn phải nhớ rằng điều này đòi hỏi một HTTP bổ sung làm tăng thời gian tải trang. Kiểm tra các liên kết bị hỏng và sửa chữa chúng ngay lập tức.
9. Giảm tra cứu DNS:
DNS (Domain Name System) Lookup xảy ra khi một URL (tên máy) được gõ vào một trình duyệt và một lợi nhuận giải quyết DNS địa chỉ IP của máy chủ. Thời gian cần thiết cho quá trình này là khoảng 20 - 120 phần nghìn giây, tuy nhiên, nhiều tên máy chủ có thể được sử dụng cho các yếu tố khác nhau trên một trang web, trong đó bao gồm URL, hình ảnh, tập tin kịch bản, phong cách và các yếu tố flash. Với nhiều tên máy chủ duy nhất tra cứu DNS cũng tăng do đó tăng thời gian tải trang. Giảm số lượng các tên máy độc đáo sẽ làm giảm số lượng tải về song song, có thể làm tăng thời gian tải trang. Vì thế, lý tưởng để sử dụng một máy chủ khi bạn có ít hơn sáu tài nguyên. Bạn cũng có thể sử dụng đường dẫn URL thay vì tên máy. Điều này có nghĩa rằng nếu bạn có một trang blog đó được lưu trữ trên blog.yoursite.com, thay vào đó bạn có thể lưu trữ nó trên www.yoursite.com / blog.
10. Hủy bỏ không cần thiết CSS và HTML:
Làm sáng mã của trang web của bạn bằng cách loại bỏ bất kỳ HTML hoặc CSS mà là không cần thiết. Nếu trang web của bạn được xây dựng trên một CMS, rất có thể là bạn đã cài đặt sẵn CSS class và id 'khai' giúp thiết kế các chủ đề. Loại bỏ lớp không sử dụng và khai báo ID hoặc kết hợp nhiều tờ khai thành một.
11. Tránh Nhiều kịch bản theo dõi:
Trong khi nó là khôn ngoan để giữ các tab trên số liệu thống kê lưu lượng truy cập trang web của bạn, nó không phải là khuyến khích sử dụng nhiều phần mềm theo dõi vì điều này có thể cản trở thời gian tải trang. Nếu bạn đang sử dụng một CMS như WordPress, bạn có thể cho phép các số liệu thống kê WP chạy các kịch bản trên trang của bạn hoặc Google Analytics, nhưng không bao giờ cả. Thương mại điện tử mua sắm giỏ hàng CMS có xu hướng có của kịch bản theo dõi mặc định của họ mà không có thể được xóa khi bạn sử dụng Google Analytics để thay thế.
12. Thiết lập G-Zip Encoding:
Tương tự như các tập tin trên máy tính của bạn được nén và nén để giảm bớt kích thước trong quá trình chuyển tập tin trực tuyến, các file nặng trên trang web của bạn có thể được nén với một cái gì đó gọi là nén G-Zip . Điều này tiết kiệm băng thông và thời gian tải về và nhất là làm giảm tốc độ tải trang của bạn. Bạn nên cấu hình máy chủ để nó trả về nội dung nén.
13. Giảm yêu cầu HTTP:
Sử dụng CSS Sprites để giảm số lượng các yêu cầu hình ảnh. Kết hợp các hình nền vào một hình ảnh duy nhất bằng cách sử dụng CSS background-image và background-position yếu tố. Kết hợp hình ảnh nội tuyến vào stylesheets lưu trữ của bạn. Các yêu cầu HTTP được nhân rộng khi có kịch bản trùng lặp trong mã để đảm bảo rằng bạn xác định và loại bỏ những kịch bản trùng lặp. Để giữ nhân bản dưới sự kiểm soát sử dụng Script tag trên trang HTML của bạn, như trong ví dụ dưới đây:
<script type="text/javascript" src="menu_1.0.17.js"> </ script>
Bạn có thể sử dụng một chức năng insertScript trong trang PHP của bạn, như trong ví dụ này:
<? Php insertScript ("menu.js")>
14. sử dụng hết hạn / Cache-Control Tiêu đề:
Bạn có thể sử dụng hết hạn tiêu đề cho các thành phần tĩnh của trang web và tiêu đề Cache-Control cho những người năng động. Sử dụng các tiêu đề làm cho các thành phần khác nhau của một trang web, bao gồm cả hình ảnh, stylesheets, kịch bản và đèn flash, khả năng lưu nhớ. Điều này sẽ giảm thiểu tối đa các yêu cầu HTTP và do đó cải thiện thời gian tải trang. Với việc sử dụng hết hạn tiêu đề bạn thực sự có thể kiểm soát độ dài của thời gian mà các thành phần của một trang web có thể được lưu trữ, như trong ví dụ dưới đây:
Ngày hết hạn: Thứ Tư, 20 Tháng Tư 2015 20:00:00 GMT
Nếu máy chủ của bạn là Apache, bạn có thể thiết lập thời gian cho các nội dung được lưu trữ bằng cách sử dụng các chỉ thị ExpiresDefault. Điều này đặt ra ngày hết hạn như một số năm nhất định từ ngày hiện tại:
"Truy cập cộng thêm 15 năm" ExpiresDefault
15. Nơi Style Sheets ở trên cùng của tài liệu:
Đó là tiêu chuẩn thực hành để đặt phong cách ở phía trên cùng của tài liệu. Các yếu tố trang đó đã được cung cấp từ máy chủ mở dần trong trình duyệt của bạn như khởi xướng bởi những yếu tố phong cách. Từ thanh điều hướng và logo cho các trang nội dung, sự tiến triển hình ảnh của một trang web tải cho kinh nghiệm người dùng phong phú, thậm chí nếu người dùng có một kết nối Internet chậm. Phong cách trang cũng cải thiện thời gian tải trang.
16. giảm tính chất của JavaScript và CSS:
Giảm tính chất là quá trình loại bỏ các ký tự không sử dụng từ mã giúp giảm kích thước của nó và thời gian tải tiếp theo.
Sau đây là hai công cụ giảm tính chất như vậy có sẵn trực tuyến:
- JSMin
- YUI Compressor
17. Sử dụng GET yêu cầu thay vì POST:
Nó được tìm thấy rằng việc sử dụng thuộc tính html 'Phương pháp' GET xử lý dữ liệu nhanh hơn nhiều so với POST khi yêu cầu dữ liệu trên một trình duyệt. Mặc dù cả hai phương thức HTTP đạt được kết quả tương tự, POST gửi các tiêu đề đầu tiên và sau đó gửi dữ liệu trong khi GET chỉ mất một gói tin TCP để gửi dữ liệu. Ngoài ra, GET được khuyến khích cho các yêu cầu AJAX vì nó có thể được lưu trữ và vẫn còn trong lịch sử trình duyệt.
18. Tránh các yếu tố DOM không cần thiết:
Đánh dấu đông đúc, ví dụ, một với rất nhiều yếu tố <div>, có thể làm chậm đáng kể các đối tượng tài liệu Model (DOM) truy cập trong JavaScript. Thay vì sử dụng các bảng lồng nhau để bố trí, bạn có thể sử dụng grids.css, fonts.css và reset.css. Bạn có thể kiểm tra số phần tử DOM bằng cách gõ như sau trong giao diện điều khiển Firebug của:
document.getElementById ('*') chiều dài.
Bạn cũng có thể để giảm thiểu truy cập DOM của bộ nhớ đệm tài liệu tham khảo cho các thành phần truy cập, cập nhật các nút ẩn và tránh sử dụng JavaScript để sửa chữa bố trí.
19. Giảm Cookie:
Các dữ liệu được lưu trữ trong các tập tin cookie được trao đổi giữa máy chủ và trình duyệt. Do đó, bằng cách giảm kích thước của các tập tin cookie bạn giảm kích thước của dữ liệu được chuyển và tăng thời gian tải trang. Loại bỏ các cookie không cần thiết và thiết lập của bạn hết hạn ngày để một khoảng thời gian sớm hơn thời gian, hoặc không cung cấp hết hạn ngày ở tất cả để giảm kích thước của các tập tin cookie.
20. Cập nhật phần mềm CMS
Nếu bạn đang sử dụng một CMS như WordPress bạn nên kiểm tra thường xuyên để cập nhật phần mềm nhưng không tải các trên một trang web trực tiếp. Đầu tiên thực hiện nâng cấp trên một máy chủ riêng biệt để kiểm tra chúng. Giữ ngang nhau của bản cập nhật phần mềm cũng giúp cải thiện tốc độ của trang web.