Cách tối ưu hóa bố cục trang web của bạn với Elementor

Muốn biết cách tối ưu hóa bố cục trang web của bạn với Elementor ?

Tối ưu hóa hiệu suất trang web là một trong những khía cạnh quan trọng nhất của trải nghiệm người dùng. Trang web tải chậm có thể khiến bất kỳ người dùng nào thất vọng, thường dẫn đến Tỷ lệ thoát cao có thể ảnh hưởng xấu đến sự thành công của doanh nghiệp của chúng tôi.

Hiệu suất của trang web có thể bị ảnh hưởng bởi nhiều yếu tố, ví dụ: kích thước hình ảnh lớn, cấu hình máy chủ, quá nhiều plugin, trong số các yếu tố khác.

Hiệu suất trang web là một trong những giá trị mạnh nhất của chúng tôi với tư cách là người tạo web. Đó là lý do tại sao chúng tôi tạo ra khóa học này gồm 5 phần.

Bây giờ bạn có thể học cách tạo bố cục và bài đăng bằng cách sử dụng các kỹ thuật tối ưu. Kiến thức này sẽ đảm bảo rằng trang web của bạn sẽ không bao gồm các phần, cột hoặc widget thừa không cần thiết. Chúng tôi cũng sẽ khám phá một số tính năng tiện ích con được tích hợp sẵn để cải thiện thời gian tải.

Đến cuối hướng dẫn này, bạn sẽ hoàn toàn sẵn sàng để tối ưu hóa hiệu suất của mọi trang web Elementor bạn tạo ra và ngay lập tức gặt hái thành quả.

Bài học 1: Các phương pháp hay nhất về tối ưu hóa bố cục

Trong bài học đầu tiên, chúng tôi sẽ đề cập đến cách hiệu quả nhất để tạo trang và bài đăng của bạn trong trình chỉnh sửa Elementor. Chúng ta thường thấy việc sử dụng quá nhiều phần, cột, phần bên trong và tiện ích, trong khi có thể đạt được cùng một bố cục bằng cách sử dụng ít phần tử hơn.

Việc sử dụng quá nhiều phần tử sẽ làm chậm hiệu suất trang web của bạn, vì vậy hãy cùng tìm hiểu và tìm hiểu cách xây dựng trang web bằng Elementor theo cách hiệu quả nhất.

Chúng tôi sẽ đề cập đến các chủ đề sau:

• Xem xét kỹ hơn cấu trúc của một trang chính xác
• Xem và kiểm tra hiệu suất trang web của bạn
• Tối ưu hóa đầu trang, chân trang và nội dung trang của bạn
• Ví dụ về các phương pháp bố cục trang web tốt và xấu
• Sử dụng đúng các widget, định vị và phong cách toàn cầu
• Mẹo tránh bị lag tải, cải thiện SEO và tăng thời gian tải
• Tối ưu hóa khả năng tiếp cận
• Giảm số lượng phần tử DOM
• Và nhiều hơn nữa !

Để hiểu rõ hơn về các bố cục tối ưu trong Elementor, chúng ta sẽ khám phá một mẫu Elementor cho thấy các phần, cột và tiện ích con bị lạm dụng phổ biến. Vào cuối bài học này, chúng ta sẽ xây dựng lại hoàn toàn toàn bộ trang này bằng cách giảm số lượng cột và widget. Trang đầu tiên của chúng tôi bao gồm chín phần, 31 cột, năm phần bên trong và 44 widget.

Đến cuối hướng dẫn, trang được tối ưu hóa của chúng tôi sẽ giảm xuống còn sáu phần, bảy cột và 16 tiện ích con.

Chúng tôi sẽ sử dụng ánh sáng miễn phí Xin chào chủ đềvà chúng tôi sẽ tạo lại từng phần của mẫu và cải thiện hiệu suất tổng thể của trang web bằng cách sử dụng các phương pháp hay nhất.

Kiểm tra các phương pháp không tốt

Trước khi đi sâu vào tối ưu hóa bố cục trang web, hãy chạy thử nghiệm trên trang của chúng tôi để hiểu đầy đủ điều gì sẽ xảy ra khi ai đó truy cập trang web của chúng tôi. Khi tất cả các tối ưu hóa của chúng tôi đã được thực hiện, chúng tôi sẽ lặp lại kiểm tra và so sánh kết quả.

Bước 1: Xác minh trang web của bạn trong cửa sổ ẩn danh

