markdown 现场速度优化（GZip压缩）

Posted 2021-05-06

# compresses JS, CSS, etc files
<ifmodule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</ifmodule>

# Cache Control 
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|svg)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>

<?php
ob_start("ob_gzhandler");

## Compress Images
https://tinypng.com/

## Compress SVGs
https://jakearchibald.github.io/svgomg/  
Untick removeViewbox (I find keeping it helps with cross-browser responsiveness)

## Lazy load background images further down the page
#### ScrollReveal
1. CSS  
`[data-animate*="hide-bg"] {
   background-image: none !important;
}`
2. JS  
` window.sr = ScrollReveal();`  
`sr.reveal("[data-animate]", {`  
   `beforeReveal: function (domEl) {`  
       `domEl.setAttribute("data-animate", "scrolled");`  
   `}`  
`});`  
3. Tag any elements with `data-animate="hide-bg"`

## Lazy load `<img>`
1. Use some javascript to load <img> further down the page elements
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/  
Javascript library: https://github.com/verlok/lazyload