+44(0) 1234 567 890 info@domainname.com

Tuesday, January 29, 2013

7 thủ thuật tối ưu code để tăng tốc website

12:33 AM

Share it Please

1. Chuyển host lưu trữ file hoặc ảnh cỡ lớn sang nơi khác
Nhiều người cùng online một lúc có thể làm nghẽn đường truyền của bạn với hàng đống yêu cầu xem cùng một tấm hình trên website. Gánh nặng dữ liệu có thể chuyển sang những website chuyên để lưu trữ và chia sẻ ảnh như ImagaShack, Photobucket hay Flickr. Bằng cách này, máy chủ web của bạn chỉ cần đảm bảo phần text và file ảnh cỡ nhỏ, giảm đáng kể băng thông đồng nghĩa với việc phục vụ được nhiều người một lúc hơn.
Nếu muốn chia sẻ những file nhỏ, khoảng 2 – 5MB, với khách viếng thăm, bạn có thể sử dụng dịch vụ Google Pages như một máy chủ web phụ.
2. Tối ưu hóa mã CSS
Hiện nay, nhiều website bắt đầu sử dụng CSS (Cascade Style Sheet) để định dạng. Mặc dù bảng CSS nhìn bắt mắt và hiệu quả hơn định dạng bảng HTML, nhưng nó đòi hỏi bạn phải tối ưu hóa code của chúng mới mong đạt được tốc độ tối ưu. Đoạn mã CSS “sạch” sẽ giúp trình duyệt giải mã trang web nhanh hơn.
Ví dụ: Thay vì viết:

margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;

Bạn nên viết:

margin: 20px 10px 20px 10px;

Theo các chuyên gia tối ưu hóa của Yahoo thì các mã CSS nên được đặt ở phần đầu của web. Điều này đặc biệt ý nghĩa nếu trang của bạn lớn và có nhiều đối tượng. Nếu bạn đặt CSS ở cuối hoặc giữa trang web, trình duyệt sẽ dùng định dạng mặc định để hiện thị, sau đó mới tái định dạng bằng CSS. Điều đó đòi hỏi thêm thời gian tính toán và tất nhiên người dùng sẽ khó chịu khi nhìn một website vỡ tung khi chưa định hình.Thậm chí, một số trình duyệt cũng cấm đặt CSS tại cuối website.
3. Tối ưu hóa hình ảnh
Có 4 loại định dạng hình ảnh sử dụng phổ biến trên web: PNG, JPG, /JPEG và GIF. Hầu hết các phần mềm xử lý ảnh như Adobe Photoshop đều có tính năng “Save for Web” để tối ưu tỉ lệ giữa chất lượng hình và kích thước file.
4. Khai báo kích thước hình ảnh
Nhiều lập trình viên nghiệp dư “quên” khai báo tag chiều cao và rộng của ảnh khi viết mã HTML. Hai thông số này báo với trình duyệt kích thước của ảnh trước khi dữ liệu được tải về. Nếu không được khai báo trước, trình duyệt phải tự tính toán kích thước bằng cách download toàn bộ hình ảnh về, sau đó mới đến lượt các dữ liệu khác.
Khi khai báo hình ảnh có đầy đủ các tag, trình duyệt sẽ dành 1 khoảng trống vừa đúng kích thước ảnh và tiếp tục tải dữ liệu. Như vậy, người xem có thể đọc ngay phần văn bản trong khi hình ảnh vẫn tiếp tục được hiện ra từng phần.
5. Giảm thiểu sử dụng Javascript
Các hiệu ứng hoạt hình của Java script rất bắt mắt và nhiều người có xu hướng đưa chúng vào website của mình. Tuy nhiên, sử dụng quá nhiều Javascript có thể làm trình duyệt bị treo cứng khiến người dùng bực mình. Phải cân nhắc thật kỹ lưỡng trước khi sử dụng chúng.
Vị trí đặt các đoạn mã script cũng khá quan trọng đối với tốc độ hiển thị. Lời khuyên của dân lập trình chuyên nghiệp: chỉ để những script thực sự quan trọng có ảnh hưởng toàn trang lên đầu, còn những hiệu ứng khác (hoạt hình, thống kê,…) thì cho xuống cuối trang.
Việc đưa Javascript và CSS ra liên kết bên ngoài tốt hơn là chèn thẳng vào trang web. Những file này sẽ được lưu tại bộ nhớ đệm (cache) của trình duyệt và người dùng sẽ không phải download lại chúng mỗi khi cần đến. Nó giảm đáng kể thời gian và băng thông của máy chủ cũng như người dùng.
6. Tối ưu hóa liên kết
Chú ý mỗi đường link được đặt trên website hay blog của bạn được viết một cách ngắn gọn và chính xác. Ví dụ mỗi entry trên 360 Yahoo đều có 1 phần “Permanent Link” để lấy liên kết chính xác và gọn gàng hơn nhiều so với những gì hiển thị trên ô địa chỉ (address bar) của trình duyệt. Việc sử dụng chính xác đường link sẽ giảm bớt những yêu cầu không đáng có đối với máy chủ trong một số trường hợp.
7. Giảm bớt các yêu cầu HTTP tới máy chủ
Khi mở website, mỗi đối tượng trên trang (hình ảnh, script, hình vẽ, đường kẻ, …) đều tạo ra 1 yêu cầu tới máy chủ để tải về. Tất nhiên, càng nhiều đối tượng thì việc tải về càng lâu hơn. Vì thế, hãy giảm thiểu số đối tượng trên cùng 1 trang và cố gắng gộp file CSS với các script lại với nhau.

