Skip to content

Files

Latest commit

 

History

History
120 lines (111 loc) · 5.59 KB

Performance.md

File metadata and controls

120 lines (111 loc) · 5.59 KB

Performance:

  • add an index for where clauses columns
  • use views
  • create Classes only when its required
  • Check configuration of ...
    • file uploads
    • upload_max_filesize
    • post_max_size
    • max_execution_time
    • shell_exec
    • max_input_time
    • memory_limit
  • use nginx instead of Apache
  • minimize JS/CSS/SVG/JPEG/PNG/AVIF/WEBP/GIF etc.
  • concat JS/CSS (less HTTP requests)
  • Compress (Gzip) necessary to all assets
  • make use of CDN (be closer to the user)
  • keep <meta charset=""> just below <title>
  • use Cache (Expires and ETag headers) at a certain Level
  • use cache busting techniques (?v=...) wisely, e.g., <link rel="icon" href="/favicon.ico?v=2" />
  • use "===" instead of "=="
  • str_replace is faster than preg_replace, but strtr is faster than str_replace by a factor of 4
  • Pass reference to the function if it does not affect your logic
  • keep JavaScript after the content
  • use memcache for the reducing database load and APC for opcode caching and intermediate code optimization
  • close database connections
  • reduce Number of hits to DB
  • don´t forget to disable debugging functions!
  • use native functions
  • put most frequently used switch/if-else case on the top
  • use JSON instead of XML
  • use isset() where ever possible instead of using count(), strlen(), sizeof()
  • use '' (single quotes) instead of ""(double quootes)
  • concat strings with points
  • make use of Call-By-Reference/Pointer
  • use <svg>-icons/graphics and so on
  • use the <picture>-HTML element (<img>as a fallback)
  • use prefetch methods like lazy-load when possible, e.g., loading='lazy' in <img ... >
  • use <link rel="preconnect"> and <link rel="dns-prefetch"> to the CDN domain(s).
  • inline critical CSS
  • use Keep-Alive header (less TCP connections)
  • minimize or stop redirects
  • calculate only once
  • aggregate and reduce amount of XHR calls
  • set AllowOverride None in httpd.conf (Apache)
  • use GOTO for code isolating
  • prefer DEFER Over ASYNC
  • use WebM instead of (animated) GIF
  • use WebP image format
  • use Accelerated Mobile Pages (AMP) & Instant Articlss
  • use CSS rel="preload" option
  • use httpd.conf instead of .htaccess (if possible)
  • use unary plus (+) to convert string to number (applicable for JS)
  • use one Framework maximum
  • use content-visibility: auto in your CSS for text-containers.
  • reduce number of images
  • optimize images/videos
  • minimize Code
  • avoid CSS frameworks
  • use PurgeCSS
  • use static pages if possible
  • do not use analytics
  • avoid ads
  • avoid nesting elements in CSS
  • send emails in text rather html format
  • use guard clauses to exit early
  • use dedicated performance benchmark methods, e.g. performance.now() in JS
  • use .map() method for array manipulations
  • use console.table() in JS to print debug information
  • use <use> to eliminate duplicates within svg
  • use <img> over CSS background-image
  • Functions are faster than static methods are faster than object methods
  • Call by Value is slightly faster than Call by Reference
  • use native functions, e.g., navigator.clipboard.writeText()
  • do not use async-snippets in JS
  • use display:none for hiding/showing over creating new elements
  • use navigator.share rather than third party libraries
  • use textContent over innerText for reading the content of an element
  • use insertAdjacentHTML or appendChild over innerHTML
  • use the once param for one and done events

Snippets

Asnyc JS snippets are an anti-pattern

<script>
  var script = document.createElement('script');
  script.src = 'file.js';
  document.head.appendChild(script);
</script>

el.addEventListener('click', handleClick, {
  once: true
});

External Resources: