Description
When we talk about “performance” we’re ultimately talking about how fast from the time someone clicks a link to your site or types it in the address bar of the browser and hits “enter” does your site take to fully load. i.e. How efficient is your site + server setup to deliver content to your users? This is important because if your site loads too slowly it can only have negative impacts on you and your visitors.
One of the key factors Google and other top search engines grade your sites overall usefulness on is how quickly your site loads. This means, if your site loads slowly or inconsistently they will show you in their search results less often. They are in business to make money by pointing people towards relevant data as quickly as possible.
Live Performance Metrics Tools
These tools can help you understand how your sites are performing from the outside and what to do about poor performance.
Caching and Performance Metrics Software
The software listed here will help you solve performance and caching issues with your site. The majority of it will need to be run on a VPS, elastic or dedicated server you have full control over. Most of these methods will not work with shared hosting. If performance is important to you, shared hosting will not suit your needs.
- Code optimization
- Code minification / combination
- Database optimization
- Slow Query Log
- Max Connections
- Worker Threads
- Memory Usage
- Key Buffer
- Query Cache
- Sort Buffer
- Joins
- Temp Tables
- Table (Open & Definition) Cache
- Table Scans (read_buffer)
- Table Locking
- Innodb Status
- Image optimization
- SVGO which has a Grunt task called grunt-svgmin
- SVGCleaner
- Code caching
- Varnish – Standalone caching HTTP reverse proxy.
- Memcached – An in-memory key-value store for small chunks of arbitrary data (strings, objects) from results of database calls, API calls, or page rendering.
- Redis – In-memory data structure store, used as database, cache and message broker.
- Google mod_pagespeed – A Google Apache httpd / nginx module.
- nginx reverse proxy caching server – A method of using nginx as a caching server in front of Apache httpd or other webservers.
- PHP OPcache / PHP APC / APCu – Various PHP caching methods.
- Or with 3rd party / remote services:
- CDNs / Content Delivery Networks – Remote data and resource storage / delivery / caching.
- DOS Arrest – DDoS protection, caching proxy, CDN, and more.
- CloudFlare – DDoS protection, caching proxy, CDN. and more.
- Clients web browser: Google Chrome, Firefox, Safari, etc.
- Apache httpd mod_cache, mod_expires, mod_gzip, mod_deflate and mod_headers
- Or with caching plugins:
- These plugins are trying to handle things too late in the process and often break perfectly working code or slow the site even more.
- Many of these plugins use inefficient or cumbersome methods which may or may not work and may or may not benefit you.
- Most people do not understand caching and these plugins are loaded with options that can break your site if you do not know what they’re doing.
Often there are many ways to accomplish a given outcome, some can be extremely inefficient or cumbersome. This step starts from the first line of code you write or include in your project and deserves proper forethought and planning.
We’re mostly talking about css and js files that can have whitespace and redundant code removed to reduce file size, as well as being concatenated into a single file to reduce requests to the server.
Test and refine your setup: mysql-tuning-primer-script (right click and “save as..”)
Currently the script handles recommendations for the following:
Image optimization is one of the most forgotten or ignored areas. Many people often upload images full-sized from a camera without first preparing the images for use on websites. For 99% of all purposes, full-sized images are not required and and significantly increase load times or make a site impossible to view normally without abnormally long waits.
Some tools to help with this
Web:
Plugins:
PNG:
PNG Quantizer:
JPG:
GIF:
The Yeoman team have a Node.js wrapper called node-gifsicle that makes this available as a local dependency on OS X, Linux and Windows in case you’re interested.We have wrappers for optipng, jpegtran, pngquant too.
SVG:
This is a multi-level issue that also includes the above items. Below is a list of some of the most popular methods for achieving this.
Caching can be done on the server with:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | ## mod_expires Caching ## # Cache Control via HTTP Headers + Expires # Generation of Expires and Cache-Control HTTP headers according to user-specified criteria # http://httpd.apache.org/docs/2.0/mod/mod_headers.html # ---------------------------------------------------------------------- # Expires Defaults <IfModule mod_expires.c> ExpiresActive On # Set default expires to 2 days ExpiresDefault A172800 # Set default application expires ExpiresByType application/java A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/x-font-svg A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/x-font-woff A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType application/pdf A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType application/zip A31536000 # Set default audio expires ExpiresByType audio/midi A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 # Set default image expires ExpiresByType image/bmp A31536000 ExpiresByType image/gif A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/png A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType image/tiff A31536000 ExpiresByType image/x-icon A31536000 # Set default text expires ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 # Set default video expires ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType video/divx A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType video/quicktime A31536000 </IfModule> # No caching for dynamic files <filesMatch "\.(php|cgi|pl|htm)$"> ExpiresDefault A0 Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0" Header set Pragma "no-cache" </filesMatch> # 1 MIN <filesMatch "\.(html)$"> ExpiresDefault A60 Header set Cache-Control "max-age=60, must-revalidate" </filesMatch> # 2 DAYS <filesMatch "\.(xml|txt)$"> ExpiresDefault A172800 Header set Cache-Control "max-age=172800, must-revalidate" </filesMatch> # 1 WEEK <filesMatch "\.(jpg|jpeg|png|gif|swf|js|css)$"> ExpiresDefault A604800 Header set Cache-Control "max-age=604800, must-revalidate" </filesMatch> # 1 MONTH <filesMatch "\.(ico|pdf|flv)$"> ExpiresDefault A2419200 Header set Cache-Control "max-age=2419200, must-revalidate" </filesMatch> |
ETags are difficult because they take precedence for caching in most browsers. You can change all the headers you want, but if the ETag associated with a file is always the same, caching will never work how you expect. In most situations, you should turn your ETag headers off to control this behavior.
1 2 3 4 5 6 7 8 | ## Remove Browswer Entity Tags ## <IfModule mod_headers.c> <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$"> Header set Expires "Thu, 30 Dec 2021 21:00:00 GMT" Header unset ETag FileETag None </FilesMatch> </IfModule> |
1 2 3 4 5 6 7 | ## Remove browser bugs from really old browsers ## <IfModule mod_headers.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | ## mod_deflate HTML, CSS, JavaScript, Text, XML and fonts Compression ## # Gzip compression # Compress content before it is delivered to the client # http://httpd.apache.org/docs/2.0/mod/mod_deflate.html <IfModule mod_deflate.c> <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> <IfVersion < 2.4.4> <IfModule filter_module> # HTML, TXT, CSS, JavaScript, JSON, XML, HTC: FilterDeclare COMPRESS FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $image/x-icon FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype FilterChain COMPRESS FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no </IfModule> </IfVersion> <IfVersion >= 2.4.4> <IfModule filter_module> FilterDeclare COMPRESS FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'text/html'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'text/css'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'text/plain'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'text/xml'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'text/x-component'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/javascript'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/json'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/xml'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/xhtml+xml'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/rss+xml'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/atom+xml'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/vnd.ms-fontobject'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'image/svg+xml'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'image/x-icon'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'application/x-font-ttf'" FilterProvider COMPRESS DEFLATE "%{Content_Type} = 'font/opentype'" FilterChain COMPRESS FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no </IfModule> </IfVersion> <IfModule !mod_filter.c> # Legacy versions of Apache httpd AddOutputFilterByType DEFLATE text/html text/plain text/css application/json AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/xml application/xml text/x-component AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype </IfModule> </IfModule> |
As a last resort where the above options are not possible due to limitations of hosting or control, there are several plugin options at WordPress.org, none of which are recommended.
For these reasons: