Browser Caching CSS, JavaScript and Favicon

Making CSS Faster With Browser Caching

Recently we have been trying to implement some basic good practices for making our websites as fast as they possibly can be. We feel this is worth while and our target is to have our pages load 0.8 seconds and below.

Our index page according to pingdom tools takes 1.3 seconds to load so there is room for improvement and we should be able to get it down a little bit. Although this site speed is perfectly acceptable we want to try and make it as quick as we possibly can.

We can control browser caching by sending the cache-control headers to the user agent to inform it that the item should be cached until a specified time has passed.

cache-control header

Browser Caching CSS

The idea behind browser caching is any items which are static in terms of content can be saved to local storage allowing quick retrieval if the cached file is required again.

An obvious candidate for static content are CSS files as they do not change very much and can be considered almost static.

Before we can take advantage of browser caching our first task was to enable the correct Apache module allowing us to define a expires time header to our responses when the file is a certain mime type.

root@chic:~# a2enmod expires && /etc/init.d/apache2 reload

Now we have enabled the correct module and had Apache reload its configuration we are ready to add some directives to our configuration file. We use a config file for each site located under the sites-available directory but your mileage may vary.

ExpiresActive On

This will enable the expires module and should be placed inside your <VirtualHost> tags it does not matter were it goes inside.

ExpiresByType text/css "access plus 1 month”

Adding this directive will make all the CSS files Apache serves have an expiry date of the access date plus a month. The expires by type directive will send a header with the cache-control set to a month in the future.

You can play about with this and change it to a year it depends on how much the style on your site changes. The available options are seconds, minutes, hours, days, weeks, months and years.

For us a month is plenty of time and we should not have to many changes to our external CSS files by then but we can just clear our cache  if we make changes although these will only be available to users who do not have it cached.

Caching Icons

Another item we use on our website that is perfect for a long expiry time is our favicon which we have only ever changed a few times in over ten years so we set this one nice and long.

ExpiresByType image/x-icon "access plus 1 year”

Using the above directive will tell Apache to send a cache header which will expire a year in the future. For most websites this directive makes sense because it rarely changes unlike database driven dynamic content.

JavaScript Browser Caching

We cache our JavaScript at only one week because we feel our JavaScript can change quite a bit due to our release cycle. We like to get the software out the door with a minimal feature set then implement the rest as we go on a rolling release cycle.

For us this allows the system to evolve through usage and this can allow us to not waste time on unused stuff which might not be realised during initial development.

ExpiresByType application/javascript "access plus 1 year"

Same rules apply to this as it did with the CSS files some websites may not change their JavaScript much so a longer expiry date might be better.

After making all of those changes to the <VirtualHost> for our websites we need to reload Apache so it reads the new changes to enable caching.

root@chic:~# /etc/init./apache reload

Conclusion

Now our page load time is down to 0.895 seconds which is a definite improvement over our earlier tests. Testing has shown on average we have a 28% wait time, 8% connection time and 58% receive.

We will be attempting to improve our website speed even more and will hopefully be writing a blog posting about it in the coming months.

One last thing, we will be adding a few resource and links pages to this blog this weekend in the hope it might be useful to somebody.

The Care Homes Directory News Syndication

Spreading the News

Due to the nature of our development cycle we have been able to rapidly develop a new feature providing our news articles as RSS and Atom syndication feeds. We thought writing an article to expand on the release would be a good thing.

Both our care and nursing  related news feeds are available to both users and web sites allowing access to our news stories by linking inward to our web site. If you run a website you are free to use our feed directly from your website.

RSS and Atom are two popular methods for syndicating content so it was a simple progression to provide a feed to our visitors. The feeds provide the latest 13 headlines along with description , link back and other data.

RSS and Atom Feeds

RSS Feed

Creating an RSS feed is simple and we just had to add an output filter to change it from HTML markup to XML markup.

The format of RSS is very simple and we went with RSS 2.0 to take advantage of this simplicity. One thing we noticed is RSS has no official body to guide the standard and there are a few differing versions.

Apart from this little problem it seems to be a widely used format so we feel that not offering it would be a worse situation for us.

