Nếu trang web của bạn di chuyển giống như một trong những con lười trong DMV trong Zootopia, có nhiều cách bạn có thể khắc phục bất cứ điều gì đang làm chậm trang web. Tìm ra nguyên nhân gây ra vấn đề là một nửa cuộc chiến, vì vậy khi bạn đã xác định được nguyên nhân, ít nhất bạn sẽ có câu trả lời để giải quyết vấn đề.
Lưu trữ chất lượng thấp là thủ phạm rất có thể
Khi nói đến dịch vụ lưu trữ web, khái niệm chất lượng thấp không phải lúc nào cũng có nghĩa tương tự như trong các bối cảnh khác. Ví dụ: mức giá bạn trả cho dịch vụ lưu trữ không phải lúc nào cũng phản ánh chính xác chất lượng mà bạn có thể mong đợi. Cũng không phải mức độ phổ biến của dịch vụ hay mức độ nổi tiếng của thương hiệu.
Trên thực tế, một số thương hiệu lưu trữ phổ biến nhất lại là sự lựa chọn tồi tệ nhất, đơn giản vì có quá nhiều người đang sử dụng chúng. Nó phụ thuộc một chút vào chất lượng cơ sở hạ tầng của họ. Nếu họ đầu tư đúng mức vào công nghệ thì bạn có thể không gặp phải vấn đề đáng kể về hiệu suất. Mặt khác, bạn có thể đang chia sẻ một máy chủ với hàng trăm trang web khác và vấn đề đó sẽ tăng lên khi dung lượng lưu trữ đĩa tiếp tục tăng.
Vì vậy, trong tình huống đó, có thể chuyển sang một dịch vụ lưu trữ web nhỏ hơn, ít nổi tiếng hơn với công nghệ tốt có thể là lựa chọn tốt hơn. Làm điều này cũng có thể có nghĩa là bạn nhận được nhiều dịch vụ khách hàng cá nhân hơn, ở mức chất lượng cao hơn những gì bạn nhận được từ một gã khổng lồ. Điều này đáng để suy nghĩ và thật dễ dàng để kiểm tra bằng cách mua đăng ký một tháng trên máy chủ mới và đo điểm chuẩn hiệu suất so với trang web hiện tại của bạn.
Sử dụng phím F12 của bạn
Hầu hết các trình duyệt web đều được điều chỉnh để truy cập bảng điều khiển gỡ lỗi thông qua phím F12 và trình duyệt của bạn rất có thể không phải là một ngoại lệ. Và nói về các ngoại lệ, đó gần như là những gì bạn đang tìm kiếm, hay nói chính xác hơn là các lỗi trong mã JavaScript đang đưa ra các ngoại lệ và ảnh hưởng đến hiệu suất.
Bạn sẽ tìm thấy những lỗi này trong cả mã của riêng bạn và trong các thư viện mã đã nhập như jQuery. Chỉ vì jQuery lớn và phổ biến không có nghĩa là nó hoàn hảo. Đây là một ví dụ về loại điều bạn đang tìm kiếm:
Các lỗi được gắn cờ màu xanh lam chỉ là lỗi CSS và bạn thường có thể thấy những lỗi đó do số lượng các nhà phát triển làm mờ phải thực hiện khi xây dựng biểu định kiểu, đơn giản vì vẫn chưa có một tiêu chuẩn duy nhất nào được áp dụng trên tất cả các trình duyệt. Chúng thường không ảnh hưởng đến hiệu suất trừ khi bạn đang sử dụng nhiều hoạt ảnh hoặc hiệu ứng chuyển tiếp.
Nhưng lỗi được gắn cờ màu cam đó là lỗi JavaScript và không chỉ vậy, trong trường hợp này, đó là lỗi độc đắc vì nó đặc biệt cho chúng ta biết rằng lỗi cụ thể này sẽ khiến mã chạy rất chậm.
Nhận một số lời khuyên miễn phí từ Google
Bạn có biết Google có thể phân tích trang web của bạn miễn phí và cung cấp cho bạn các mẹo về cách khắc phục mọi sự cố không? Tất cả những gì bạn cần làm là truy cập trang Thông tin chi tiết về tốc độ trang của Google và nhập URL của trang bạn muốn phân tích.
Nó thực sự không thể dễ dàng hơn được nữa, mặc dù bạn có thể không nhất thiết muốn làm theo mọi lời khuyên của họ một cách tôn giáo. Hệ thống của Google rất giỏi trong việc tìm ra nguyên nhân có thể làm chậm trang của bạn nhưng một số cách khắc phục có thể không giải quyết được nhiều vấn đề như chúng tạo ra.
Lý tưởng nhất là bạn muốn thấy điểm số trên 85. Mặc dù không ai biết chắc chắn nhưng thời gian tải trang được nhiều người cho là có ảnh hưởng đáng kể đến thứ hạng trang của bạn trên Google. Đừng thất vọng nếu trang web của bạn không ở ngay trên đầu vùng xanh vì nhiều trang web lớn không đạt được điểm cao.
Một số ví dụ đáng chú ý bao gồm:
- http://bbc.com (70m/77d)
- http://cnn.com (47m/65d)
- http://whitehouse.gov (58m/56d)
- http://microsoft.com (49m/71d)
- http://apple.com (61m/72d)
- http://linux.com (33m/44d)
- http://ubuntu.com (69m/81d)
- http://linuxmint.com (59m/67d)
- http://youtube.com (53m/69d)
- http://facebook.com (49m/81d)
Không có ví dụ nào trong số này thực sự là một cái cớ để cho phép trang web của bạn hoạt động kém, nhưng chúng chứng minh rằng một trang web chậm chạp không nhất thiết đồng nghĩa với thất bại.
Sử dụng hình ảnh một cách chính xác
Nếu ai biết hình ảnh chính xác formats để sử dụng và khi nào thì đó phải là nhà thiết kế, phải không? Nhưng thật ngạc nhiên là có vẻ khá nhiều bạn không biết, hoặc khi biết thì bạn cho rằng điều đó không quan trọng. Vâng, đây là tin tức: nó luôn quan trọng.
Vấn đề này ngày càng gia tăng vì một kiểu mẫu nhất định đã được áp dụng làm tiêu chuẩn thực tế cho các trang web kinh doanh và đó là một xu hướng không có dấu hiệu chậm lại. Là một nhà thiết kế chuyên nghiệp, bạn có trách nhiệm với chính mình và khách hàng của mình để không rơi vào cái bẫy của những lối tắt thiết kế lười biếng.
Một trong những lối tắt đáng tiếc này là sử dụng hình ảnh PNG lớn cho các đơn vị anh hùng ở đầu trang (hoặc bất kỳ nơi nào khác, nhưng đó là nơi bạn thường tìm thấy chúng). Bây giờ, tất nhiên là bạn không bao giờ nên làm điều này, ngay cả khi bạn yêu cầu các phần trong suốt trong hình ảnh.
Dưới đây là những nguyên tắc cơ bản mà bạn nên ghi nhớ khi tạo ra kiệt tác đó:
- Sử dụng hình ảnh lớn một cách tiết kiệm nếu có
Hình ảnh lớn là một ý tưởng khủng khiếp vì hình ảnh càng lớn thì thời gian tải càng lâu. Bây giờ có một số kỹ thuật khác nhau mà bạn có thể sử dụng để làm cho hình ảnh lớn hoạt động hiệu quả hơn nhiều, nhưng trước khi chúng ta đi sâu vào vấn đề đó, hãy nói rằng hầu hết mọi lúc bạn nên sử dụng hình ảnh nhỏ hơn và lưu hình ảnh lớn khi chúng cần. thực sự cần thiết.
- Đặt giá trị PPI/DPI phù hợp
Tùy thuộc vào trình soạn thảo đồ họa bạn sử dụng, nó có thể hiển thị các giá trị cho PPI hoặc PPI. Cái sau tốt hơn vì nó cho biết trình soạn thảo đồ họa của bạn được thiết kế để sử dụng trên web thay vì in. Vấn đề với việc thay đổi PI trong một số phiên bản PhotoShop là chúng sẽ không chỉ điều chỉnh PI mà còn cả kích thước vật lý của hình ảnh của bạn. Đây không phải là vấn đề trong phiên bản PhotoShop mới nhất (sử dụng PPI), vì vậy nếu bạn đang sử dụng phiên bản cũ hơn thì đã đến lúc nâng cấp. Hoặc sử dụng GIMP thay thế.
- Cắt hình ảnh lớn
Đây là nơi phép thuật bắt đầu. Bạn sẽ thấy nhiều người nói với bạn rằng việc cắt lát hình ảnh của bạn không cải thiện thời gian tải vì bạn vẫn đang tải xuống cùng một số byte và bất kỳ sự cải thiện nào được nhận thấy chỉ là tâm lý. Những người đó đang sử dụng phiên bản cắt hình ảnh lười biếng nhất, vì vậy họ không biết những khả năng thực sự.
Sau khi cắt hình ảnh của bạn, bạn có cơ hội tối ưu hóa nó. Giả sử hình ảnh gốc có định dạng PNG format, giờ đây bạn có thể chuyển đổi mọi phần không trong suốt sang JPG formatvà tiết kiệm rất nhiều byte, để lại những phần yêu cầu độ trong suốt dưới dạng hình ảnh PNG.
Tiếp theo bạn có thể thử nghiệm với mức độ nén của từng loại trongdivilát kép cho đến khi lát đó được tối ưu hóa hoàn hảo. Hiệu quả tổng thể của việc tối ưu hóa này có thể giúp tiết kiệm hơn 50% so với hình ảnh ban đầu chưa được tối ưu hóa.
Video cũng có thể được tối ưu hóa
Nghệ thuật nén video phụ thuộc vào hai thứ: mục tiêu format và codec bạn sử dụng để mã hóa. Cái mà format bạn chọn phụ thuộc hoàn toàn vào nhu cầu của bạn. Nói chung, nếu bạn cần chất lượng cao, MP4 với mã hóa H.264 sẽ cho chất lượng tốt nhất ở mức nén cao, nhưng khi bạn không cần chất lượng cao đó, WebM và FLV cung cấp kích thước tệp nhỏ hơn. Phần mềm chỉnh sửa video của bạn có thể vẫn cung cấp FLV dưới dạng tùy chọn, nhưng bạn không nên sử dụng phần mềm này format.
Nếu bạn cần chất lượng DVD, MP4 với mã hóa H.264 sẽ mang lại kết quả tuyệt vời nhưng phải trả giá bằng việc tải xuống rất nhiều. Để truyền phát video, WebM cho khả năng nén tốt hơn nhiều. Vấn đề là không phải tất cả các hệ điều hành di động đều hỗ trợ WebM (chúng nên làm như vậy, nhưng dường như chúng có lý do điên rồ nào đó để không hỗ trợ, có thể tuân theo quy tắc vàng của nhà phát triển di động: bạn sẽ gây bất tiện và khiến khách hàng của mình bối rối nhiều nhất có thể).
Bạn có nên sử dụng codec MPEG-4 thay vì H.264 với video MP4 không? Nói chung là không, vì nó dẫn đến kích thước tệp lớn hơn ở cùng mức chất lượng. Nhưng nếu video của bạn có kích thước vật lý nhỏ và bạn muốn truyền video hoàn hảo để phát trực tuyến thì MPEG-4 là một codec tốt vì nó có tính năng sửa lỗi tích hợp để đảm bảo tính toàn vẹn của dữ liệu.
Còn WMV thì sao? Vâng đây là một trường hợp đặc biệt. Nó cho chất lượng video gần như tương tự như MP4, nhưng thậm chí còn có khả năng nén tốt hơn. Nhược điểm ở đây là người dùng Mac và iOS chỉ có thể xem video của bạn nếu họ sử dụng trình chuyển đổi video phần mềm trả phí, điều này gây ra độ trễ khi phát lại, đây chính xác là điều chúng tôi đang cố gắng tránh khi tối ưu hóa trang của mình.
Các tệp WMV không có bất kỳ vấn đề nào đối với người dùng Android, Windows hoặc Linux. Nhưng với 12.5% cộng đồng Internet sử dụng thiết bị Apple, bạn sẽ phải quyết định xem liệu điều đó có đáng để gây bất tiện cho họ hay không. Cá nhân tôi không khuyên bạn nên làm điều đó chỉ để có thời gian tải nhanh hơn.
Và cuối cùng, vì đó là video trên internet, nếu bạn không cho phép phát lại ở chế độ toàn màn hình hoặc rạp hát, hãy thu nhỏ kích thước vật lý của video xuống kích thước bạn sẽ hiển thị trên trang của mình và xem bạn có thể tiết kiệm được bao nhiêu byte .
Nhận xét Responses 0