• Mở cửa sổ mới ở "Chế độ ẩn danh" và nhập URL của trang web bạn đang kiểm tra.

Bước 2: Xác minh rằng bạn đang sử dụng đường dẫn URL trực tiếp

Nếu bạn không chắc chắn về liên kết trang của mình, bạn có thể dễ dàng tìm thấy nó bằng cách truy cập bảng điều khiển WP của bạn:

• Nhấp vào "Trang" để xem tất cả các trang trên trang web của bạn.
• Di con trỏ qua trang của bạn và nhấp vào tùy chọn "Xem". Điều này sẽ đưa bạn trực tiếp đến trang của bạn.
• Sao chép và dán URL này vào cửa sổ ẩn danh và khi trang web tải xong, bạn đã sẵn sàng để kiểm tra nó!

Kiểm tra & Xem Kết quả Hiệu suất

Bước 1: Kiểm tra kết quả hoạt động

Bạn có thể đã sử dụng Công cụ dành cho nhà phát triển Chrome trước đây.

Nếu không, để kiểm tra và hiển thị nội dung HTML và CSS trên trang của bạn:

• Nhấp chuột phải vào bất kỳ đâu trên trang của bạn và nhấp vào chọn “Kiểm tra”. Bạn sẽ thấy một số tab nơi bạn có thể đọc HTML và CSS của mình, tìm lỗi, nhận kết quả SEO và chạy các thử nghiệm khác nhau.
• Chọn tab Mạng và nhấn nút cmd hoặc ctrl + R để tải kết quả.

Như bạn có thể thấy, bố cục hiện tại của chúng tôi mất 2,88 giây để tải và thực hiện 81 yêu cầu.

Bước 2: Xem Kết quả Hiệu suất

• Chuyển sang tab Lighthouse, nơi chúng tôi có thể chạy báo cáo kiểm tra trên trang của mình.

Điều này sẽ cung cấp cho chúng tôi thêm thông tin về hiệu suất hiện tại của trang.

• Chọn "Tạo Báo cáo". Sau một lúc, báo cáo của bạn sẽ xuất hiện.

Chúng tôi hiện đang nhận được xếp hạng hiệu suất là 73/100, xếp hạng mà chúng tôi chắc chắn có thể tiếp tục.

Lý tưởng nhất là chúng tôi muốn tất cả những con số này có màu xanh lục. Bây giờ, hãy chuyển sang tối ưu hóa trang của chúng tôi và cải thiện statistiques.

Hãy nhớ rằng sau mỗi bước tối ưu hóa mà chúng tôi thực hiện, chúng tôi có thể thực hiện một số phương pháp hay nhất từ ​​các thay đổi và ghi nhớ chúng cho các trang web chúng tôi tạo trong tương lai.

Tối ưu hóa các phần tử trang

Bước 1: Tối ưu hóa tiêu đề

Hãy bắt đầu với cú đội đầu.

Như bạn có thể thấy trong thiết kế này, tiêu đề được tạo với ba cột.

Trong cột đầu tiên, biểu trưng của chúng tôi bao gồm hai tiện ích:

1. Un Tiện ích hình ảnh hiển thị tệp hình ảnh .png của biểu trưng của chúng tôi
2. Một tiện ích tiêu đề.

Trong cột thứ hai, menu tiêu đề bao gồm Tiện ích Menu Điều hướng của chúng tôi.

Cột thứ ba chứa:

1. Một Widget Phần bên trong (kiểm soát vị trí của Widget Biểu tượng).
2. Chi tiết liên hệ của chúng tôi cho Header

Hãy xem cách chúng tôi có thể giảm thiểu số lượng phần, tiện ích và phần ở đây.

Bước 2: Tạo tiêu đề mới

Cột 1:

• Tạo 1 phần chỉ với 1 cột.
• Thêm Tiện ích biểu trưng trang web và kéo nó vào phần.

Các phương pháp hay nhất cho hình ảnh:

• Cung cấp cho mỗi tệp hình ảnh trên trang web của bạn một tiêu đề và văn bản thay thế có liên quan trong thư viện phương tiện.

Điều này sẽ cải thiện khả năng truy cập trang và xếp hạng công cụ tìm kiếm của bạn. Trong biểu trưng mà chúng tôi sử dụng ban đầu, tiêu đề không liên quan đến hình ảnh thực tế và không có văn bản thay thế.

• Xác định kích thước của hình ảnh bên trong tiện ích.

Điều này cho phép trang được bố trí với không gian thích hợp trước khi tải hình ảnh, tránh độ trễ bố cục (một yếu tố được đo bởi trình duyệt).

Trong ví dụ mà chúng ta đang làm việc cùng nhau, hãy giải quyết vấn đề này bằng cách chuyển đến tab Kiểu và đặt chiều rộng hình ảnh thành 200px.

Cột 2

Quay lại bảng tiện ích:

• Kéo và thả tiện ích menu điều hướng bên dưới biểu trưng
• Đặt con trỏ thành "Không có"
• Chuyển đến tab "Kiểu" và thêm phông chữ tùy chọn của bạn (sao cho phù hợp với thiết kế trước đây của chúng tôi)

Các phương pháp hay nhất để tạo kiểu tổng thể:

• Tránh sử dụng nhiều hơn 2 phông chữ khác nhau bao gồm nhiều trọng số (Phông chữ toàn cầu).
• Tránh chọn các màu khác nhau cho từng mục bằng công cụ chọn màu (Màu sắc toàn cầu).
• Cải thiện tốc độ tải trang web của bạn bằng cách tạo ra ít truy vấn hơn (phông chữ tổng thể).
• Lặp lại mã không cần thiết hai lần (màu toàn cục).
• Duy trì tính nhất quán và kiểm soát mô hình của bạn (phong cách tổng thể).

Phông chữ toàn cầu:

Điều này có thể được thực hiện bằng cách sử dụng chức năng Phông chữ Toàn cầu:

• Chuyển đến tab "Kiểu" và thêm phông chữ ưa thích của bạn (sao cho phù hợp với thiết kế trước đây của chúng tôi) bằng cách chọn một phông chữ, thực hiện một thay đổi nhỏ và di chuột qua biểu tượng dấu cộng.
• Nhấp vào biểu tượng dấu cộng và chọn họ phông chữ bạn cần
• Lưu các kiểu bạn sẽ sử dụng trong mẫu dưới dạng phông chữ chung

Sau đó, bạn có thể sử dụng kiểu này trên mọi tiện ích con mà bạn tạo.

Màu sắc toàn cầu:

Phương pháp tương tự có thể được sử dụng cho các màu tổng thể của bạn:

• Nhấp vào "Toàn cầu"
• Di chuột qua bộ chọn màu và nhấp vào nó
• Chọn một màu và trỏ vào biểu tượng dấu cộng
• Nhấp vào "Toàn cầu" >> chọn "Hiệu trưởng"

Khi bạn đã hoàn thành việc đó, màu sẽ được lưu trong bảng màu của mẫu, vì vậy bạn có thể chọn nó từ danh sách Màu toàn cục của mình bất cứ khi nào bạn cần cho một mục hoặc tiện ích.

Trước khi chúng ta tiếp tục với tiêu đề của mình, hãy đặt phần đệm dọc thành XNUMX.

Bước 3: Chỉnh sửa tiêu đề

Cột 3

• Đi tới bảng "Tiện ích"
• Kéo Tiện ích Danh sách Biểu tượng dưới menu.
• Xóa các mục danh sách bổ sung
• Thêm văn bản của bạn
• Chọn biểu tượng bạn chọn
• Chuyển đến tab "Kiểu"
• Xác định màu tổng thể và phông chữ bạn chọn

Bây giờ chúng ta cần phải sửa một điều nữa - ba phần tử tiêu đề hiện đang xếp chồng lên nhau và không thẳng hàng với nhau. Chúng ta có thể giải quyết vấn đề này bằng cách thay đổi chiều rộng của mỗi phần tử thành kích thước thực của nó, để nó không chiếm hết không gian trong cột.

Để giải quyết vấn đề này:

• Chọn tiện ích biểu trưng Trang web >> tab 'Nâng cao'
• Chọn "Định vị" và đặt chiều rộng của nó thành "Nội tuyến"

Lặp lại bước chính xác này cho tiện ích Menu Điều hướng và cho tiện ích Danh sách Biểu tượng.

Bây giờ tất cả các phần tử tiêu đề đã thẳng hàng, tất cả những gì còn lại là đặt chúng một cách chính xác.

Xác định vị trí của cột bằng các phần tử nội tuyến

• Chọn cột của bạn >> chuyển đến tab "Bố cục"
• Trong "Căn chỉnh theo chiều dọc", chọn "Dưới cùng"
• "Trong Căn chỉnh ngang" chọn "Khoảng cách giữa"

