otarachi

Bạn muốn độ con Sites của mình cho nó ngon lành ? Bạn ko tìm được thủ thuật giúp ích cái mình cần ?? Đọc và bạn sẽ hiểu

14 thủ thuật tăng tốc độ website

Chuyên gia Steve Souders của Yahoo đã hướng dẫn chi tiết cách tối ưu hóa trang web bằng việc tập trung vào những vấn đề mặt trước (front-end: phần chương trình tương tác trực tiếp với người sử dụng).
Đây được coi là tài liệu đáng đọc với bất cứ ai liên quan đến công việc xây dựng web. Bài viết của Souders được đăng dài kỳ trên blog Yahoo user interface và sẽ được xuất bản vào tháng 9 tới.
Khả năng hoạt động của website là vấn đề được nhiều người quan tâm. Một số nghiên cứu mới đây cho thấy tốc độ ảnh hưởng trực tiếp đến lưu lượng khách truy cập. Souders đã đưa ra 14 nguyên tắc cải thiện là:
1. Hạn chế HTTP requests.
2. Sử dụng CDN (Content Delivery Network: Hệ thống các máy tính được kết nối với nhau qua Internet để truyền nội dung tới người sử dụng).
3. Đưa thêm Expires header.
4. Gzip các thành tố (Gzip, hay GNU zip, là ứng dụng phần mềm miễn phí được dùng để nén file).
5. Đưa CSS lên đầu.
6. Chuyển JS (JavaScript) xuống cuối.
7. Tránh các biểu thức CSS.
8. Đặt CSS và JS ở bên ngoài.
9. Giảm quá trình tra cứu DNS.
10. Thu nhỏ JS.
11. Tránh chuyển hướng (redirect).
12. Loại bỏ các tập lệnh sao lưu (duplicate scripts).
13. Tắt ETags.
14. Làm cho AJAX nhỏ và có thể lưu trữ được (cacheable).

Tham khảo bản thuyết trình PowerPoint với 97 slide của Souders

__________________

otarachi

Tăng tốc độ hiển thị web

Tốc độ hiển thị trang web phụ thuộc vào nhiều yếu tố như tốc độ đường truyền, tốc độ xử lý của server, nội dung trang web và tốc độ xử lý của máy tính client.

Để tăng tốc độ hiển thị trang web, có thể chia làm 3 phần để xử lý như sau:
- Tại server: Giảm thiểu những tính toán trên server, tối ưu CSDL, tạo bộ đệm, tối ưu chương trình...

- Đường truyền: Giảm thiểu dữ liệu truyền trên mạng bằng cách giảm kích thước các file hình, giảm yêu cầu trao đổi dữ liệu giữa server và client...

- Tại máy client: tối ưu mã html để trình duyệt hiển thị nhanh.

Với chiến lược trên, dưới đây là 10 thủ thuật có thể giúp tăng tốc độ hiển thị trang web.

1. Dùng CSS định nghĩa thuộc tính của các đối tượng trong trang web

Việc dùng CSS sẽ giúp cải thiện tốc độ tải trang web đáng kể. Trình duyệt sẽ chỉ tải file CSS về máy client một lần, những lần sau các trang web sử dụng file CSS này sẽ lấy ngay tại client. Việc tập trung toàn bộ định nghĩa thuộc tính vào file CSS giúp cho đoạn mã HTML trở nên ngắn gọn, rõ ràng đồng thời giúp giảm kích thước của trang web.

Một điểm tiện lợi nữa khi dùng file CSS là bạn có thể thay đổi màu sắc, giao diện của những trang web một cách nhanh chóng thông qua việc chỉnh sửa những thuộc tính trong file CSS.

2. Viết Javascript trên một trang và dùng cho nhiều trang

Điều này tương tự như kỹ thuật dùng file CSS cho mọi trang web. Ví dụ đoạn mã Javascript hiển thị quảng cáo dùng cho nhiều trang, nếu bạn viết toàn bộ mã Javascript trong một file rồi khai báo dùng nó ở các trang như sau:

Giống như file CSS, trình duyệt chỉ tải về file này một lần.

3. Dùng AJAX

AJAX là chữ viết tắt của Asynchronous JavaScript And XML, đây là kỹ thuật dùng Javascript và XML để tối ưu việc trao đổi dữ liệu giữa client và server. Giả sử trang web của ban chứa rất nhiều thông tin, trong đó có một phần chứa 2 combobox: Quốc Gia và Thành Phố. Khi bạn chọn một quốc gia trên combobox 1, thì trong combobox 2 các thành phố tương ứng sẽ hiện ra. Theo cách thông thường, khi chọn một quốc gia, thông số của nó sẽ được gửi về server. Tại đây nội dung của trang web được tính toán lại rồi được gửi trả cho client với combobox2 chứa các thành phố của quốc gia được chọn. Như vậy chỉ một phần nhỏ trong trang web thay đổi mà phải tải về toàn bộ trang web và vẽ lại. Với AJAX, sau khi xử lý, server chỉ gửi trả kết quả cho client danh sách các thành phố chứ không phải toàn bộ trang web. Điều này cải thiện rất nhiều tốc độ đáp ứng của trang web.

4. Mạnh dạn bỏ những gì không cần thiết

Bỏ file flash, audio nếu chúng không thực sự cần thiết. Ngoài ra, đối với người lập trình web, việc sử dụng control của HTML thay cho server control của ASP/JSP... cũng giúp giảm được thời gian biên dịch (từ ASP/JSP... sang HTML).

5. Tránh dùng table lồng trong table

Khi bạn viết table lồng trong table, trình duyệt sẽ mất nhiều thời gian hơn để hiển thị trang web. Đây là điều ít người để ý nhất nhưng lại là một kỹ thuật cải thiện tốc độ hiển thị trang web đáng kể nhất. Khi bạn đặt một table bên trong một table, sẽ mất một khoảng thời gian khá dài để trình duyệt web duyệt qua toàn bộ mã lệnh bên trong mỗi table rồi mới làm đến việc trình bày lên màn hình cho người dùng xem. Nếu có thể, bạn hãy sử dụng CSS để tạo ra những dòng và cột cho trang web.

6. Không dùng table bao toàn bộ nội dung trang web

Nếu bạn dùng một table lớn để tạo layout cho trang web như sau:
Trình duyệt sẽ phải tải toàn bộ thông tin của các thành phần trong bảng gồm: Top, LeftMenu, Content... về máy client, rồi xử lý tính toán toàn bộ control, khoảng trắng, hình ảnh... bên trong table. Khi mọi việc đã thực sự hoàn tất, trình duyệt web lúc đó mới hiển thị toàn bộ nội dung bên trong table lên màn hình cùng lúc.

Nếu không dùng table bao toàn bộ nội dung trang web, thì ngoài việc giảm được dung lượng trang web, thời gian xử lý hiển thị tại máy client, nó còn cho phép trình duyệt web hiển thị dần từng phần đã xử lý xong, cho người dùng có một vài thông tin để đọc trước, trong khi chờ những phần khác tiếp tục hiển thị, điều này tạo cho người dùng cảm giác trang web của bạn có tốc độ hiển thị nhanh.

7. Phân trang web thành các trang nhỏ hơn

Thay vì hiển thị toàn bộ thông tin trên 1 trang web, bạn hãy phân trang web thành nhiều mục nhỏ và hiển thị trên nhiều trang khác nhau. Giống như Yahoo Mail, tại mỗi thời điểm, các bạn chỉ có thể xem được tiêu đề của 50 email lên màn hình, để xem danh sách các email khác bạn phải nhấn liên kết next/previous...

Điều này không chỉ giúp tăng tốc độ hiển thị trang web mà trên thực tế, phần lớn người dùng thật sự không thích phải ngồi chờ vài phút để rồi xem một trang web có nội dung khá dài, phải dùng đến scroll bar mới xem được hết toàn bộ nội dung.

8. Xóa các khoảng trắng không cần thiết

Cố gắng xóa tất cả những khoảng trắng không cần thiết trong đoạn mã html. Hãy nhớ là một lần ấn phím space sẽ làm tăng kích thước trang web của bạn lên 1 byte. Việc loại bỏ khoảng trắng này có thể làm bằng tay hoặc dùng công cụ hỗ trợ như HTML code Cleaner (có thể tìm với Google).

9. Dọn dẹp mã chương trình cho sáng sủa

Hãy loại bỏ toàn bộ những thẻ trống như div>
hay . Điều này không những giúp cải thiện dung lượng trang web, tăng tốc độ hiển thị mà còn giúp cho mã lệnh của bạn trở nên rõ ràng, giúp dễ dàng hiệu chỉnh hoặc nâng cấp.

10. Tối ưu hình ảnh

Hạn chế dùng hình ảnh: Hình ảnh giúp cho trang web của bạn trở nên sống động và lôi cuốn, tuy nhiên hình ảnh cũng chính là một trong những nguyên nhân làm chậm tốc độ hiển thị trang web.

Chỉ định rõ kích thước của hình ảnh: Khi trình duyệt hiển thị hình ảnh của trang web, nó phải biết kích thước của tấm ảnh để có thể chừa khoảng trống trên màn hình cho việc hiển thị tấm ảnh này, và việc hiển thị sẽ theo trình tự từ trên xuống. Nếu bạn không định rõ kích thước của tấm ảnh (ví dụ: ), trình duyệt phải tải tấm ảnh trước để xác định kích thước rồi mới xử lý hiển thị nội dung. Điều này cũng tương tự như việc sử dụng table bao toàn bộ nội dung. Vì vậy nếu được, bạn nên sử dụng khai báo “width”, “height” để chỉ định trước kích cỡ của hình ảnh.

Giảm kích thước hình ảnh: Hãy giảm tối đa kích thước hình ảnh. Đôi khi bạn không cần phải trương lên trang web những hình ảnh có chất lượng thật cao mà có thể dùng thumbnail thay thế. Định dạng GIF/JPG là lựa chọn hàng đầu cho trang web vì kích thước nhỏ.

__________________

otarachi

20 mẹo thiết kế web hữu ích nhất

Thiết kế Web tất nhiên không phải là một công việc đơn giản. Tuy nhiên, cũng có những cách giúp bạn xây dựng một website với ít sức lực nhất. Sau đây là một trong số những cách đó.

1. Thiết kế thật đơn giản
Cách dễ nhất để tiết kiệm sức lực của bạn là thiết kế website thật đơn giản. Tuy nhiên, thật kỳ lạ là nhiều nhà thiết kế lại lờ đi điều này. Bạn cần phải từ bỏ các đoạn Javascript chạy dọc chạy ngang quá nhiều, những ảnh Gif động và những trang được làm mờ… Nói tóm lại, đơn giản khiến cho cuộc sống dễ thở hơn.

2. Hãy tự chuẩn bị một cách kỹ càng
Nếu bạn sử dụng một ứng dụng soạn thảo trang Web WUSIWYG (What you see is what you get) như Macromedia hay GoLive, bạn hãy ra thời gian nhập các thông số cài đặt FTP và chuẩn bị một cách tốt nhất cho site của bạn (quá trình này được gọi là “định nghĩa site của bạn” (defining your site) trong Dreamweaver). Làm điều này sẽ giúp bạn tránh được nhiều rắc rối do những chương trình soạn thảo sẽ dễ dàng hơn trong việc theo dõi các file liên quan tới website của bạn.

3. Tạo các ứng dụng chuyển động (flash) mà không sử dụng chương trình Flash
Không có gì phải nghi ngờ rằng ứng dụng Flash rất là sinh động. Thiếu nó, một số nhà thiết kế website chuyên nghiệp không thể thực hiện được những trang Web mang lại hiệu quả như ý muốn. Tuy nhiên, nó khiến bạn phải tốn kém chi phí. Bạn cần biết là còn có những ứng dụng khác có thể tạo ra các hiệu ứng flash mà chi phí lại thấp ơn. Ví dụ Swish () cho phép bạn tạo ra các hiệu ứng flash với các đoạn văn bản trong khi EffectMaker () cũng cho kết quả không kém.

4. Ghi chép lại các URL và đoạn code hay
Nghe có vẻ tầm thường nhưng đây lại là 1 kinh nghiệm hay. Hãy mở 1 văn bản Notepad hay Word khi bạn duyệt web. Nếu bạn thấy một URL hay 1 ý tưởng nào đó thú vị, hay sao và dán nó vào văn bản đang mở và sau đó, khi tìm kiếm ý tưởng cho việc thiết kế website, bạn có thể tham khảo văn bản này

5. Thao tác tự động với nhiều hình ảnh cùng một lúc
Tại sao bạn lại phải tốn hàng giờ để tiêu chuẩn hoá hình ảnh trong khi có người khác làm hộ bạn ? Phần mềm JPEGWizard tại địa chỉ sẽ nén hoặc chỉnh lại kích thước của nhiều hình ảnh cùng 1 lúc hay thậm chí đổi tên chúng. Tuy nhiên, phần mềm này yêu cầu bạn trả phí (69 USD) song chúng giúp bạn được rất nhiều việc. Cũng có vài phầm mềm miễn phí khác tại địa chỉ như RealOptimizer Evaluation 1.5 vẫn giúp bạn tiết kiệm được rất nhiều sức lực so với làm thủ công cho dù bị hạn chế về tính năng.

