Tag Archives: htaccess

Save bandwidth, block image hot linking

Image hot-linking is (simply put): other site is showing your image that still on your server. This can cause problem for bandwidth limited website, they steal your bandwidth! Also, this doesn’t make visitor from that notorious site to come to your site.¬† More visitor for them, more bandwidth lost for you. We will handle this issue using htaccess.

Remember that to use .htaccess fully (including this tips), you have to activate Apache mod_rewrite.

In our case, we will allow only few sites that directly show/link our image. Other sites that have no permission will show an error/no leech image. This is the full .htaccess code:

 

The explanation:

  • (line 1) Activate rule only if mod_rewrite is activated
  • (line 4) we don’t allow Facebook bot to steal our image. Comment (#) this line if you want to allow Facebook to grab image from your site (this is used by Facebook to create thumbnail image whenever FB users posting your website¬† URL)
  • (line 6-9) allow only few sites to direct link/hot link our image: ahowto.net, mp32u.net, google.com and bing.com
  • (line 10) don’t apply the rule for “no leech” image that will be served to bandwidth leecher/stealer. Don’t forget this line, or you’ll get forever loop that eventually stress your webserver.
  • (line 11) Serve the leecher with our error/no leech image. I suggest you to use more informative image, such as image that contain messages “visit my site to view the image”
example no_leech image

just an example that might annoy bandwidth stealer

Special case for Wordpress

Yes, I know that there are few “anti-leech/anti-hot-linkplugins out there, but make sure they have the correct htaccess code placement. Make sure the placement is before main wordpress htaccess default code. So, your wordpress blog htaccess code would be like this:

 

execute html as php via .htaccess

Whenever a web site is accessed by users, the web server detect the file extension and decide what would it do with the file; directly served or run it as script. If the file extension is .htm or .html, the web server usually serve this file directly. If the extension is .php, the web server will run it as script using PHP interperter and serve the script’s result to user.

Some common problem: You discover an ideal piece of software, and you need to add this functionality in your website, however you have to use PHP in your web page for this to working properly. You can simply rename your own webpages to php rather than html, however, your URL is already indexed in search engine as .html file. Renaming your file into .php will render this .html page to be not found (404 error). And you need to resubmit the correct URL to search engine and waiting to be indexed again. What a pain!

There’s a simple solution for that. Just run the PHP codes inside HTML files! But this feature is not enabled by default. You need to add this line below in your .htaccess:

What does that line tell? It tells the web server to treat .html and .htm as PHP script, therefore need to run it against PHP interpreter before serving it to users.

Most of web host allowed you to change/have your own .htaccess file. Be careful when editing .htaccess file, it may already another server side settings for your website. If you didn’t see the file, try choose to “show hidden files” in your file manager (such as cpanel). If it’s still not there, then there’s no .htaccess file yet (not all site had .htaccess by default), so you can create an empty text file named .htaccess.

Achieving what W3 Total Cache does for your non-WordPress site

Before implementing this tips, your server/web host had to use Apache and activated all modules needed as I already posted.
W3 Total Cached had a good .htacess settings that will made your site/blog score higher in Google Page Speed and YSlow. I noticed that these .htaccess settings is quite generic and can be implemented in non-blog, non-Wordpress site.
Here’s the .htaccess settings that you need to copy and paste to your site’s .htaccess:

What it does?

  • enabling gzip compression, your site’s HTML codes will be compressed on-the-fly before served to users/visitors
  • minifying CSS, JS and HTML files from your site
  • add expiry header to your files based on file types
  • set ETag value
  • Specify a Vary: Accept-Encoding header

I’ve implemented this on mp32u.net, the result is as expected.

W3 Total Cache: score higher in PageSpeed and YSlow for your wordpress blog

On previous posts, I talked about enabling gzip compression and image compression on-the-fly for your WordPress blog. These two tips will reduce your blog size and eventually speeding up your blog page load time. In result, your blog will score higher in Google Page Speed and Yahoo YSlow scoring.
By installing W3 Total Cache plugin, you’ll achieve higher score. I can see that this plugin put some nice .htaccess settings for your blog that will make your blog score higher. W3 Total Cache tweaks some valuation components in Page Speed and YSlow valuation such as: minify CSS, JS and HTML; enabling gzip compression, ETag, Vary: Accept-Encoding header and specify cache validator.

Ahosto.net score result after implementing those three tips:

ahowto reduce page size

Reduce page size

ahowto score

Score higher!