If you see 404 file not found errors with @2x in the file name, in either your site’s loading waterfall or the logfiles – you should add this block of code first in you .htaccess file.
When retina.ja tries to fetch images that do not exist, a full version of WordPress is instantiated for every 404 request. Delivering a webserver 404 is done in a millisecond or two, delivering the 404 page from WordPress depends on the TTFB of your site, but can spend several hundred milliseconds. This slows things down.
This fix makes sure that requests for @2x images return a webserver 404 immediately.
# This block of code needs to go above your WordPress rules
<IfModule rewrite_module>
# This is to short circuit non existent Retina image requests generated by retina.js
# without this, the whole wordpress 404 stack will be executed which is very expensive
# We simply redirect the request to the non @2x version of the file, if one exists,
# otherwise, send a 404 status
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} @2x\.[a-z]+$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)@2x(.*)$ $1$2 [E=NORETINA:1]
RewriteCond %{ENV:NORETINA} 1
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* - [L,R=404]
</IfModule>
404 requests can not be cached. All 404 requests there have to be processed every time they are requested – even though they do not exist. That means they add extra load to both the server and the client.