6. Thu thập các đoạn code
Kỹ thuật này mở rộng từ việc ghi chép lại các URL thú vị. Bạn hãy tạo một thư mục và đưa nó ra ngoài màn hình Desktop. Nếu bạn có hay tình cờ có được cái gì đó hay, hãy lưu trữ chúng trong thư mục này. Bạn sẽ kiểm soát được các đoạn code ưa thích của mình cũng như lưu trữ được các thông tin phù hợp khác.

7. Sử dụng các đối tượng thư viện trong chương trình DreamweaverHãy xây dựng 1 website mà bạn có thể chỉnh sửa nhiều trang một lúc chỉ bằng 1 hành động. Khi làm việc với Dreamweaver, hãy sử dụng các mẫu thiết kế có dùng các đối tượng thư viện. Các yếu tố thay đổi thường xuyên có thể được cập nhật mà thậm chí không cần mở file html. Chọn đoạn HTML cho đối tượng bạn muốn, kéo nó vào thư viện và đặt cho nó một cái tên. Khi muốn sử dụng, chỉ cần kéo các đối tượng đó vào trang Web của bạn. Bằng cách này, bạn có thể chỉnh sửa nhiều trang có sử dụng chung một đối tượng một lúc. Chỉ cần bấm chuột vào đối tượng trong thư viện, thay đổi nó sau đó lưu lại và bấm Update Now. Toàn bộ site sẽ được cập nhật.

8. Tự động tạo ra các thư viện ảnh
Nếu bạn đang tạo ra 1 album ảnh trực tuyến, hãy tìm 1 chương trình làm các công việc “chân tay” cho bạn. Chương trình Express Thumbnail Creator không chỉ tạo ra các trang HTML phù hợp với kiểu cách yêu cầu của bạn, mà nó còn điều chỉnh kích thước của những hình ảnh cho trang web và tạo ra các hình ảnh thu nhỏ cho bạn.

9. Chuẩn hoá stylesheet của bạn
Hãy chuẩn hoá cách thức bạn sử dụng các stylesheet. Bằng cách này bạn sẽ có thể tạo ra những file Javascript hay CSS mẫu mà có thể sử dụng trên các site khác nhau.Ngoài ra, bạn cũng nên nghĩ tới việc hình thành một chuẩn hình thức cho các site mà bạn thiết kế. Về lâu dài, điều này sẽ giúp bạn tiết kiệm được nhiều thời gian. Ngoài ra, bạn cũng nên tìm cách giữ bản quyền thiết kế của bạn, bằng cách này bạn có thể sử dụng lại các yếu tố thiết kế của mình trên rất nhiều site.

10. Bắt chước cũng rất tốt cho bạn
Nếu như bạn cứ copy hàng loạt đoạn code vào trang Web của bạn thì cũng là không ổn nhưng không có lý do gì khiến bạn không lấy các ý tưởng hay từ website của người khác. Nếu chịu khó suy nghĩ về các ý tưởng của 1 site nào đó thì bạn sẽ biết được nó trông thế nào khi bạn mang chúng vào website của mình.

11. Tạo 1 trang mẫu (template)
Trước khi bạn bắt đầu thiết kế website, hãy tạo 1 trang mẫu. Nó chứa tất cả các nhân tố xuất hiện ở mọi trang của website. Ví dụ: Địa chỉ liên hệ ở cuối các web page, các tag lệnh ALT hay màu của các đường link.

12. Sử dụng kỹ thuật ảnh GIF 1 ảnh điểm
Kỹ thuật này rất hay và đơn giản. Nó sẽ giúp website của bạn duy trì khuôn dạng ban đầu khi xem ở các chế độ phân giải màn hình khác nhau. Ban đầu, HTML được xây dựng để cho mọi người dễ học chứ không phải là một ngôn ngữ giúp trình bày một trang Web. Kỹ thuật này sử dụng 1 hình ảnh đóng vai trò 1 dấu cách trong suốt có kích thức 1×1. Bạn có thể dùng nó để chèn vào bất cứ vị trí nào khi việc để khoảng cách giữa các đối tượng gặp khó khăn – hay dùng nhất là giữa các bảng biểu. Để biết thêm thông tin về kỹ thuật này, bạn có thể truy nhập địa chỉ: .

