Last Updated: February 25, 2016

Pagespeed: Serve resources with proper media types

Serve resources with the proper media types (MIME-type). Ensuring the right media types are being served, allows for effective browser caching through Apache's ModExpire or FilesMatch.

From HTML5 Boilerplate.

In .htaccess:

# ----------------------------------------------------------------------
# | Media types |
# ----------------------------------------------------------------------

# Serve resources with the proper media types (f.k.a. MIME types).
#
# https://www.iana.org/assignments/media-types/media-types.xhtml
# https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype

<IfModule mod_mime.c>

 # Data interchange

 AddType application/json json map topojson
 AddType application/ld+json jsonld
 AddType application/vnd.geo+json geojson
 AddType application/xml atom rdf rss xml


 # JavaScript

 # Normalize to standard type.
 # https://tools.ietf.org/html/rfc4329#section-7.2

 AddType application/javascript js


 # Manifest files

 # If you are providing a web application manifest file (see
 # the specification: https://w3c.github.io/manifest/), it is
 # recommended that you serve it with the `application/manifest+json`
 # media type.
 #
 # Because the web application manifest file doesn't have its
 # own unique file extension, you can set its media type either
 # by matching:
 #
 # 1) the exact location of the file (this can be done using a
 # directive such as `<Location>`, but it will NOT work in
 # the `.htaccess` file, so you will have to do it in the main
 # server configuration file or inside of a `<VirtualHost>`
 # container)
 #
 # e.g.:
 #
 # <Location "/.well-known/manifest.json">
 # AddType application/manifest+json json
 # </Location>
 #
 # 2) the filename (this can be problematic as you will need to
 # ensure that you don't have any other file with the same name
 # as the one you gave to your web application manifest file)
 #
 # e.g.:
 #
 # <Files "manifest.json">
 # AddType application/manifest+json json
 # </Files>

 AddType application/x-web-app-manifest+json webapp
 AddType text/cache-manifest appcache manifest


 # Media files

 AddType audio/mp4 f4a f4b m4a
 AddType audio/ogg oga ogg opus
 AddType image/bmp bmp
 AddType image/svg+xml svg svgz
 AddType image/webp webp
 AddType video/mp4 f4v f4p m4v mp4
 AddType video/ogg ogv
 AddType video/webm webm
 AddType video/x-flv flv

 # Serving `.ico` image files with a different media type
 # prevents Internet Explorer from displaying then as images:
 # https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

 AddType image/x-icon cur ico


 # Web fonts

 AddType application/font-woff woff
 AddType application/font-woff2 woff2
 AddType application/vnd.ms-fontobject eot

 # Browsers usually ignore the font media types and simply sniff
 # the bytes to figure out the font type.
 # https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
 #
 # However, Blink and WebKit based browsers will show a warning
 # in the console if the following font types are served with any
 # other media types.

 AddType application/x-font-ttf ttc ttf
 AddType font/opentype otf


 # Other

 AddType application/octet-stream safariextz
 AddType application/x-bb-appworld bbaw
 AddType application/x-chrome-extension crx
 AddType application/x-opera-extension oex
 AddType application/x-xpinstall xpi
 AddType text/vcard vcard vcf
 AddType text/vnd.rim.location.xloc xloc
 AddType text/vtt vtt
 AddType text/x-component htc

</IfModule>

# ----------------------------------------------------------------------
# | Character encodings |
# ----------------------------------------------------------------------

# Serve all resources labeled as `text/html` or `text/plain`
# with the media type `charset` parameter set to `UTF-8`.
#
# https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset

AddDefaultCharset utf-8

# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

# Serve the following file types with the media type `charset`
# parameter set to `UTF-8`.
#
# https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset

<IfModule mod_mime.c>
 AddCharset utf-8 .atom \
 .bbaw \
 .css \
 .geojson \
 .js \
 .json \
 .jsonld \
 .rdf \
 .rss \
 .topojson \
 .vtt \
 .webapp \
 .xloc \
 .xml
</IfModule>

#php

#apache

#leverage browser caching

#mime-types

#media-types

#html5boilerplate