0 comments:

Post a Comment

Tags

Thủ thuật pc Góc Làm Đẹp Làm Đẹp Da Thủ Thuật Blogspot - Wordpress - Joomla Thủ Thuật Network Giải trí Thủ Thuật Hay thu-thuat-blogspot ASP.NET Danh bạ Lập trình CSDL Thủ Thuật Blog Lập trình Thủ thuật Excel Phần Mềm Góc Phụ Nữ SEO TT Windows Lý Thuyết CCNA Dịch Vụ Hot CCNA Sức Khỏe - Đời Sống Office Thủ Thuật Mobile Thủ Thuật Win 8 Download Xây dựng liên kết Android Thủ thuật Word Website thu-thuat-internet Forum PHP Tư Vấn Làm Đẹp Mẹo Vặt tien-ich-widget Đọc báo ASP.NET MVC Ca nhạc Hỏi Đáp Thơ Vui Thủ Thuật Game vui-nhon Download Phần Mềm - Crack VBA Excel thu-thuat-facebook Cuộc sống Download Game Photoshop Thủ thuật Blogspot VBA trong Excel Widget Blogspot Địa Điểm Hot C# CSS Giới Tính Tài Liệu Đại học Chuyện lạ Clip Hài - Video Hot Góc Kỹ Năng Góc Sinh Viên Liên Minh Huyền Thoại Sao Sức Khỏe Giới Tính Thủ Thuật Tin Học template-blogger Chuyện Của Sao Design Pattern Kiến thức cơ bản PM hệ thống Thủ thuật Facebook Tin nổi bật Đề thi LAB CCNA Love story Học và hỏi Môn toán Spring.NET Tủ Sách Video lam-quen-voi-blogger Ảnh Vui Bảng Giá Con trai Cẩm nang du học Dependency Injection Hình ảnh Kinh nghiệm học Kỹ Năng Xin Việc Luật Pháp ORM Tin nóng Tiện ích Truyện cười Việt Nam hinh-anh-hai-huoc tho-vui-con-coc thu-thuat-phan-mem Blogspot Distributed Technologies Hợp Tác Kinh Doanh Khám phá MVP NHibernate Photoshop Action Thủ Thuật Win 7 Trẻ Tư Vấn Tiêu Dùng VietYeah TV Xã Hội thu-thuat-SEO Blogger Templates Game flash Khối B Nghịch Nhân vật Phong Cách Slider Thư giãn Thủ thuật Youtube WCF facebook hinh-anh-dep thu-thuat-may-tinh Đời Sống 2010 Con gái Download Game Mobile Drivers External Post Học Nấu Ăn Học vui Làm Đẹp Tóc MVC N-Tier PM hệ điều hành Sao Quốc tế Thủ thuật internet Thông Tin Tin Tức Hot Tivi Truyện Hay Tuyển Dụng Xả Stress Youtube anh-bia-facebook san-pham-google ung-dung-website Đáp án Đề thi thử AOP Abstract Factory Cool stuffs Design Principles Khối A Thông tin mạng Tình yêu lập trình viên phan-mem-van-phong thu-thuat-windows-7 thu-thuat-windows-8 Điện Tử Ảnh Nghệ Thuật 2009 2011 2012 Adapter Pattern Công Nghệ Factory Method Game Hình sự Khối D Kiếm Tiền Qua Mạng Kỹ Năng Nơi Công Sở LinQ Menu Miễn phí Photoshop PSD Sexy Singleton Sành điệu Thủ Thuật Di Động Tin nhắn SMS phan-mem-do-hoa phan-mem-tien-ich Đọc xong vọc liền .NET Remoting 10-thing series 2013 Ajax Bridge Pattern Bóng đá Castle Windsor Chơi Game Online Cover Facebook Có Thể Bạn Chưa Biết Download Phim Dịch vụ Fedora Garbage Collection Google Plus Góc Tâm Sự HTML Hibernate Hài hước IoC JSF Javascript Jquery Khối C Kỹ Năng Bán Hàng Kỹ Năng Thuyết Trình Lazy Load Linux Lock Log4Net MWC Memory Management Mock Multi-Thread MySQL Môn sử Mặc Đẹp Mẹ Và Bé Mỹ Tâm NUnit Ngọc Trinh Nhịp sống trẻ PM văn phòng POCO Passive View Photoshop tách ảnh Phạm Băng Băng Phầm Mềm Crack PostSharp Primefaces Shop Bít Tuốt Strategy Pattern Supervising Controller Sự kiện Thể thao Thủ Thuật Office Tin đặc biệt Toán Tình bạn Tình dục Tốt nghiệp Unit Testing VBA Word Virtual Server Văn WMC 2012 Windows Service acc fshare acc mien phi anh-nghe-thuat cntt di dong di động dropbox dung luong dropbox fshare hinh nen hinh nen dep hình nền job mac os mang xa hoi may ao mạng xã hội social tang dung luong dropbox thu-thuat-mobile thu-thuat-windows-xp tháng 2 top truyen-cuoi tăng dung lượng dropbox vmware Ảnh đẹp