performance posts - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    em: "em",
    code: "code",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into performance of web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Cache Pages"
    }), "\n", _jsxs(_components.p, {
      children: ["Dynamic pages should be cached in order to improve performance.  Understand how ", _jsx(_components.a, {
        href: "https://www.mnot.net/cache_docs/",
        children: "Web Caching"
      }), " works."]
    }), "\n", _jsx(_components.h2, {
      children: "Use Cache Manifest for Offline Performance"
    }), "\n", _jsxs(_components.p, {
      children: ["If you would like your page to be accessible offline after a user has already visited it, look into the ", _jsx(_components.a, {
        href: "http://www.w3.org/TR/2011/WD-html5-20110525/offline.html",
        children: "Cache Manifest"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Optimize Images"
    }), "\n", _jsx(_components.p, {
      children: "Compress and crop images for best performance."
    }), "\n", _jsx(_components.h2, {
      children: "Gzip Content"
    }), "\n", _jsxs(_components.p, {
      children: ["Most web servers can be configured to automatically do this for you.  Look into ", _jsx(_components.a, {
        href: "https://developer.yahoo.com/performance/rules.html#gzip",
        children: "Yahoo's Developer Network discussion"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "Concatenate Stylesheets and Script Files"
    }), "\n", _jsxs(_components.p, {
      children: ["Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into ", _jsx(_components.a, {
        href: "http://gruntjs.com/",
        children: "Grunt"
      }), " for a Node.js solution."]
    }), "\n", _jsx(_components.h2, {
      children: "Use CSS Image Sprites When Possible"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.a, {
        href: "http://alistapart.com/article/sprites",
        children: "CSS Image Sprites"
      }), " when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression."]
    }), "\n", _jsx(_components.h2, {
      children: "Split Static Content to Its Own Domain"
    }), "\n", _jsxs(_components.p, {
      children: ["Static content like images, CSS, JavaScript, and other content should go in a separate domain that ", _jsx(_components.em, {
        children: "does not use cookies"
      }), ".  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible."]
    }), "\n", _jsx(_components.h2, {
      children: "Minify JavasScript"
    }), "\n", _jsxs(_components.p, {
      children: ["Minify your JavaScript if possible.  Use the ", _jsx(_components.a, {
        href: "https://developers.google.com/closure/compiler/",
        children: "Google Closure Compiler"
      }), " or look into ", _jsx(_components.a, {
        href: "http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node",
        children: "this Stackoverflow question for concatenating and minifying JavaScript files in Node"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Make a Favicon.ico File"
    }), "\n", _jsxs(_components.p, {
      children: ["Make sure there’s a ", _jsx(_components.code, {
        children: "favicon.ico"
      }), " file in the root of the site, i.e. ", _jsx(_components.code, {
        children: "/favicon.ico"
      }), ". ", _jsx(_components.a, {
        href: "https://mathiasbynens.be/notes/rel-shortcut-icon",
        children: "Browsers will automatically request it"
      }), ", even if the icon isn’t mentioned in the HTML at all. If you don’t have a ", _jsx(_components.code, {
        children: "/favicon.ico"
      }), ", this will result in a lot of 404s, draining your server’s bandwidth."]
    }), "\n", _jsxs(_components.p, {
      children: ["Check your Favicon against ", _jsx(_components.a, {
        href: "http://realfavicongenerator.net/",
        children: "The Real Favicon Generator"
      }), ".  It takes care of favicons for:"]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Desktop Browsers"
      }), "\n", _jsx(_components.li, {
        children: "iOS Home Screen (Favorite icons)"
      }), "\n", _jsx(_components.li, {
        children: "Android Home Screen (Favorite icons)"
      }), "\n", _jsx(_components.li, {
        children: "Windows 8 Tile (Favorite tiles)"
      }), "\n", _jsx(_components.li, {
        children: "Windows Task Bar (App style icon)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "It also helps you compress the icons and generates the HTML markup for you."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into performance of web applications.</p>
<h2>Cache Pages</h2>
<p>Dynamic pages should be cached in order to improve performance.  Understand how <a href="https://www.mnot.net/cache_docs/">Web Caching</a> works.</p>
<h2>Use Cache Manifest for Offline Performance</h2>
<p>If you would like your page to be accessible offline after a user has already visited it, look into the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/offline.html">Cache Manifest</a>.</p>
<h2>Optimize Images</h2>
<p>Compress and crop images for best performance.</p>
<h2>Gzip Content</h2>
<p>Most web servers can be configured to automatically do this for you.  Look into <a href="https://developer.yahoo.com/performance/rules.html#gzip">Yahoo&#x27;s Developer Network discussion</a> for more information.</p>
<h2>Concatenate Stylesheets and Script Files</h2>
<p>Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into <a href="http://gruntjs.com/">Grunt</a> for a Node.js solution.</p>
<h2>Use CSS Image Sprites When Possible</h2>
<p>Use <a href="http://alistapart.com/article/sprites">CSS Image Sprites</a> when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression.</p>
<h2>Split Static Content to Its Own Domain</h2>
<p>Static content like images, CSS, JavaScript, and other content should go in a separate domain that <em>does not use cookies</em>.  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible.</p>
<h2>Minify JavasScript</h2>
<p>Minify your JavaScript if possible.  Use the <a href="https://developers.google.com/closure/compiler/">Google Closure Compiler</a> or look into <a href="http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node">this Stackoverflow question for concatenating and minifying JavaScript files in Node</a>.</p>
<h2>Make a Favicon.ico File</h2>
<p>Make sure there’s a <code>favicon.ico</code> file in the root of the site, i.e. <code>/favicon.ico</code>. <a href="https://mathiasbynens.be/notes/rel-shortcut-icon">Browsers will automatically request it</a>, even if the icon isn’t mentioned in the HTML at all. If you don’t have a <code>/favicon.ico</code>, this will result in a lot of 404s, draining your server’s bandwidth.</p>
<p>Check your Favicon against <a href="http://realfavicongenerator.net/">The Real Favicon Generator</a>.  It takes care of favicons for:</p>
<ul>
<li>Desktop Browsers</li>
<li>iOS Home Screen (Favorite icons)</li>
<li>Android Home Screen (Favorite icons)</li>
<li>Windows 8 Tile (Favorite tiles)</li>
<li>Windows Task Bar (App style icon)</li>
</ul>
<p>It also helps you compress the icons and generates the HTML markup for you.</p>


This post was originally on a blog I started for creating web applications. This post goes into performance of web applications.

## Cache Pages

Dynamic pages should be cached in order to improve performance.  Understand how [Web Caching](https://www.mnot.net/cache_docs/) works.

## Use Cache Manifest for Offline Performance

If you would like your page to be accessible offline after a user has already visited it, look into the [Cache Manifest](http://www.w3.org/TR/2011/WD-html5-20110525/offline.html).

## Optimize Images

Compress and crop images for best performance.

## Gzip Content

Most web servers can be configured to automatically do this for you.  Look into [Yahoo's Developer Network discussion](https://developer.yahoo.com/performance/rules.html#gzip) for more information.

## Concatenate Stylesheets and Script Files

Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into [Grunt](http://gruntjs.com/) for a Node.js solution.

## Use CSS Image Sprites When Possible

Use [CSS Image Sprites](http://alistapart.com/article/sprites) when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression.

## Split Static Content to Its Own Domain

Static content like images, CSS, JavaScript, and other content should go in a separate domain that *does not use cookies*.  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible.

## Minify JavasScript

Minify your JavaScript if possible.  Use the [Google Closure Compiler](https://developers.google.com/closure/compiler/) or look into [this Stackoverflow question for concatenating and minifying JavaScript files in Node](http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node).

## Make a Favicon.ico File

Make sure there’s a `favicon.ico` file in the root of the site, i.e. `/favicon.ico`. [Browsers will automatically request it](https://mathiasbynens.be/notes/rel-shortcut-icon), even if the icon isn’t mentioned in the HTML at all. If you don’t have a `/favicon.ico`, this will result in a lot of 404s, draining your server’s bandwidth.

Check your Favicon against [The Real Favicon Generator](http://realfavicongenerator.net/).  It takes care of favicons for:

* Desktop Browsers
* iOS Home Screen (Favorite icons)
* Android Home Screen (Favorite icons)
* Windows 8 Tile (Favorite tiles)
* Windows Task Bar (App style icon)

It also helps you compress the icons and generates the HTML markup for you.
