Leverage Browser Caching

When a webpage loads on your screen there are a lot of little pieces that have come together to create what you’re seeing. Your logo, other images, style sheets, javascript files are among some of the external resources a webpage might use to render itself on your screen. Generally, each time you load the page, every one of those resources has to be requested again, and served up to render the page.

Enter Leveraging Your Browser Caching.

A cache is a set of stored resources for your webpage/website. It holds those elements (external resources) in the browser so that the next time the page needs to be rendered a separate request does not need to be initiated, the browser already has those elements handy to render up the page for you. This makes pages much faster and increases the quality of the user experience … particularly on mobile. There are a number of different ways to leverage browser caching. Most common is through use of an .htaccess file. This file tells browsers what elements and resources to cache, and for how long. It may look something like the following.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
 

This would tell the browser to hold on to some elements (images) for a year and other files for a period of 1 month. It is important to note that when caching your external resources you will want to clear that cache when you make any changes to the website. If you don’t, the changes might not be served up when the page is called until the cache expires. For instance, changing a jpeg image on the site with a new one won’t redner for anyone that has a browser recognizing that jpegs are cached for 1 year. After that year, they’ll see the image change.

More Web Design Blog Content

Why is a short domain name better than a long one?

There are several reasons why a short domain name is generally considered better than a long one: Easier to remember: Short domain names are easier to remember than long ones, which makes it easier for people to find and return to your website. More professional: Short domain names

How Important Is Site Speed?

It is difficult to overstate the significance of a website’s page load time. Users expect websites to load quickly and efficiently in today’s fast-paced digital environment. A slow-loading website can result in frustration and a negative user experience, causing users to leave the site and possibly never return.

Using Warning Lights or Guages

A good article on fox-business about whether your business uses warning lights or gauges to understand how your business is growing. The proper answer should be: gauges. A light is just either on or off, a gauge gives you much more information about where your business is headed,

The Best of HTML 5

Thank Goodness HTML 5 is finally here and it’s everything we expected it to be and more! Out of the many new features with the code standards comes with it many new and exiting programs to facilitate the production of HTML 5 websites. One great new tool is

The Brief Business Guide To Instagram

Instagram is a misunderstood product for most business owners. Isn’t facebook enough? No. Unfortunately you must not only adapt to the changing social media platforms but you have to keep adapting to all the various forms of networkings online. For some it’s fun, for others it’s a necessary

Using Red In Website Design

A key component of website design is color, and many designers choose the color red in particular. Red is a passionate, vivid color that may elicit strong feelings and emotions, making it a fantastic choice for designing a strong, compelling website. These are several justifications on why red