Bạn có muốn tăng tốc độ trang web WordPress của bạn? Bạn muốn biết các mẹo tối ưu hóa WordPress có thể giúp bạn giảm thời gian tải trang web của mình? Trong bài này, chúng tôi sẽ chỉ cho bạn cách tăng tốc WordPress bằng cách chia sẻ cách chúng tôi tối ưu hóa trang List25 của chúng tôi để tăng hiệu suất.
Có thể bạn đã từng nghe WordPress tốc độ rất quan trọng cho SEO. Trang web nhanh hơn có mức độ tương tác của người dùng tốt hơn, số lần xem trang nhiều hơn và doanh thu tốt hơn. Trong một nghiên cứu trường hợp strangeloop, họ nhận thấy rằng sự chậm trễ một giây có thể khiến bạn mất 7% doanh thu, số lần xem trang ít hơn 11% và sự hài lòng của khách hàng giảm 16%.
Vậy làm thế nào để bạn thực sự đẩy nhanh WordPress?
Vâng, thay vì chỉ chia sẻ danh sách các mẹo tốc độ, chúng tôi quyết định làm một nghiên cứu tình huống đầy đủ để cho bạn thấy kết quả từ trang web List25 của chúng tôi cùng với cách chúng tôi hoàn thành tất cả.
Tổng quan
List25 là một blog giải trí bắt đầu bởi người sáng lập Syed Balkhi. Trang web này có hơn 1,5 triệu người đăng ký và kênh YouTube đã có trên một phần tư Tỷ lượt xem.
Nội dung trên trang web chủ yếu là hình ảnh và video chiếm nhiều băng terabyte, vì vậy việc tối ưu hóa tốc độ tổng thể là rất quan trọng để chúng tôi giảm chi phí, giảm việc từ chối trang và cải thiện thời gian trên trang web.
Trước khi chúng tôi bắt đầu tối ưu hóa, trang chủ của chúng tôi mất 2,21 giây để tải theo Pingdom. Sau khi chúng tôi đã hoàn tất, thời gian tải trang của chúng tôi đã giảm xuống còn 1,21 giây (Nhanh hơn 45%) .
Trong quá trình tối ưu hóa này, chúng tôi đã có thể đẩy nhanh thời gian đáp ứng máy chủ của chúng tôi, cải thiện tốc độ thực hiện của chúng tôi, giảm số lượng yêu cầu và cải thiện thời gian tải.
Chúng ta hãy xem các kỹ thuật tối ưu hóa đã giúp chúng tôi tăng tốc độ trang WordPress của chúng tôi.
WordPress Hosting
Có một máy chủ web tốt là rất quan trọng cho tốc độ trang web của bạn. Khi trang web của chúng tôi trở nên phổ biến hơn, chúng tôi chỉ đơn giản vượt qua công ty lưu trữ trước đây của chúng tôi (HostGator).
Máy chủ của họ đơn giản không thể quản lý một trang web có kích thước này vì List25 nhận hàng chục triệu lượt xem trang. HostGator là rất tốt cho các trang web nhỏ hơn, nhưng không cho một cái gì đó có độ lớn này.
Chúng tôi đã xem xét các tùy chọn lưu trữ WordPress được quản lý khác nhau và cuối cùng kết thúc bằng cách sử dụng SiteGround để lưu trữ List25 vì họ cung cấp giá trị tổng thể tốt nhất cho trang web này.
Bạn có thể thấy sự cải thiện trong thời gian đáp ứng máy chủ của chúng tôi ngay lập tức. Chúng tôi đã đi từ thời gian đáp ứng tối đa 442ms đến 172ms. Đó là sự cải thiện 256%.
Siteground đã xây dựng bộ tăng cường hiệu suất cho các nền tảng cụ thể như WordPress, Joomla và Magento. Dựa trên nền tảng của trang web của bạn, họ đặc biệt tối ưu hóa máy chủ của bạn mà kết quả trong một hiệu suất tổng thể tốt hơn.
Chúng tôi đã viết một bài báo về khi nào bạn nên chuyển web lưu trữ mà nói về 7 chỉ số chính.
địa điểm
Cache Plugin
Khi nói đến tăng tốc WordPress, bộ nhớ cache là yếu tố quan trọng thứ hai sau khi lưu trữ web của bạn.
Thông thường, khi một người truy cập đến trang WordPress của bạn, máy chủ của bạn vượt qua yêu cầu PHP tới Cơ sở dữ liệu MySQL tìm thấy trang đang được yêu cầu, tạo ra nó ngay lập tức, và hiển thị nó cho khách truy cập. Việc này chiếm rất nhiều nguồn lực. Khi bạn có bộ nhớ đệm, nó tiết kiệm thời gian và nguồn lực.
Sơ đồ dưới đây nêu bật quá trình. Trong các thuật ngữ dành cho người bình thường, hãy nghĩ đến bộ nhớ đệm như tạo một phím tắt trên máy tính để bàn giúp bạn nhanh hơn.
Đối với trang List25, chúng tôi đang sử dụng SiteGround SuperCacher, một plugin họ được xây dựng đặc biệt cho khách hàng của họ. Thêm vào đó, họ đã bổ sung các tùy chọn bộ nhớ đệm động tiên tiến bằng cách sử dụng Varnish (một phần của booster tăng cường).
Nếu bạn không ở trên trang web, đừng lo lắng. Bạn có thể thiết lập bộ nhớ cache trên trang web WordPress bằng cách sử dụng một trong nhiều giải pháp có sẵn như W3 Total Cache hoặc WP Super Cache.
chúng tôi đang sử dụng W3 Total Cache cung cấp một số tùy chọn lưu trữ trang, bộ nhớ đệm cơ sở dữ liệu và bộ nhớ đệm đối tượng.
Khi nhiều công ty lưu trữ chuyên về WordPress, chúng tôi sẽ thấy các giải pháp lưu trữ tùy chỉnh khác được xây dựng. Riêng và WPEngine cũng cung cấp hệ thống bộ nhớ đệm được xây dựng riêng của họ.
CDN
Mạng phân phối nội dung (CDN) có thể giúp bạn tăng tốc độ trang web của bạn. Chúng ta đã sử dụng MaxCDN từ đầu List25, nên phần này không thay đổi.
Chúng tôi đã viết một bài báo đầy đủ về một CDN là gì và tại sao bạn cần nó cùng với một Infographic.
CDN cho phép chúng tôi phục vụ tất cả CSS, Javascript và hình ảnh từ Mạng Giao hàng Nội dung. Điều này hoạt động bằng cách xác định vị trí của khách truy cập trang web và phân phát nội dung từ máy chủ gần khách nhất.
Nếu bạn không ở trong thị trường cho một giải pháp CDN cao cấp thì bạn có thể sử dụng Cloudflare.
Kết hợp các tệp để giảm yêu cầu HTTP
Khi bạn thêm nhiều plugin, họ thường thêm các tệp JavaScript và CSS của riêng họ. Mỗi tệp bổ sung là một yêu cầu HTTP mới.
Chúng tôi đã kết hợp các tệp JavaScript và CSS này vào một tệp đơn cho mỗi tệp để giảm yêu cầu và tăng thời gian tải. Bạn có thể xem thêm chi tiết về việc này như thế nào WordPress plugins ảnh hưởng đến thời gian tải.
Mặc dù bây giờ chúng tôi đang tải một số chức năng nhỏ mà chúng tôi không cần vào một phần cụ thể của trang web, mã này sẽ được lưu trữ trên CDN và kết quả cho thấy ít yêu cầu về các tệp cung cấp hiệu suất tốt hơn so với tải một số tệp JS nhỏ hơn.
Đây là điều bạn phải làm thường xuyên vì plugin bạn sử dụng thay đổi giờ phụ trội.
Hình ảnh Sprites
Chúng tôi đã sử dụng một hình ảnh sprite kết hợp nhiều biểu tượng xã hội và trang web vào một hình ảnh duy nhất:
Bất cứ khi nào chúng ta cần hiển thị một biểu tượng cụ thể, chúng ta sẽ sử dụng CSS để:
- Tải hình ảnh dưới dạng hình nền
- Xác định độ rộng và chiều cao của phần tử chúng ta cần biểu tượng cho
- Đặt vị trí nền cho hình ảnh của chúng tôi để tải biểu tượng cần thiết
Ví dụ: để tải các biểu tượng phương tiện truyền thông xã hội của thanh bên, chúng tôi sử dụng:
li.widget_social_icons ul li {float: left; chiều rộng: 36px; chiều cao: 36px; lề: 0 10px 10px 0; đệm: 0; nền: url (../ images / sprite.png) không lặp lại; }
li.widget_social_icons ul li.twitter {background-position: 0 -50px; }
li.widget_social_icons ul li.facebook {background-position: -36px -50px; }
li.widget_social_icons ul li.pinterest {background-position: -72px -50px; }
li.widget_social_icons ul li.google {background-position: -108px -50px; }
li.widget_social_icons ul li.rss {background-position: -144px -50px; }
li.widget_social_icons ul li.youtube {background-position: -180px -50px; }
Các vị trí nền , chiều rộng và Chiều cao Thuộc tính CSS giúp chúng tôi nhắm mục tiêu phần cụ thể của hình ảnh mà chúng ta muốn xuất ra:
Do đó, chỉ yêu cầu đầu tiên cho tệp hình ảnh này đang sử dụng băng thông. Các yêu cầu tiếp theo cho CDN cho hình ảnh sẽ dẫn đến tải phiên bản lưu trữ (điển hình là địa phương), cũng như chỉ cần yêu cầu một hình ảnh duy nhất với 6 biểu tượng xã hội khác nhau.
Bằng cách kết hợp JavaScript, CSS và hình ảnh lại với nhau, chúng tôi đã giảm đáng kể số lượng yêu cầu.
Mã số Minification
Mã minification liên quan đến việc loại bỏ khoảng trắng và dòng ngắt để giảm kích thước tập tin làm cho nó nhanh hơn để tải khi được yêu cầu.
Đối với List25, chúng ta sử dụng SCSS, một bảng định kiểu dựa trên cú pháp (Giới thiệu về Sass). Điều này cho phép chúng ta cấu trúc các tệp CSS của chúng tôi trên nhiều lĩnh vực phát triển trong cách bố trí dễ đọc:
Chúng tôi sử dụng CodeKit để biên dịch các tệp SCSS vào một tệp CSS duy nhất. CodeKit cũng loại bỏ các khoảng trống và đường kẻ ngắt dòng để đảm bảo tệp là nhỏ nhất có thể:
Kết quả là chúng tôi có thể giảm kích thước tệp CSS của chúng tôi xuống 28%.
Tối ưu hoá Hình ảnh
Chúng tôi đã tối ưu hóa hình ảnh của chúng tôi ở hai khu vực: chủ đề WordPress và nội dung tải lên của chúng tôi.
Đối với chủ đề WordPress của chúng tôi, chúng tôi đã sử dụng CodeKit để đảm bảo rằng tất cả các hình ảnh đã được nén losslessly. Điều này đảm bảo rằng kích thước tệp càng nhỏ càng tốt, không mất chất lượng.
Chúng tôi cũng đã giáo dục tất cả các tác giả của chúng tôi về tầm quan trọng của việc lưu hình ảnh tối ưu hóa cho web.
Chia sẻ xã hội không Javascript
Chia sẻ trên mạng xã hội cho List25 thực sự quan trọng giống như bất kỳ trang web nào khác. Tuy nhiên, các plugin chia sẻ trên mạng xã hội có thể làm chậm đáng kể trang web của bạn.
Trong khi tích hợp bốn kịch bản mạng xã hội này không ảnh hưởng đến thời gian tải trang trong các thử nghiệm của chúng tôi, nó rõ ràng làm chậm lại trang web khi xem trên thiết bị di động. Các nút chia sẻ trên mạng xã hội sẽ mất vài giây để xuất hiện, mặc dù các tập lệnh tải không đồng bộ, dẫn đến nội dung bài đăng di chuyển xung quanh khi các nút được tải vào chế độ xem.
Để khắc phục vấn đề này, chúng tôi chuyển sang một giải pháp Javascript (gần như). Mỗi nút chia sẻ của mạng xã hội được hiển thị bởi WordPress Plugin tùy chỉnh của chúng tôi và Javascript của chủ đề chỉ được sử dụng để mở cửa sổ trình duyệt web khi người dùng nhấp vào nút.
Tuy nhiên, chúng tôi vẫn muốn hiển thị tổng số cổ phần mà một bài đăng đã có trên tất cả các mạng xã hội. Để làm điều này, chúng tôi đã sản xuất một WordPress Plugin nhỏ để truy xuất và lưu trữ bộ đếm số chia sẻ xã hội từ mỗi mạng xã hội vào bảng meta bài. Những tính này được cập nhật 24 giờ một lần, đảm bảo các truy vấn tốn thời gian không chạy liên tục.
Bạn có thể sử dụng một API như Sharre hoặc dissect the Floating Social Bar để tuỳ biến.
Sử dụng RUM (Theo dõi Người dùng Thực tế) của Pingdom, plugin chia sẻ mới này đã giảm thời gian tải trang ‘thật’ từ 6 giây xuống còn hơn 2 giây. Nó cũng đảm bảo rằng chúng tôi giảm số lượng các yêu cầu được thực hiện cho các tập lệnh của bên thứ ba.
Kết quả
Chúng tôi cải thiện đáng kể tốc độ trang web của chúng tôi. Thời gian tải mất từ 2.2 giây đến 1.22 giây.
Chúng tôi đã có thể làm giảm đáng kể thời gian đáp ứng của máy chủ.
Điều này giúp giảm thời gian để tải xuống một trang của Google bot giúp tốc độ thu thập dữ liệu của chúng tôi.
Tỷ lệ thoát chung của chúng tôi đã giảm 7% vì trang web đang tải nhanh hơn và bằng cách chuyển máy chủ chúng tôi đã có thể giảm lỗi máy chủ.
Như bạn có thể tưởng tượng với tỷ lệ thoát thấp hơn, thời gian dành cho trang web cũng tăng lên hơn 30 giây.
Phần kết luận
Vì bạn có thể thấy một trang web tải nhanh hơn có thể cải thiện sự tương tác của khách truy cập. Các kỹ thuật chúng tôi đã thảo luận đã đề cập đến một loạt các cải tiến cơ bản và trung gian mà bạn có thể thực hiện để tối ưu hóa trang web WordPress của mình.
Chúng tôi hy vọng bài viết này đã giúp bạn tăng tốc độ trang WordPress của bạn. Bạn cũng có thể muốn xem bài viết của chúng tôi khoảng 20 phải có bổ sung WordPress cho năm 2015.