13. Hãy tải về các đoạn mã
Việc có được các đoạn mã viết sẵn dễ dàng hơn bạn tưởng nhiều. Bạn đừng cho là mình đang lấy cắp của người khác. Có nhiều nơi để bạn khai thác ví dụ như , nơi có chứa mọi thể loại script cho bạn tải về. Scriptsearch.com cho phép bạn tải về mọi thứ, từ ASP script tới JavaScript

14. Sử dụng bản đồ ảnh
Tại sao bạn lại phải tạo mỗi ảnh cho một nút bấm điều hướng trong khi có thể tạo một ảnh lớn cho tất cả các nút bấm một cách dễ dàng. Miễn đó là một ảnh thuần tuý (plain image), nó có thể tải về nhanh hơn so với nhiều ảnh nhỏ. Cách dễ nhất để tạo bản đồ ảnh là sử dụng một trình soạn thảo WYSIWYG như Dreamweaver.

15. Sử dụng các hình ảnh làm sẵn
Hầu hết các hình ảnh trên Web đều được đăng ký bản quyền. Tuy nhiên, cũng có rất nhiều nơi cho phép bạn có các hình ảnh để bạn thiết kế cho website của riêng mình. ScreamDesign () có rất nhiều nút bấm và mũi tên cho bạn sử dụng. Free GIFs and Animations (http://www.fg-a.com/gifts.html) cho thấy bạn cần tránh lấy những thứ gì - chẳng hạn đừng sử dụng những hình lấp lánh quá mức.

16. Tiết kiệm thời gian bằng việc lập kế hoạch
Sử dụng nhiều giấy viết hơn nữa. Đã có nhiều người phải tốn rất nhiều thời gian do đi nhầm đường vì không suy nghĩ kỹ trên mọi góc độ trước khi bắt tay vào việc thiết kế. Sẽ là dễ dàng hơn cho bạn khi thiết kế ở một vị trí như thế này: Nhấm nháp 1 chút cà phê với 1 cây bút trong tay. Giấy viết của bạn thì không bao giờ bị sập như máy vi tính và bản vẽ thì rất dễ hiểu đối với cả đội ngũ thiết kế của bạn. Chỉ khi có được thiết kế trên giấy tốt thì bạn mới nên sờ tới chiếc máy vi tính. Điều này sẽ giúp bạn nâng cao được năng suất làm việc.

17. Hãy làm đầy màn hình của mình
Nếu đôi khi bạn thấy rằng trang Web của bạn không đầy bề rộng của màn hình, mặc dù trong 1 bảng biểu đặt bề ngang là 100%, bạn hãy thử đặt toàn bộ trang trong1 table có chiều rộng được đặt 100% mà không có spacing hay padding. Bạn sẽ thấy rằng bất kỳ các bảng biểu này nằm trong bảng lớn này sẽ được đẩy tới sát bên lề của màn hình, cho dù bạn dùng chế độ phân giải hay kích thước màn hình nào. Kỹ thuật này cũng rất có ích nếu bạn muốn đặt cái gì đó luôn luôn ở giữa màn hình: Bạn chỉ căn chỉnh cả theo chiều dọc và ngang ở giữa table chủ.

18. Xóa bỏ các dấu gạch chân ở dưới các đường link
Nếu bạn muốn loại trừ những dấu gạch chân gây khó chịu ở phía đường link, chỉ cần thêm một đoạn code đơn giản vào đoạn header (giữa “the” và “tags”). Đoạn mã như sau:

19. Mẹo Javascript
Nếu bạn muốn nhanh chóng thử nghiệm 1 vài dòng Javascript, hãy mở 1 trình duyệt và đánh vào thanh địa chỉ “javascript:” và sau đó đoạn script mà bạn muốn chạy. Những script này cũng có thể được bookmark vào Favorite và được sử dụng như những ứng dụng, ví dụ bạn có thể tạo một Javascript và đặt vào Favorite để điều chỉnh kích thước 1 cửa số xuống 800 x 600

20. Tạo hiệu ứng di chuột mà không cần tới ảnh
Bằng việc bổ sung thêm một tính năng onMouseover vào một ô ở trong bảng, bạn có thể thay đổi background của 1 ô sang bất kỳ 1 màu nào mà bạn muốn - giống như 1 rollover. CSS Rollover có hiệu quả hơ nhiều so với rollover image và có nhiều giá trị hoạt động hơn so với một vài dòng lệnh Javascript yêu cầu đưa ra 1 hình ảnh mỗi khi bạn di chuột sang một ảnh khá

__________________

naenter

hay quá..cảm ơn bạn nhá!!!