Optimize Your Website’s Rendering Speed

Slow Traffic Keep Right

I never really intended for my fine art website to become a tech blog and I certainly plan to have art related posts appearing in the future. However, as I have been going through the steps of completely reinventing and redesigning my site, I have been running across information that I feel is very important for artists who are administrating websites and for webmasters in general. Since art websites, in particular, often contain little textual content and large amounts of media in the form of images or video, I feel it is imperitive to share my discoveries regarding improving SEO and rendering speeds with the artistic community in order for us to have our websites rank high, reach their full potential, and to help increase sales.

In recent months, Google has announced that web page rendering speed is now one of the many aspects of a website that is considered when determining the placement of pages in their search results. Google, Yahoo!, and Bing now prefer to list web pages that can load quickly in most modern web browsers. The search result providers are striving to create a better overall user experience for Internet surfers over the entire World Wide Web and fast loading websites are getting a higher ranking status. When one considers the increasing number of people who are using smartphones and tablets over cellular networks to access the Internet, it is very understandable why Google desires to serve fast loading pages in their results. Most cellular users have limited data plans and fast loading, small, efficient websites are going to tax these plans less and create a more pleasant user experience.

There has been a little debate over whether webmasters should be concerned with these new search engine speed requirements and even Google claims that only 1% of search results will be affected by these changes. However, with continually evolving Internet and search engine optimization requirements cropping up, it doesn’t hurt to be proactive. Additionally, it has been shown that users are more likely to view more pages of a website if the pages load quickly and this is likely to translate into more sales.

Some of the most important changes that can be made to a web page to make it load faster include the following:

  • Minimize media usage
  • Use compressed and properly sized images
  • Use embedded video instead of locally hosted video, if possible
  • Eliminate the use of background music, etc…
  • Reference external script files instead of placing the code within your pages
  • Keep web pages small
  • Use a fast hosting service
  • Make sure your .htaccess file is setup properly

The reasoning for nearly everything in the list above should be obvious. The more bloated a page is with media, the slower it is going to load. What do you do, however, when you are dealing with an art portfolio consisting primarily of images? Even after utilizing compressed formats and properly sizing the graphics, there can often be many images on a page. The one factor from the list above that is often forgotten, overlooked, or simply unknown is the modifications to the .htaccess file. Believe it or not, there are code snippets available for .htaccess that can have the greatest impact on page rendering and most people who have their own websites know nothing about them.

If you are not familiar with this file, then it is important for you to know that a .htaccess (hypertext access) file is a directory-level configuration file that allows for decentralized management of web server configurations. This is nice for companies that host a lot of websites because every web master is not being forced to use the same server configurations, each user can create their own.

The original purpose of .htaccess was to allow access control on a directory by directory basis by requiring a password to view the content. Now, however, the .htaccess files can override many other configuration settings of the server. The .htaccess files are placed inside the web tree, and are able to override a subset of the server’s global configuration for that particular directory and its sub-directories.

This file can be used to increase a website’s speed by taking advantage of some pretty amazing server modules. Htaccess files are read on every page request and changes to these files take immediate effect. Code snippets within the .htaccess file can password protect directories, block access to specific files, reformat a URL, control browser caching parameters, turn on file compression, and even blacklist problem IP addresses. I became aware of this file after I finally decided to move my main Powers Fine Art Studio business website from free Comcast/Xfinity hosting to a GoDaddy hosting account. Since I decided to use a WordPress framework for my website, once the pages were up and running I began looking for ways to increase the speed at which they load. I also ran into some very interesting information that I wish to share regarding securing important website files that can be potentially attacked and damaged by hackers, etc…

It is important to note that changes to the .htaccess file in the root directory can render your website inaccessible so it is imperative that you create a backup before attempting to modify its contents. I take no responsibility for issues that may arise because you have chosen to edit this important server file. If you make a backup file, however, you should be fine since you can always return things to normal by uploading it. I also recommend trying one change at a time to make sure each module is working for your server and to minimize debugging efforts if the need arises. You should be able to copy and paste each of the code snippets below into your .htaccess file in order to immediately see performance and security improvements. Some of the snippets require modifications to indicate your appropriate domain or directory. Comments in the code are indicated by a pound symbol followed by text.