Each feed is encapsulated inside some <rss> tags which we have set the version attribute to 2.0 as we decided to use this version.

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
  ....
</rss>

Next you need to add the markup for the actual feed so you give it a title a link to the main page and a short description of the feed.

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
  <title>My Feed Title</title>
  <link>http://www.example.com/rss.php</link>
  <description>This is an example description for an RSS feed.</description>
  ....
</rss>

After this each we can add the actual content of the feed for us this is our news headlines which are the 13 most recent stories. It was simple for us to just use existing code to fetch the data so it was a simple task.

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
  <title>My Feed Title</title>
  <link>http://www.example.com/rss.php</link>
  <description>This is an example description for an RSS feed.</description>
  <item>
    <title>Feed Item One</title>
    <link>http://www.carehomes.net/feed_item.php</link>
    <description>Feed item one description.</description>
  </item>
  <item>
    <title>Feed Item Two</title>
    <link>http://www.carehomes.net/another_item.php</link>
    <description>Feed item two description.</description>
  </item>
</rss>

The last thing to do is output the correct header for the content we tried to use application/rss+xml but we found this did not work so well with browser so we switched to just application/xml.

header('Content-Type: application/xml');

And below is the result of our new care and nursing related RSS news feed allowing visitors and site owners to access our news. We like to use Akregator for accessing our news feeds and have used it in the past with other websites feeds.

Over time we will be reviewing our RSS feed and adding some additional tags if we feel they add some value to the product.

RSS News Feed

Atom Feed

Now we have finished implementing the RSS feed we decided to support the other popular syndication format called Atom. This format seems to have a standard body to help guide the development of the standard which can be seen as a good thing.

Atom is defined in RFC4287 and this is the specification we use while developing although there might be other versions of the specification this is good enough for us.

Like RSS an Atom feed is an XML packet containing information on the feed as well as the content from the feed.

The feed is encapsulated inside a set of <feed> tags for the root node then some information about the feed its self.

<?xml version="1.0" encoding="utf-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
  ....
</feed>


After the feed data has been defined each element of the actual feed is inside the <entry> tags this contains the data for that item. For us we define the <title>, <link>, <id>, <updated> and <summary> tags so the actual entry looks like this.

<?xml version="1.0" encoding="utf-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>My Atom Feed</title>
  <link href="http://www.example.com/atom.php" />
  <updated>2013-07-08 13:55:48</updated>
  <author>Feed Author</author>
  <id>http://www.example.com/</id>
  <entry>
    <title>Entry One</title>
    <link href="http://www.example.com/entry1.php" />
    <updated>2013-07-09 13:55:48</updated>
    <author>Feed Author</author>
    <id>http://www.example.com/</id>
  </entry>
  <entry>
    <title>Entry Two</title>
    <link href="http://www.example.com/entry2.php" />
    <updated>2013-07-10 13:55:48</updated>
    <author>Feed Author</author>
    <id>http://www.example.com/</id>
  </entry> </feed>

From this markup you can see it is a simple task to implement a syndication feed and our development time for it was very short because most of the leg work had been done before hand. We use our domain name for the id as this is unique to us and we will have the domain for a long time.

Atom News Feed

Conclusion

Development of the news syndication feed was rapid and the feeds were release the next day due to this. We hope the service helps others to keep up to date but also anyone with a website can use our feed for free and we encourage this.

Same as always we will be reviewing our news system and feeds at some point in the future to try and improve them. We will also be making some more changes to our news system very soon.

We will be publishing an article covering profiling and debugging PHP scripts to help fix problems and improve you code base.

News Publishing System

Care and Nursing Related News

We have been developing a news system that allows us to post care and nursing related articles direct from a browser using an editor similar to Libra Office. This gives our news posters complete control over their articles.

It also provides image support in terms of cover images for articles and images inside articles, we use AJAX (Asynchronous JavaScript and XML) to allow us to upload without refreshing the page and other various interactive functions.

We have also integrated into social media by using the Facebook opengraph and Twitter API allowing us to publish any articles directly to our social media pages allowing us to try and maximise our exposure.

In this article I will try and cover some of the development needed to implement the system from the ground up and any tools used along the way.

News Page

Making Life Easy

