$path = "img/yourasset.pgn";
header("Cache-Control: private, max-age=86400, pre-check=86400");
header("Pragma: private");
header("Expires: " . date(DATE_RFC822,strtotime("+40 week")));
    
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == filemtime($path))) {
        // send the last mod time of the file back
        header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($path)).' GMT', true, 304);
        exit;
    }
    
    header("Content-type: image/png");
    header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($path)) . ' GMT');
    echo file_get_contents($path);

• max-age: when defined, it doesn't make a new request to the server
• Cache-control: no-cache, must-revalidate, max-age:0
• Be explicit, use max-age or no-cache!
• no-store for confidential information

• Manipulating headers using .htaccess

<ifmodule mod_headers.c="">
    <filesmatch "\.(jpg|jpeg|png|gif|swf)$"="">
        Header set Cache-Control "max-age=604800, public"
    </filesmatch>
    <filesmatch "\.(js|css|swf)$"="">
        Header set Cache-Control "max-age=604800"
    </filesmatch>
</ifmodule>

<IfModule mod_headers.c>
	Header unset Cookie
    Header unset Set-Cookie 
</IfModule>

• API Server/ Mid-Tier should implement cache-control
  
• However...
• It is still a round trip to server to find out if the data is fine.
  
• Sometimes we don't own the api

• Use them for crucial data, API integration if necessary
• Try to keep the entire REQUEST under 1.5kb, cookies included 
• Always use path for limit scope

• Browser Plugins
• Your favourite inspector
• PageSpeed Insights
• YSlow
• http://www.webpagetest.org
  
• Real-Time Monitoring
• New Relic 
• Device speed simulation 
  
• Slowy App

• YUI Compressor (command line), Google Closure Tool, PageSpeed Insights, minify-maven-plugin
• Execution time libraries: make sure you will cache the generated output.
• For CCS, best practice: using along with SASS compilers.

• Minify our images
• Choose the best format.
• Photoshop's "Save For Web". 
• ImageOptin
• PageSpeed Insights
• Use image sprites

• Manipulating elements causes reflow
• Understand reflow
• Reads DOM tree, style structure, render tree, paint
• Get first, DOM actions perform at once
• Optimization
• display:none; your element, make all changes, restore
• clone your element, make changes, swap back

• Prefer using it along with CSS. Not good experiences using it inline.

body {background: url(data:image/png;base64,/9j/4AAQSkZJRgABAgAAZABkAD/2wAAY[...]}

 base64_encode(file_get_contents($path));

• Moving Elements With Translate() Is Better Than Pos:abs Top/left (why)
  
• Use CSS animations for visual and non-requirement effects
• Use requestAnimationFrame()
• Make it pollyfill
• DocumentFragment for holding changes

• Leverage transitions and transforms
• CSS code is always lighter than images
• Use javascript fallbacks and leverage CSSPIE usage for old browsers
• Don't use @import unless you are using SASS

• Live edit 
• Breakpoints
• Watch Memory
• Don't abuse the Garbage Collector
• Pretty code for debugging and inspection
• Under the hood
• Keep lower than 60 FPS, especially for heavy animation apps
• Rules
• chrome://flags/
  

• Google Canary
• JSPref
• Chrome Inspector/Firebug
• Weiner (Remote Debug)
• Livereload.com