If you are using WordPress for your website, make sure the WordPress default rules are at the end of the file and place additional code snippets outside the WordPress comments since they are sometimes rewritten during updates.

General useful code snippets

Below you will find some very useful code snippets for the .htaccess file that don’t necessarily improve rendering performance but can aid in creating a more secure website, protect bandwidth, or simply aid in URL redirection.

Redirect from an old site/directory to a new one:

# A simple website redirect snippet Redirect /olddirectory/oldfile.html http://yoursite.com/newdirectory/newfile.html

A more complicated redirect scenario:

Here is the redirect I used from my old domain on Comcast.net to my new domain hosted by GoDaddy. Because my old domain is hosting several images being used by some other websites, I created a redirect that only redirects .html references to my old domain and sends them to my new WordPress PHP welcome page. The images can still be referenced (hot-linked) without causing an error. I simply added the code below to a .htaccess file I created using Windows notepad and uploaded it via FTP to the root directory of my Comcast.net website. It is important to mention that this file is NOT .htaccess.txt it is simply .htaccess without the .txt extension.

# Redirect all references to .html files but not other file types RedirectMatch 301 (.*)\.html$ http://www.powersfineart.com/index.php

Remove WWW from URL for SEO purposes:

It is important to SEO to try to use one form of URL.  For example, you may want to always use http://mysite.com or always use http://www.mysite.com.  Either one is fine but remaining consistent can help with Search Engine Optimization.  If you use Google’s Webmaster Tools, there is even an option that forces Google to display the version you want in their search results.

# Remove WWW from website URL RewriteEngine On RewriteCond %{HTTP_HOST} !^your-site.com$ [NC] RewriteRule ^(.*)$ http://your-site.com/$1 [L,R=301]

Remove file extensions from URLS:

File extensions are useful to developers but there is no need for site visitors to see them.

# Remove file extensions from URLs RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}\.html -f RewriteRule ^(.*)$ $1.html # Replace html with your file extension, eg: php, htm, asp

Prevent viewing of the .htaccess file by preventing external access:

This snippet stops anyone from viewing any file on your site that begins with “hta”:

# Protect the .htaccess file <Files ~ “^.*\.([Hh][Tt][Aa])”> order allow,deny deny from all satisfy all </Files>

Protect WordPress’ wp-config.php file:

Obviously if you aren’t using WordPress for your website or blog then this particular code snippet is not of use to you. However, if you do use WordPress, this is a nice added level of security.

# Protect WordPress wp-config.php file <Files wp-config.php> order allow,deny deny from all </Files>

Hide directories from public viewing:

# hide directory browsing Options -Indexes

Block specific IP addresses (bad users) that are causing problems for you:

Simply replace the xxx.xxx.xxx.xxx with the offending ip address. Add as many of these lines as you like, one after the other to create a black-list.

# Create a simple black list <Limit GET POST> order allow,deny deny from xxx.xxx.xxx.xxx allow from all </Limit>

Disable hotlinking (bandwidth stealing):

Would you like to stop people from linking to your images directly in order to preserve bandwidth?  The snippet below will help with that issue.

# Disable Hot-Linking RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC] RewriteCond %{HTTP_REFERER} !^$ RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://mysite.com/yourimage.gif [L]

Replace mysite.com with your own URL.  All others will be blocked from hot-linking. The http://mysite.com/yourimage.gif is a reference to your own image you want displayed instead of the hot-linked image.

Would you like to block only specific domains from linking to your images? Here’s how:

# Disable Hot-Linking RewriteEngine On RewriteCond %{HTTP_REFERER} ^http://(.+\.)?myspace\.com/ [NC,OR] RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogspot\.com/ [NC,OR] RewriteCond %{HTTP_REFERER} ^http://(.+\.)?livejournal\.com/ [NC] RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://mysite.com/yourimage.gif [L]

Would you like to display a 403 Forbidden error message instead? Here’s how:

# Disable Hot-Linking RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC] RewriteCond %{HTTP_REFERER} !^$ RewriteRule .*\.(jpe?g|gif|bmp|png)$ – [F]

Force downloading for certain files instead of Right-Click + Save As…:

# Force file download instead of Right-Click and Save As <FilesMatch “\.(mov|mp3|pdf)$”> ForceType application/octet-stream Header set Content-Disposition attachment </FilesMatch>

Page rendering optimization snippets

Before implementing these optimization snippets, check your page’s speed insights with Google’s Page Speed Insights.

My welcome page speed score on this website went from an 81 to an 84 and my blog posts are up to a score of 87 by implementing the .htaccess snippets below!

Utilize ModPagespeed – An Apache module for rewriting web pages to reduce latency and bandwidth:

This module isn’t implemented by all servers but I know that GoDaddy uses it.

# Page speed module used by GoDaddy <IfModule pagespeed_module> ModPagespeed on # using commands,filters etc </IfModule>

Enable compression:

If compression is enabled on your host server, it can greatly speed up your website rendering by reducing the size of the pages being served. If compression isn’t enabled, you need to find a better host!

# BEGIN COMPRESSION <IfModule mod_deflate.c> # Enable compression and deflate (compress) resources Addtype font/opentype .otf Addtype font/eot .eot Addtype font/truetype .ttf AddOutputFilterByType DEFLATE text/html text/plain text/xml AddOutputFilterByType DEFLATE text/css application/x-javascript AddOutputFilterByType DEFLATE text/css text/html text/plain text/xml text/javascript AddOutputFilterByType DEFLATE image/svg+xml image/svg font/opentype font/truetype font/eot image/x-icon <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html </IfModule> <IfModule mod_headers.c> # Make sure proxies deliver correct content Header append Vary User-Agent env=!dont-vary # Ensure proxies deliver compressed content correctly Header append Vary Accept-Encoding </IfModule> </IfModule>

Turn off ETags (entity tags):

ETags are a mechanism that provides web cache validation. Although they are meant to preserve bandwidth, often they don’t work correctly. There is debate whether ETags should be disabled or not but I found my site to be faster with them disabled.

<IfModule mod_headers.c> # No ETags, No Pragma Header unset Pragma Header unset ETag # Default cache time to 1 year (31536000 sec) Header set Cache-Control “max-age=31536000, public, must-revalidate” </IfModule>

Set length of time to cache different types of media:

By determining how long to cache certain media, bandwidth is saved when a user revisits pages on a website.

# CACHE SETTINGS (mod_expires) <ifModule mod_expires.c> ExpiresActive On ExpiresDefault “access plus 5 seconds” ExpiresByType image/x-icon “access plus 2592000 seconds” ExpiresByType image/jpeg “access plus 2592000 seconds” ExpiresByType image/png “access plus 2592000 seconds” ExpiresByType image/gif “access plus 2592000 seconds” ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds” ExpiresByType text/css “access plus 604800 seconds” ExpiresByType text/javascript “access plus 216000 seconds” ExpiresByType application/javascript “access plus 216000 seconds” ExpiresByType application/x-javascript “access plus 216000 seconds” ExpiresByType text/html “access plus 600 seconds” ExpiresByType application/xhtml+xml “access plus 600 seconds” </ifModule>

Disable caching for PHP files:

# No cache for php-files <FilesMatch “\.(php)$”> <IfModule mod_expires.c> ExpiresActive Off </IfModule> <IfModule mod_headers.c> Header set Cache-Control “private, no-cache, no-store, proxy-revalidate, no-transform” </IfModule> </FilesMatch> # END CACHING

Additional references for .htaccess code snippets

Perishable Post – http://perishablepress.com/stupid-htaccess-tricks/#top

The Ultimate HtAccess –http://www.askapache.com/htaccess/htaccess.html#

Tagged with: , , , , , , , , , , , , , , , , ,
Comments (0)

Be the first to leave a reply!

Leave a Comment

* required

This is a unique website which will require a more modern browser to work!

Please upgrade today!