Skip to main content

Web Performance Best Practices and Rules

Yahoo's Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 23 of these 34 rules that are testable. Click each performance rule below to see the details.

  1. Minimize HTTP Requests
  2. Use a Content Delivery Network
  3. Avoid empty src or href
  4. Add an Expires or a Cache-Control Header
  5. Gzip Components
  6. Put StyleSheets at the Top
  7. Put Scripts at the Bottom
  8. Avoid CSS Expressions
  9. Make JavaScript and CSS External
  10. Reduce DNS Lookups
  11. Minify JavaScript and CSS
  12. Avoid Redirects
  1. Remove Duplicate Scripts
  2. Configure ETags
  3. Make AJAX Cacheable
  4. Use GET for AJAX Requests
  5. Reduce the Number of DOM Elements
  6. No 404s
  7. Reduce Cookie Size
  8. Use Cookie-Free Domains for Components
  9. Avoid Filters
  10. Do Not Scale Images in HTML
  11. Make favicon.ico Small and Cacheable

Comments

Post a Comment

Popular posts from this blog

React material-ui [version1] TextField customize

React material-ui v0.x gives the opportunity to customize elements by overriding styles easily. When it comes to latest version v1, it becomes a bit difficult to do that similar as the earlier version. But they have given more options to customize elements by theming, overriding with classes and JSS. So you have to be a reactJs or Mui expert to understand those stuff with the documentation other than the earlier version. (This tutorial for react/ mui beginners to migrate from version 0.x) I will show you both version styling examples to do complete AtoZ customization to a TextField.
1 comment
Read more

Defer loading of JavaScript

To prevent JavaScript from blocking page loading, we recommend using the HTML async attribute when loading JavaScript. For example: <script async src="my.js"> If your JavaScript resources use document.write, it is not safe to use asynchronous loading. We recommend that scripts that use document.write be rewritten to use a different technique. Additionally, when loading JavaScript asynchronously, if your page loads scripts that depend on one another, care must be taken to make sure that your application loads scripts in the proper dependency order. If the external scripts are small, you can include them directly into the HTML document. Inlining small files in this way allows the browser to proceed with rendering the page.
Post a Comment
Read more

Customize ActionBar | Android Dev

How to change; Actionbar color? Statusbar color? Statusbar text color? **Set this style for the relevant activity <style name= "ThemeActionBar" parent= "ThemeOverlay.AppCompat.Light" > <!-- title text color --> <item name= "android:textColorPrimary" > @color/colorBlack </item> <!-- subtitle text color --> <item name= "android:textColorSecondary" > @color/colorBlack </item> <!-- action menu item text color --> <item name= "actionMenuTextColor" > @color/colorBlack </item> <!-- action menu item icon color - only applies to appcompat-v7 icons :( --> <item name= "colorControlNormal" > @color/colorBlack </item> <!-- enable actionbar --> <item name= "windowActionBar" > true </item> <item name= "windowNoTitle" > false </item> ...
Post a Comment
Read more