Chúng tôi đã gặp gỡ với một khách hàng có tầm nhìn xa hôm nay và đã thảo luận về những gì tác động tốc độ tải trang web. Có một trận chiến đang tiếp diễn trên Internet ngay bây giờ.
Visitor yêu cầu trải nghiệm thị giác phong phú - ngay cả trên retina display với pixcel cao hơn. Điều này đang hướng đến hình ảnh lớn hơn và độ phân giải cao-thứ làm tăng lên những kích thước hình ảnh.
Công cụ tìm kiếm đang đòi hỏi các trang cực nhanh có văn bản hỗ trợ tuyệt vời. Điều này có nghĩa là byte có giá trị đang được sử dụng vào văn bản, không phải hình ảnh.
Độ uy tín trong tìm kiếm đang được thúc đẩy bởi nội dung đáng chú ý. Nếu không có nội dung của bạn được chia sẻ, chính bạn hạn chế khả năng của nó để tạo backlinks và citation (trích dẫn) đến nội dung của bạn ... đi về (organic search) tìm kiếm hữu cơ.
Đó là một hành động cân bằng cho bất kỳ công ty nào , vì vậy chúng ta hãy xem các trang tải như thế nào và nơi có thể có các rào chắn.
(Giải pháp miền) - Khi một trang được yêu cầu, tên miền được giải quyết thông qua một tên server. Yêu cầu này là gần như tức thời, nhưng bạn luôn có thể giảm một ít thời gian theo yêu cầu bằng cách sử dụng một dịch vụ DNS được quản lý.
(Cân bằng sự tải về) - Công nghệ xuất hiện để triển khai nhiều máy chủ nhằm chia sẻ việc tải (load) của khách qua chúng chứ không phải chỉ tải trên cùng một máy chủ. Công nghệ này cung cấp cơ hội để tiếp tục thêm nhiều máy chủ cho phần của bạn khi nhu cầu tiếp tục phát triển ... đôi khi trong thời gian thực.
(Các yêu cầu trang) - Đường dẫn sau tên miền truy vấn hệ thống quản lý nội dung của bạn hoặc hệ thống thương mại điện tử để có được nội dung. Database indexing của bạn và phần cứng có thể ảnh hưởng đến tốc độ lấy nội dung.
( Lưu trữ trang)- Hầu hết các máy chủ web high-performance cung cấp khả năng để vượt qua các yêu cầu đến database và đáp ứng nội dung từ một bộ nhớ cache.
(Các yêu cầu về tiêu đề) - Trong nội dung của một trang, có thường nguồn như các script và stylesheet được yêu cầu trước khi trang web được tải trong trình duyệt. Quá nhiều nguồn có thể làm tăng thời gian tải trang của bạn.
(Các phần tử trang) - Các trình duyệt thường có những yêu cầu trở lại máy chủ cùng một lúc. Nếu có nhiều tên miền hoặc tên miền phụ, các yếu tố có thể được yêu cầu cùng một lúc. Một số công ty triển khai nhiều tên miền phụ cho các script, stylesheet, và phương tiện truyền thông để thúc đẩy cách mà trình duyệt làm ra những yêu cầu. Nếu bạn đang tải nhiều script hay stylesheets, kết hợp chúng thành số tập tin ít nhất sẽ cải thiện hiệu suất.
(Mạng lưới phân phối nội dung) - Tin hay không tùy bạn , địa lý đóng một vai trò trong thời gian cần để tải trang web của bạn. Nếu bạn đã gần đến máy chủ của bạn, nó nhanh chóng. Nếu bạn ở phía bên kia một lục địa, nó chậm hơn. Một CDN có thể tải hình ảnh của mình trong khu vực và đáp ứng chúng tới khán giả nhanh hơn.
(Nén) Các máy chủ Web mà có kết hợp nén gzip tài nguyên web, hình ảnh được nén, script và CSS được làm nhỏ để loại bỏ không gian không liên quan đều có thể có một cải tiến đáng kể trong tốc độ tải trang web.
Tại sao tải hình ảnh, nếu các yếu tố phân tử khôngthực sự có thể nhìn thấy trên một trang? Nếu bạn nhận thấy trên trang web của chúng tôi, khi bạn kéo xuống các hình ảnh được tải lập tức chúng muốn trở nên hữu hình hơn là tất cả cùng một lúc. Lazy loading có thể tăng tốc lên tốc độ tải trang web của bạn một cách đáng kể.
(Các thư viện lưu trữ) - Các trang web như Google hiện đang lưu trữ những thư viện chia sẻ cho các thư viện JavaScript phổ biến và phông chữ. Vì các trình duyệt bộ nhớ dự trữ các nguồn này, thậm chí nếu người truy cập đã được chuyển đến trang web của bạn lần đầu tiên - họ có thể đã có một thư viện lưu trữ dự trữ vời tính chất địa phương.
(Tải không đồng bộ) - Không phải mọi thứ phải được tải ngay lập tức trên một trang. Các yếu tố như các nút chia sẻ xã hội, ví dụ, có thể cực kỳ chậm và đánh thuế thuế trên một trình duyệt. Tag Management Services có thể hỗ trợ bạn trong tải các nguồn sau khi trang hoàn tất hơn là làm chậm nó .
(Tối ưu hóa trên thiết bị di động) - thiết kế web Mobile , một cách chính xác,là tất cả mốt phổ biến bây giờ để cung cấp trải nghiệm người dùng phù hợp bất kể viewport thiết bị của bạn. Nhưng nó cũng có thể được làm chậm lại việc xem trên thiết bị di động - nơi tỷ lệ visitor ngày càng tăng.
Dưới đây là một Infographic vừa được phát hành từ Instart logic về cách trang web đã trở nên” béo” hơn, và tác động.
Chúng ta có thể thấy rõ tốc độ load web ảnh hưởng mạnh mẽ đến trải nghiệm người dùng từ đó dẫn đến hiệu quả của doanh nghiệp thế nào. Nếu như website bạn đang gặp phải tình trạng này, thì việc cải thiện nó là điều cấp bách hơn bao giờ hết. Mình hi vọng thông qua bài viết này, bạn sẽ biết thêm được những kỹ thuật hay giúp tăng tốc độ cho website riêng của mình. Ngoài ra, trên thực tế vẫn còn rất nhiều cách khác hỗ trợ, bạn có thể tìm thêm tài liệu đế tham khảo. Chúc các bạn sẽ sở hữu được một website hoàn mỹ và mang lại những trải nghiệm tuyệt vời cho người dùng. Xem thêm bài viết: Cách tăng tốc độ web bán hàng online.
Bộ nhớ đệm hay còn gọi là vùng nhớ tạm thời. Khi bạn thực hiện truy cập vào một website, dữ liệu hoạt động của website sẽ được save lại trong bộ nhớ đệm và cũng trong những lần truy cập tiếp theo. Thay vì trình duyệt của bạn sẽ phải download tất cả các tài nguyên đơn lẻ thì cách này sẽ làm hạn chế đi, chỉ phải tải xuống một số trong đó, còn lại sẽ truy xuất dữ liệu đã được lưu lại ở bộ nhớ đệm. Nhờ vậy mà việc tải tang cũng sẽ được cải thiện hơn nhiều. Với cách thức bật bộ nhớ đệm, bạn đã nâng cấp đáng kể việc load trang web cho những khách truy cập trở lại.
Nếu trang web của bạn chậm , phải chăng hiện tại website của bạn đang chứa quá nhiều plugin ? Nhất là đối với plugin nặng bên cạnh cản trở việc tải trang nó còn khiến website gặp những sự cố về bảo mật. Bạn nên xóa bỏ bớt chúng và chỉ nên giữ lại những plugin chất lượng, thật sự cần thiết.
Để minh chứng cho khả thi việc này hiệu quả, tốt nhất bạn nên là một bài test cơ bản về tốc độ tải trang của website thông qua công cụ như là GTMetrix hoặc Google Pagespeed Insights. Bước kế đi đến plugin của bạn và tắt nó đi. Sau đó, bạn chạy thử lại website và xem tốc độ với Plugin đã ngừng hoạt động.
Mặt khác, bạn sẽ nhận định việc này tốn công, tốn thời gian nhưng hơn hết nó còn sẽ thể giúp bạn phát hiện ra những Plugin đã gây hại đến website của bạn nhiều nhất, ảnh hưởng đến tốc độ load trang. Ngay lúc đó, bạn có thể tìm một số plugin chất lượng an toàn hơn để thay thế hay tìm một hướng giải quyết vến đề khác.
Có thể thấy đa phần các front-end developer sẽ làm việc với CSS, Javascript và các hình ảnh. Trên thực tế, việc truyền nhận tiếp nối giữa máy chủ (nới lưu trữ trang web) với trình duyệt chiếm khoảng 80% thời gian và người dùng phải chờ đợi. Trong khi đó , khoảng thời gian “ rỗng” này lại đi kèm với việc down về các thành phần trong một trang web như hình ảnh, nội dung Flash,…
Vì thế đây cũng là “nhân vật chính” để chúng ta tối ưu tốc độ tải của trang web. Ngoài những yếu tố về server thì tốc độ của một trang web còn dựa phụ thuộc vào kích cỡ và số lượng file tải về. Do đó , nếu như có thể làm giảm được kích cỡ lẫn số lượng file khi tải về thì cũng đồng nghĩa giúp làm tăng tốc độ tải file và giảm lượng yêu cầu lên server.
Có 3 yếu tố chính mà chúng ta cần quan tâm ở đây:
CSS Sprites là một trong những kỹ thuật khá được ưa chuộng nhất để làm giảm yêu cầu. Toàn bộ các hình ảnh sẽ được gom lại trong một file hình duy nhất, tiếp theo dùng thuộc tính CSS background-image và background-position để hiện thị trên đúng vị trí. Đối vơi hiệu ứng hover cũng sẽ được áp dụng cách này, active hay focus giúp tạo các nút bấm động trở nên linh hoạt, mượt hơn.
Đối với kỹ thuật này thay vì hàng loạt hình nhỏ sẽ được upload lần lượt thì bây giờ chỉ cần load một file hình lớn bao tổng hết.
Một thành phần ý kiến cho rằng, load hình lớn như vậy sẽ chậm hơn load từng hình nhỏ. Nhưng điều này hoàn toàn là sai lầm. 1 HTTP Request sẽ được tạo ra mỗi khi load, mỗi request như vậy sẽ phải “open” và “close” 1 socket mới, khi càng nhiều hình thì đồng thờ càng nhiều request và hiển nhiên tốc độ website sẽ bị ảnh hưởng trực tiếp bỏi điều này. Và thực tế có thể nhìn thấy, khi chúng ta đặt những hình ảnh chung lại trong một file lớn thì kích thước file cũng sẽ được giảm theo đáng kể.
Trong những lần tải web đầu tiên thường người dùng sẽ mất khá nhiều time do việc tải các request. Tuy nhiên, với một giải pháp khác bằng việc thêm Expires Header sẽ giúp làm giảm đi đáng kể một lượng request đáng kể khi tải. Điều này cũng như “bắn một mũi tên trúng hai tâm” không chỉ giúp người dùng tiết kiệm được thời gian trong lần tải đầu mà còn tăng tốc độ website cho những lần truy cập sau.
Có thể hiểu Expires chính là thời điểm hết hiệu lực của file được cache và chỉ “vượt ngưỡng” thời điểm này, trình duyệt mới gửi request lên server để tải tài liệu. Nó xác thực cụ thể một khoảng time vừa đủ trong tương lai để trình duyệt tìm nạp các hình ảnh, file CSS, Java Script… mà chúng không thay đổi. Giá trị của trường này luôn là thời gian theo GMT.
Nếu website bạn có chứa rất nhiều bài viết, dung lượng database đạt mức khá “báo động” trên 100MB thì việc khẩn cấp bạn cần làm là tối ưu lại database để server có thể xử lý tốt hơn khi có truy vấn gửi vào.
Đầu tiên, phải chắc chắn rằng database của bạn luôn thường xuyên được làm mới vì bản thân nó cũng không khác gì ổ cứng vậy. Sau khi thực hiện nhiệm vụ đọc, ghi dữ liệu quá nhiều nó cũng sẽ xuất hiện vấn đề phân mảnh và chứa các dữ liệu rác (như log chẳng hạn) lưu bên trong. Đó là chưa đề cập đến một số dữ liệu không cần thiết như các transient, comment spam, bản nháp tự lưu, revisions,…
Tùy thuộc và từng loại website, còn nếu như website bạn có mức độ lớn hơn và bạn cũng thuộc tuýp dư giả điều kiện hơn thì việc khuyến khích tốt nhất là nên sử dụng một máy chủ riêng để lưu trữ và xử lý database (Remote MySQL Server). Nó sẽ làm ảnh hưởng đến việc xử lý file PHP của server vì việc xử lý database sẽ tốn khá nhiều tài nguyên. Đơn giản là tìm và bỏ database trong môjt cái host khác sau đó sửa lại phần hostname trong file wp-config.php thành địa chỉ của máy chủ đó.
Các chuyển hướng (redirect) tạo thêm các HTTP request sẽ làm tăng thời gian tải trang của web. Vì thế bạn không nên lạm dụng chúng. Nếu bạn tạo ra một responsive website, bạn cần redirect để kết nối đưa những người dùng điện thoại đến phiên bản tương ứng.
Google đưa ra lời khuyên cho bạn làm 2 việc sau để đảm bảo rằng các responsive redirect không làm giảm đi tốc độ website của bạn.
Một cách khác đi kèm giúp bạn có thể cải thiện tốc độ cho website bạn là sử dụng web hosting chất lượng cao. Các máy chủ tại được cài đặt LiteSpeed WebServer. Có thể phần đông các bạn chưa biết điểm này đó là LiteSpeed webserver là một trong những webserver hoạt động dựa trên nền tảng Linux và có hiệu suất hoạt động cao và nhanh nhất tính đến thời điểm hiện nay.
Trong suốt một quá trình khá dài ( từ 2002- nay) nó đã “nắm trùm” khi khẳng định khả năng xử lý nhanh nhạy, vượt trội hơn hẳn so với Apache. Tốc độ xử lý PHP trên LSWS có thể tăng từ 1,5 lần đến 3 lần so với Apache. Một web hosting được đầu tư công phu như vậy đảm bảo sẽ khiến bạn hài lòng.
Riêng về các hình ảnh, bạn chỉ cần tập trung vào 3 thứ sau: kích thước, format và src attributes.s
Kích thước ảnh
Thông thường bạn thấy đối với những bức ảnh có kích thước lớ,độ nặng cao thì cần phải mất nhiều thời gian cho việc load. Vì thế việc sao vừa giữ cho các bức ảnh hiển thị lên web vừa đẹp lại vừa nhẹ thì đó mới là việc tối ưu hoàn hảo.
Bạn có thể crop bức ảnh về một kích thước chuẩn cho nó. Ví dụ, giả sử website của bạn có chiều rộng 570px, hãy để kích thước ảnh về 570px. Không nên upload một bức ảnh có kích thước “khủng” như cỡ 2000px chiều rộng và đặt giá trị width parameter (width=”570”). Điều này chắn chắn làm chậm tiến độ load trang và không tốt đối với trải nghiệm người dùng.
Chiều sâu của màu (color depth) nên được hạ xuống mức thấp nhất trong phạm vi vẫn còn có thể chấp nhận được.
Một điểm nữa là cũng nên hạn chế comment bằng ảnh
Định dạng ảnh
Lựa chọn tốt nhất cho hình ảnh “đỡ nặng” đó là JEPG
PNG cũng tương đối tốt, nhất là có những bạn chỉnh ảnh bằng photoshop sẽ được lưu dưới dạng này, nhưng các browser thế hệ cũng không hỗ trợ đầy đủ định dạng này
Định dạng GIF chỉ nên được sử dụng đối với các bức ảnh có kích thước nhỏ hoặc đi kèm đồ họa đơn giản và chỉ dùng với ảnh động
Không nên sử dụng ảnh có định dạng BMP hoặc TIFF
Src Attribute
Khi bạn đã có ảnh được lưu dưới kích thước chính xác phù hợp nhất, điều thứ hai cũng phải đảm bảo rằng trong code cũng không có vấn đề gì xảy ra. Cụ thể như hãy tránh những src rỗng cho hình ảnh.
Cho dù với trường hợp không có nguồn nào hiển thị trong cặp dấu ngoặc kép, browser vẫn thực hiện một request tới tập tin của website hay là chính trang web đó. Điều này sẽ làm tăng những traffic không cần thiết cho server và thậm chí trường hợp xấu nhất có thể làm hỏng dữ liệu user.
Trước khi upload ảnh lên, bạn hãy dành thời gian để re-size và buộc phải sử dụng src attribute cho những URL chuẩn. Xem thêm bài viết: Cách làm web chạy nhanh hơn.
Hiện tại chúng tôi đang có chương trình khuyến mãi thiết kế web trọn gói được thiết kế logo miễn phí + tên miền + hosting + hướng dẫn quảng cáo seo tổng thể marketing online miễn phí. Hãy liên hệ chúng tôi để biết thêm chi tiết.