Chọn vị trí căn chỉnh "Khoảng cách giữa" tiện ích con đầu tiên và cuối cùng ở cả hai đầu, tạo khoảng cách bằng nhau giữa tất cả các tiện ích con khác.

Tuy nhiên, tiện ích con đầu tiên và tiện ích con cuối cùng có chiều rộng khác nhau, vì vậy không gian bằng nhau có thể không phải lúc nào cũng căn giữa tiện ích con bên trong của chúng ta.

Chúng tôi có thể giải quyết vấn đề này bằng cách điều chỉnh lợi nhuận:

• Chọn tiện ích Trình đơn điều hướng >> tab “Nâng cao”
• Bỏ nhóm lề và xóa khoảng cách có giá trị âm

Bước 4: Làm cho tiêu đề đáp ứng

Bây giờ chúng ta hãy xem phiên bản hiện tại của trang web của chúng tôi trông như thế nào trên thiết bị di động.

Các phương pháp hay nhất cho khả năng phản hồi trên thiết bị di động:

• Đơn giản hóa thiết kế của bạn và nghĩ cách làm cho các phần giống nhau trở nên phản hồi nhanh, để tránh sử dụng gấp đôi lượng mã sẽ ảnh hưởng đến tốc độ trang của bạn.

Như bạn thấy trong tiêu đề này - Bạn thường thấy phần tương tự được thiết kế lại đặc biệt cho máy tính bảng và thiết bị di động. Đây là những gì chúng ta thấy ở đây: hai phiên bản của thiết kế đã được tạo: một phiên bản dành cho máy tính để bàn và một phiên bản dành cho thiết bị di động.

Thay vào đó, khi thiết kế và mã của bạn đáp ứng, tốc độ trang của bạn sẽ cải thiện vì nó sẽ sử dụng ít mã hơn.

Hãy xem cách chúng tôi có thể đạt được điều này, bằng cách sử dụng cài đặt "Chiều rộng tùy chỉnh" cho các tiện ích và phần tử của chúng tôi.

Đặt chiều rộng tùy chỉnh cho máy tính bảng

• Nhấp vào 'Trình đơn điều hướng' >> tab 'Nâng cao'
• Chọn "Định vị" >> đặt chiều rộng thành "Tùy chỉnh".
• Chọn "%" >> cung cấp cho tiện ích có cùng chiều rộng (tính theo phần trăm) của không gian trống xung quanh nó.
• Nhấp vào tab “Nội dung” >> “Chuyển sang Căn chỉnh” >> chọn “Phải”.

Điều này cho phép bạn căn chỉnh menu chuyển đổi ở bất kỳ đâu trong chiều rộng của tiện ích.

Bây giờ chúng ta hãy hoàn thành việc tùy chỉnh menu chuyển đổi.

• "Nội dung" >> Nhấp vào nút chuyển đổi "Toàn chiều rộng" và đặt nó thành "Có".
• "Kiểu" >> Xóa nền bằng cách kéo thanh "Bộ chọn màu" sang trái.

Bây giờ chúng ta hãy xem mọi thứ trông như thế nào trên màn hình di động.

Xác định chiều rộng tùy chỉnh cho thiết bị di động

Trong trường hợp này, chúng tôi sẽ giữ ba widget tiêu đề bên trong khung nhìn. Nhưng hãy nhớ rằng đối với một số trang web, có thể hợp lý hơn nếu bỏ qua một số phần tử nhất định khỏi tiêu đề khi xem trên thiết bị di động hoặc máy tính bảng.

Trong trường hợp này, điều xảy ra với tiêu đề của chúng tôi khi hiển thị trên thiết bị di động là Menu Điều hướng và các tiện ích Biểu trưng không thể vừa với một hàng.

Để giải quyết vấn đề này:

Định vị của Menu điều hướng

• Nhấp vào "Trình đơn điều hướng" >> tab "Nâng cao"
• Chọn "Định vị" >> đặt chiều rộng thành "Tùy chỉnh"
• Chọn "%" >> Cung cấp cho tiện ích có chiều rộng 30% để nó vừa với biểu trưng của chúng tôi

Định vị danh sách biểu tượng

• Nhấp vào "Danh sách biểu tượng" >> tab '' Nâng cao '
• Chọn "Điền" >> Bỏ nhóm các giá trị
• Thêm đệm 12px vào "TOP"

Bạn có thể tin được không?

Tiêu đề của chúng tôi ban đầu được sử dụng 2 phần, 12 widget và 10 cột. Bây giờ tiêu đề của chúng tôi sử dụng 1 phần, 3 widget và 1 cột.

Và kết quả là như nhau!

Bước 5: Tối ưu hóa phần Anh hùng

Hãy chuyển sang phần tiếp theo của trang web của chúng tôi: phần anh hùng

Các phương pháp hay nhất cho phần anh hùng:

• Đảm bảo rằng văn bản phần anh hùng của bạn có thể dễ dàng nhìn thấy, đặc biệt là khi nó có hình nền.

Kiểm soát vị trí của tiện ích con trong một cột

Một sai lầm phổ biến mà chúng tôi thấy trong trình chỉnh sửa Elementor là sử dụng thêm cột và khoảng trắng để kiểm soát vị trí của tiện ích con.

Trong mô hình ví dụ của chúng tôi, hình ảnh anh hùng bao gồm một phần với một hình ảnh nền. Tiêu đề và văn bản được đặt theo chiều ngang, sử dụng hai cột. Ngoài ra còn có một miếng đệm bên trong phần để tạo khoảng cách giữa các phần tử theo chiều dọc.

Hãy xem cách chúng ta có thể tạo ra cùng một thiết kế chỉ với một phần:

• Xóa cột thừa ở bên phải văn bản.
• Loại bỏ miếng đệm.

Thay vào đó, để định vị văn bản chính của chúng tôi ở nơi chúng tôi muốn, chúng tôi sẽ sử dụng các tùy chọn căn chỉnh cột:

• Chọn cột.
• Đặt "Căn chỉnh dọc" thành "Giữa".
• Chuyển đến tab "Nâng cao".
• Chọn "Điền" >> Bỏ nhóm các giá trị
• Đặt Phần đệm bên phải thành 50%.

• Chọn phần.
• Chọn "Chiều cao tối thiểu" >> đặt nó thành 80.

Đã sửa độ tương phản giữa văn bản và nền

Điều quan trọng là mọi trang web phải có độ tương phản tốt giữa văn bản và nền. Thông tin không thể đọc được ảnh hưởng đến điểm số trang web của bạn và cũng có thể khiến khách truy cập bỏ đi. Dù bằng cách nào, văn bản phải luôn rõ ràng, dễ đọc.

Có một số cách để cải thiện độ rõ ràng của phần có nền là hình ảnh màu (như chúng ta thấy trong mẫu này):

• Nhấp vào tiêu đề của bạn.
• Chuyển đến tab "Kiểu" >> Chọn "Bóng văn bản".

Điều này sẽ cải thiện khả năng đọc của văn bản bằng cách làm cho nó nổi bật so với hình nền của nó.

Một cách khác để làm cho văn bản của bạn rõ ràng hơn là sử dụng lớp phủ.

• Chọn phần >> tab 'Kiểu' >> 'Lớp phủ nền'
• Chọn một trong những màu tổng thể của bạn và thử với độ mờ cho đến khi bạn nhận được kết quả mong muốn

Bước 6: Tối ưu hóa phần với các hộp biểu tượng

Bây giờ chúng ta hãy chuyển sang phần tiếp theo của chúng ta, nơi chúng ta hiện có một phần bên trong với bốn cột. Hiện tại, mỗi cột bao gồm ba tiện ích: Tiện ích Hình ảnh, Tiện ích Tiêu đề và Tiện ích Trình soạn thảo Văn bản.

Hãy xem cách chúng tôi có thể đơn giản hóa phần này để cải thiện hiệu suất của nó.

Nội dung của khu vực biểu tượng

• Chọn nút »Hộp Biểu tượng Tiện ích« trong menu tiện ích và kéo nó vào cột
• Chọn "Hộp biểu tượng"
• Trỏ vào hình ảnh biểu tượng
• Chọn "Tải xuống SVG" **
• Chèn biểu tượng tùy chỉnh của bạn

** Lưu ý: Huy hiệu là tệp SVG. Nếu bạn chưa có, hãy chuyển đến bảng điều khiển WordPress, sau đó đi tới Elementor >> Settings. Bạn sẽ cần bật Bật Tải xuống Tệp Chưa lọc.

• Nhập "tiêu đề" của bạn
• Nhập "Mô tả" của bạn
• Chọn "Kiểu" >> Chọn một màu tổng thể
• Chọn "Kích thước" và kéo thanh đến kích thước bạn chọn
• Chọn "Padding" và kéo thanh đến số lượng bạn chọn

Bước 8: Tối ưu hóa phần "Dịch vụ"

