Netscaler Front End Optimization: Image optimization Preface With release 10.5 Citrix introduced specific functionality to optimize the content delivered to web browsers. With citrix Netscaler you have been able to optimize web content for many years but in 10.5 they introduced a specific feature set called Front End Optimization, FEO in short. Today we are to look at how to do image optimization. Prerequisites A Citrix Netscaler running build 10.5 or later with platinum licence or specific featureset license (image optimization utilize the cache engine). This documentation also assumes you have a webpage published trough a Netscaler. Furthermore I also assume you know how to do basic configuration of the Netscaler. Enable FEO 1. Click System, Settings, Configure Basic Features
2. Ensure you have Load Balancing and Integrated Cache enabled as seen in the figure below 3. Ensure you have Front End Optimization Enabled 4. Navigate to Optimization and click Front End Optimization. Select Change Front End Optimization Settings. We are going to re-encode jpg images as a part of this FEO Image optimization workshop and in the FEO Settings you can adjust the JPG Quality you want to reencode jpg images with. In this demo we will use 60% as shown in the figure below. Furthermore, you can also adjust how long these objects will reside in the FEO cache.
5. Front End Optimization is carried out by the Netscaler with Front End Optimization policies. A Front End Optimization Policy can be bound globally to act upon all web traffic passing trough the Netscaler. Policies can also be bound on Content Switches or Virtual Server Load Balancer. Today we will re-encode images on the open source CMS dotnuke in my lab environment. My dotnuke is represented as one virtual server load balancer bound to a content switch. We will create a FEO policy and bind it to my dotnuke virtual server. Binding our FEO Policy to my dot nuke virtual server ensures the FEO Policy triggers only for traffic going trough this virtual server, ensuring only my dotnuke CMS is affected. A valid FEO policy consists of a FEO Policy and a FEO Action. The FEO Policy is used to describe what traffic we are to send to FEO Engine for image optimization. The FEO action describes what will be done to the traffic matched with the FEO policy (A bit like class maps and policy maps in cisco world). In the FEO policy we can use the Netscaler Expression Language Netscaler Advanced Expressions to match traffic we are to send to FEO engine. Advice: Sometimes you create FEO policies (or other Netscaler policies for that matter) and you find that some or none of the traffic is processed by FEO. The Netscaler processes traffic as shown in the figure below. Looking at the Netscaler processing order flow chart, Integrated cache policies occurs before FEO and will prevent FEO policies from execution. Thus: If you are to do FEO you must make sure that your cache policies do not match on the traffic for FEO Engine. The built-in Netscaler system default cache polices typically match on images since images usually have cache headers set. Flush your cache and rewrite your existing cache polices / implement no cache rules for traffic to FEO or the system built-in _nocacherest policy to ensure none of the system default cache rules triggers.
6. Since the FEO optimization policy refers to a FEO policy action we start by creating a FEO Policy Action. Click Add in the FEO policy Action as shown in the figure below
7. Create a FEO Action as shown in the figure below our feo_act_image_convert FEO Action shown above will optimize images removing metadata such as comments from jpg images, it will resize images to the size specified in the htlm image tag and convert gif images to png. 8. The FEO policy is a ruleset describing what part of the html traffic is to be sent to the FEO action. The simplest policies such as true or HTTP.REQ.IS_VALID ensures all html traffic will be passed to the FEO engine. In encourage you to play with the Netscaler powerful expression language to make your policies as precise as possible. Surprisingly a lot of Netscaler administrators have not played with the policy evaluation tools. When you write a policy, click evaluate button in the lower right corner as shown in the figure below Select the desired flow type direction (HTTP Request is made from a user while the HTTP Response is the answer from the webserver) and evaluate your policies using actual HTML data. The figure below show a simple evaluation
Note: The Policy will always be limited by how you bind the policy: If policy is bound globally it will be a system wide policy, bound to a content switch it will process only for the content switch and so on. 9. Back on track: Lets create a FEO policy. I will make a stupid policy matching way too much traffic since you now know how to play and tune such policies given the tips above. The Netscaler engine is extremely powerful and fast spoiling admins with true, ns_true policies. Lean policies makes good habits and scalable solutions. Create a Netscaler FEO Policy as shown in the figure below.
10. All that is left for us to do in this exercise is to bind the policy and watch the magic. I initially explained my lab architecture. the policy goes on my dotnuke virtual server as shown in the figures below (btw: Netscaler makes your MS-SQL Server way more scalable, opens for very interesting logging abilities or making datawarehouse / OLAP cube designs able to write data like a OLTP Cluster but we`ll cover that toic another time )
11. Now that we have added these policies, load the webpage and watch the Netscaler cache content group by clicking view Caching object as shown in figure below. The NSFEO Content Group contains your optimized images. I encourage you to further analyse with fiddler, firebug, new relic, http://www.webpagetest.org or your favorite tool for inspecting http traffic