Our news system takes advantage of jQuery to provide a JavaScript framework to help speed up development and provide solutions to some common tasks while developing a web site.

We have reviewed a few frameworks for client side JavaScript such as Dojo and we have also used a few plugins for jQuery to provide form handling functions for AJAX file upload, document publishing, saving, loading and reviewing.

One handy plugin we have used is jQuery Equalise which allows you to equalise the height of your divs in relation to the highest div this gives us a nice even layout. We did try to use just a left to right layout using divs but it looked to messy.

Another plugin which we use is jQuery UI which provides JavaScript effects, widgets and user interface specific functions. This allows us to provide tooltips for our forms as well as highlighting form fields to the user and shaking to get attention.

jQuery Framework

News Objects

The system we have developed was designed to make good use of OOP allowing us to reuse our code and reduce the amount we need to write.

Once the system has been release and we have fixed any release bugs found we will review all our classes and see if we can refactor any of them.

This is something we try to do regularly because our system changes over time we can usually move some classes up the hierarchy.

As well as these we have implemented a few common patterns such as the builder pattern and singleton pattern. We use the builder to create news article objects and the singleton allows us to only have a single instance of a class (internal).

We have also implemented the Iterator interface so we can use a builder to create objects and then iterate through them using a foreach loop.

For more reading on design patterns you could try and get a copy of Design Patterns element of reusable object-orientated software (ISBN-13: 978-0-201-63361-0) or find some online tutorials.

Design Patterns

Social Media

Integration into the popular social networks was accomplished by using the opengraph to interface with our Facebook timeline allowing us to post the article onto our timeline directly from the news article.

Twitter has also been integrated so we can tweet our articles directly when we publish them on The Care Homes Directory web site.

Unfortunately we could not implement Google+ integration because they only allow read access to their API so we cannot post to our stream.

Coffee

Testing Testing

We also developed some unit tests to allow us to automate some common tests for our objects and the system as a whole. We use PHPUnit for our tests as well as PHPDocumentor 2 to generate our documents using inline comments and header comments.

Each class has a corresponding test case which tries to test every possible path the code can follow and also checking for the correct output. We also try to fuzz our script because we find it helps with handling bad user input.

One thing we have learned over the years is that users are unpredictable and will use your program in ways you would never imagine so by throwing some bad inputs to it we can try and uncover these cases before our users do.

Along with these we will be developing some selenium UI tests to make sure we can test our interface as if we are a normal browser. We will be using it with PHPUnit for providing us with some comprehensive tests for our code.

We have written about how we approach testing before in an old article which you can read here if you are interested in our testing and QA process.

Testing

Conclusion

We hope our news system provides a useful service to our visitors and also any care providers who like to keep up to date with the news.

Once the system is stable and our first release is tagged we will be reviewing integrating news into our enhanced listing allowing care providers and home owners to publish any news and/or events directly to their listing.

Soon we will be publishing an article on the new feature release for our news system, RSS and Atom feeds, which were simple to implement and most of the work for this feature has already been done

New Feature Release: RSS and Atom News Feeds

Providing Care and Nursing Related News Syndication

Our release yesterday of The Care Homes Directory care and nursing related news system we have already add a new feature in the form of an RSS and Atom news feeds allowing users and care providers to access our news directly.

If you are a care provider working in the care and nursing home industry, website maintainer or a care agency are also welcome to use our feed on their own website the links below can be used to access our feeds

http://www.carehomes.net/news/rss.php (Our RSS news feed)
http://www.carehomes.net/news/atom.php (Our Atom news feed)

These feeds provide access to our news headlines which is a collection of the 13 most recent news articles from all categories.

As one of the leading care and nursing home websites we hope this feature of our website help provide fresh content to keep our visitors up to date with current affairs. We will be writing a blog post on this release in more detail soon.

Thank You

Syndication

New Feature Release: Care and Nursing News

Providing Care Related News

Our news system has been released to the public now and we are already building a collection of care and nursing related articles in the hope that they will provide our visitors with some quality content.

Please take a moment to view our news page and have a read of our first few short articles and remember to check back soon for any updates.

We will be writing a brief overview of how we developed our news system and some of the features we have added in a future article.

News