Bây giờ chúng ta sẽ xây dựng lại phần “Dịch vụ”, phần này hiện đang sử dụng hai cột, hai hình ảnh, tiện ích tiêu đề và tiện ích soạn thảo văn bản.

Hãy tạo cùng một thiết kế trong một phần mới, nhưng chỉ với một cột.

• Tạo một phần mới với một cột
• Trong "Bố cục" >> đặt "Chiều rộng nội dung" thành "Chiều rộng toàn bộ"
• Chọn "Hộp Hình ảnh Tiện ích" trong bảng tiện ích và kéo nó vào cột

(Chúng tôi sẽ có thể tích hợp tất cả nội dung của phần vào tiện ích con này)

• Nhập tiêu đề
• Nhập mô tả

Đối với hình ảnh, chúng tôi sẽ giữ nguyên thiết kế hiện tại mà chúng tôi đã sử dụng cho hình ảnh của mình.

• Chèn cùng một hình ảnh từ thư viện phương tiện
• Chuyển đến tab “Nội dung” >> Đặt “Vị trí hình ảnh” thành “Bên phải”

• Chuyển đến tab "Kiểu"
• Tăng khoảng cách giữa các phần tử
• Tăng "Chiều rộng" của hình ảnh
• Mở rộng phần "Nội dung"
• Chọn căn chỉnh "trung tâm"
• Đặt "Căn chỉnh dọc" thành "Giữa"
• Xác định màu tổng thể và phông chữ bạn chọn
• Chuyển đến tab "Nâng cao"
• Thêm 10% infill vào tiện ích con

Bây giờ phần Dịch vụ có thiết kế tương tự, nhưng với ít nội dung hơn.

Bước 9: Tối ưu hóa phần gọi hành động

Các phương pháp hay nhất cho liên kết CTA:

• Đảm bảo rằng tất cả các liên kết mạng xã hội của bạn đang hoạt động bình thường và nút có chứa liên kết.
• Khi bạn thêm một liên kết đến một trang web khác, hãy bao gồm thuộc tính này: "rel | noopener"

(Bạn có thể thực hiện việc này bằng cách nhấp vào biểu tượng bánh răng và nhập thuộc tính vào "Thuộc tính tùy chỉnh"). Thao tác này sẽ mở liên kết trong tab trình duyệt mới và tăng điểm hiệu suất của bạn.

Phần sau đây trình bày lời kêu gọi hành động cho các dịch vụ của chúng tôi.

Phần này hiện có hai cột, chứa:

1. Hình nền có dấu cách
2. Hai tiêu đề, một phần bên trong, một trình soạn thảo văn bản và một nút

Hãy tạo cùng một thiết kế trong một phần mới, nhưng chỉ với một cột.

• Chuyển đến tab "Bố cục" >> đặt "Chiều rộng nội dung" thành "Chiều rộng đầy đủ"
• Chuyển đến tab "Nâng cao" >> Xóa bất kỳ phần điền bổ sung nào

• Chọn "Tiện ích con Kêu gọi Hành động" trong bảng tiện ích và kéo nó vào cột
• Đặt "Vị trí hình ảnh" thành "Trái"
• Chọn hình ảnh của bạn từ thư viện phương tiện
• Mở rộng phần "Nội dung"
• Nhập tiêu đề
• Nhập mô tả
• Nhập văn bản nút

• Chuyển đến tab "Kiểu"
• Thêm "Padding" giữa các phần tử
• Điều chỉnh chiều rộng hình ảnh
• Mở rộng phần "Nội dung"
• Chọn phông chữ chung cho tiêu đề của bạn
• Tăng khoảng cách giữa mô tả và nút
• Chọn màu toàn cầu phù hợp với từng tài nguyên
• Mở rộng phần "Nút"
• Đặt kích thước của nó thành "Lớn"
• Tùy chỉnh nó theo nhu cầu của bạn, chẳng hạn như màu nền và bán kính đường viền

Cho đến nay nó đã là một phần 2 cột với 6 vật dụng. Bây giờ nó là một phần 1 cột chỉ với 1 widget!

Bước 10: Tối ưu hóa băng chuyền hình ảnh

Thiết kế hiện tại của phần Băng chuyền hình ảnh của chúng tôi có một lỗi phổ biến với cách nó hiển thị nhiều hình ảnh.

Thiết kế này bao gồm 5 cột, một thực tế mà nhiều người dùng có xu hướng làm để kiểm soát kích thước hình ảnh của họ.

Hãy khám phá một cách đơn giản hơn cũng sẽ tối ưu hóa hiệu suất trang web của bạn.

• Tạo một phần mới với 1 cột
• Chuyển đến tab "Bố cục" >> đặt "Chiều rộng nội dung" thành "Chiều rộng đầy đủ"
• Chọn nút »Tiện ích băng chuyền hình ảnh« từ bảng tiện ích và kéo nó vào cột
• Thêm hình ảnh mong muốn từ thư viện phương tiện

• Chuyển đến tab "Nội dung"
• Đặt "Kích thước hình ảnh" thành "Trung bình - 300 x 300"
• Điều chỉnh "Trang trình bày để hiển thị", "Trang trình bày để cuộn" và "Điều hướng" theo sở thích của bạn

• Chuyển đến tab "Kiểu"
• Đặt "Căn chỉnh theo chiều dọc" thành "Căn giữa"
• Tùy chỉnh "Khoảng cách"

• Chuyển đến tab "Nâng cao"
• Thêm phần điền cần thiết

Những gì đã từng là một phần 5 cột bây giờ chỉ là 1 cột.

Hãy chuyển sang phần tiếp theo, nơi chúng tôi có thể tối ưu hóa các video trên trang web của mình.

Bước 11: Tối ưu hóa phần video

Các phương pháp hay nhất cho nội dung video:

• Sử dụng Lazy Load bất cứ khi nào có thể, để cải thiện thời gian tải trang web của bạn.

Điều gì xảy ra khi chúng tôi áp dụng tùy chọn "Tải chậm"?

Về mặt kỹ thuật, mã nhúng video được thay thế bằng một hình ảnh tĩnh. Bằng cách này, video chỉ tải khi người dùng nhấp vào hình ảnh - điều này thực sự giúp ích cho thời gian tải trang của chúng tôi.

Những gì chúng ta sẽ làm bây giờ là thay đổi cách chúng ta sử dụng Tiện ích video để nó không làm chậm tốc độ trang hoặc hiệu suất trang web của chúng ta.

• Chọn "Tiện ích video"
• Chuyển đến tab "Kiểu"
• Chọn "Tải chậm"

Bước 12: Tối ưu hóa footer và cập nhật nó

Một lỗi phổ biến thường thấy trên nhiều trang web là chân trang của họ sử dụng nhiều tiêu đề cho ngày tháng và mô tả, cũng như một biểu tượng cho biểu tượng bản quyền.

Hãy xem cách tối ưu hóa footer và đảm bảo rằng nó luôn được cập nhật.

Chúng tôi sẽ định cấu hình quy trình cập nhật liên tục này bằng cách sử dụng Thẻ động. Bằng cách này, chúng tôi sẽ không cần thay đổi nội dung tiêu đề hàng năm, vì các thẻ động sẽ tự động cập nhật vào năm hiện tại.

Để làm điều này, chúng tôi sẽ tiến hành như sau:

• Loại bỏ các tiện ích bổ sung, chỉ để lại tiện ích Tiêu đề
• Chọn tiện ích Tiêu đề
• Nhấp vào biểu tượng "Thẻ động" ở bên phải trường "Tiêu đề" (còn được gọi là "Nút chính"

• Từ menu thả xuống, hãy chọn mục menu "Ngày và giờ hiện tại"
• Nhấp vào biểu tượng chính của khóa
• Nhấp vào tab "Định dạng Ngày" và chọn mục menu "Tùy chỉnh"
• Xóa những gì hiện có trong trường "Định dạng Tùy chỉnh", ngoại trừ "Y"
• Chọn tab "Nâng cao"
• Đánh dấu trường "Chuyển tiếp" và nhấn giữ đồng thời phím "option" và "G" (hoặc "control", alt "và" C "đồng thời) để nhập ký hiệu" © ".
• Thêm khoảng trắng sau "©"

• Chọn trường "Sau"
• Nhập một khoảng trắng và viết văn bản bạn muốn xuất hiện sau năm, chẳng hạn như "Mọi quyền được bảo lưu"

Bạn có thể nhận thấy rằng trong trang web ví dụ trong hướng dẫn này, mỗi tiện ích con đều có phần riêng. Chúng tôi đã làm điều này để làm cho hướng dẫn rõ ràng hơn và dễ làm theo hơn.

Lý tưởng nhất là bạn có càng ít phần, thì bạn càng có ít mã HTML bổ sung.

Bạn có thể hợp nhất một số widget trong cùng một phần bằng cách kéo và thả chúng vào phần trên rồi xóa phần trống.

Và thế là xong, bố cục của bạn đã được tối ưu hóa!

Đánh giá hiệu suất trang web mới

Chúng tôi sẽ kiểm tra kết quả trong cửa sổ DevTools (Thanh tra):

• Chọn tab "Mạng":

Có một số thay đổi tốt và tích cực ở đây:

• Trang web hiện mất 568 mili giây để tải
• Chúng tôi đã chuyển từ 81 yêu cầu xuống 46
• Chọn tab "Ngọn hải đăng", nơi bạn sẽ thấy rằng điểm hiệu suất của chúng tôi đã tăng từ 73 lên 98

Hãy nhớ rằng chúng tôi đã tối ưu hóa hiệu suất của mình mà không sử dụng bất kỳ plugin nào của bên thứ ba. Tất cả những gì cần làm là những chỉnh sửa đơn giản và các phương pháp hay nhất.

Bước 13: Kiểm tra kết quả với các hiệu ứng chuyển động

Chúng tôi muốn làm cho trang web của mình trở nên tương tác và thú vị hơn, nhưng điều đó sẽ ảnh hưởng đến điểm hiệu suất của chúng tôi như thế nào? Hãy xem những gì chúng tôi có thể làm.

Đặt tiêu đề thành phần tử "cố định":

• Chọn tiêu đề
• Chuyển đến tab "Nâng cao"
• Mở rộng tab "Hiệu ứng chuyển động"
• Đặt tùy chọn "Cố định" thành "Trên cùng"

Đặt phần anh hùng thành phần tử "cố định":

• Chọn phần anh hùng
• Chuyển đến tab "Kiểu"
• Chọn danh sách thả xuống "Tệp đính kèm" và chọn "Đã sửa"

Sử dụng Hoạt ảnh lối vào cho văn bản của anh hùng (tiêu đề):

• Chọn tiện ích Tiêu đề
• Chuyển đến tab "Nâng cao"
• Mở rộng tab "Hiệu ứng chuyển động"
• Chọn Hoạt ảnh đầu vào và đặt nó thành “Fade In”

Sử dụng hoạt ảnh đầu vào cho mô tả văn bản của anh hùng (tiện ích Trình chỉnh sửa văn bản):

• Chọn tiện ích Trình soạn thảo văn bản
• Chuyển đến tab "Nâng cao"
• Mở rộng tab "Hiệu ứng chuyển động"
• Chọn "Hoạt ảnh đầu vào" và đặt nó thành "Fade In"

Làm tương tự cho các widget sau đó, để có các hiệu ứng tinh tế khi tải trang.

Bây giờ chúng ta hãy chạy lại bài kiểm tra hiệu suất để xem các hiệu ứng chuyển động đã ảnh hưởng đến điểm số của chúng ta như thế nào:

• Quay lại cửa sổ "Thanh tra"
• Chọn tab "Ngọn hải đăng"
• Nhấp vào "Tạo báo cáo"

Bây giờ chúng tôi thấy rằng điểm hiệu suất của chúng tôi đã giảm xuống còn 97 - đây chắc chắn không phải là một sự khác biệt lớn và nó làm cho trang web trở nên thú vị và vui nhộn hơn.

Bạn có tin được điểm hiệu suất mới của chúng tôi không?

Chúng tôi rất vui vì bạn hiện đã được trang bị đầy đủ để tăng điểm hiệu suất của mình từ mọi trang web Elementor mà bạn tạo. Nó sẽ tạo ra sự khác biệt lớn đối với mục tiêu xây dựng trang web và sự thành công của doanh nghiệp bạn.

Chúng tôi khuyên bạn nên đánh dấu hướng dẫn này để tham khảo trong tương lai, để bạn có thể kiểm tra hiệu suất của các trang trên trang web của mình và áp dụng các phương pháp hay nhất để tối ưu hóa bố cục của bạn.

Và đó chỉ là phần khởi đầu - phần tiếp theo của khóa học này bao gồmtối ưu hóa hình ảnh.

Trong hướng dẫn này, chúng ta sẽ xem qua từng hình ảnh trong trang web mẫu và tìm hiểu cách cải thiện chúng để có thời gian tải thậm chí hiệu quả hơn.

Tải xuống Elementor Pro ngay!

Kết luận

Vì thế ! Đó là vì bài viết này sẽ hướng dẫn bạn cách tối ưu hóa bố cục trang web của bạn với Elementor. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho chúng tôi biết trong vòng ý kiến.

Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.

...