| | | | | | | |
| |||||||
|
 w3compiler from Port80 Software The w3compiler from Port80 Software is the pre-deployment tool for Web developers. Although not a traditional compiler, it does something similar: It reads the source code tree for an entire Web site and produces an optimized version of that code base intended strictly for deployment in the run-time environment of the "live" site. While the source code that developers work with should be neatly formatted and thoroughly commented, such readability adds no value for the typical end user. Meanwhile, there are significant disadvantages to exposing your source code to the world in its raw form -- including making end users put up with pages that are larger and slower-loading than they need to be. The w3compiler solves this problem by letting you easily maintain two versions of a Web site's code base: a readable one for you, and a compressed and optimized one for your users. With w3compiler, you can compress your Web pages by removing white space and comments from HTML, CSS, JavaScript, ASP, ColdFusion, and PHP source code, and by lowercasing HTML tags. While the compressed files make for smaller, faster-loading pages, w3compiler leaves the original source code uncompressed for easy code maintenance. Even very large sites can be recompiled as often as necessary, as only those files that have been changed are recompressed. The w3compiler source code compression, while valuable in and of itself, also helps you get the most out of HTTP compression, such as that provided by Port80 Software's httpZip. The w3compiler also offers optional file extension removal for use with content negotiation tools such as Port80 Software's PageXchanger. back to top Creating a New Project The first step in using w3compiler is setting up a project. A project includes a Source Directory, that is, the location of the files to be optimized and a Target Directory, the location where the newly optimized files will be saved. You can create a project by selecting New Project from the File menu. In the New Project dialog box, choose the Source and Target directories for the project. The Source Directory should include all of the files that make up your Web site. This can be regarded as your pre-deployment, or staging Web site. The Target Directory will include a complete set of files for your Web site in their fully optimized form. These are the files that should make up your deployed "live" Web site. If both directories are already created, the easiest way to choose directories is by clicking the browse button next to the input fields. This will open up a directory window that allows you to browse to the directory you wish to select. Note: You may not select the same directory for the source and the target. Once you have chosen your Source and Target directories, click on the OK button and your Web site will be loaded into w3compiler. All of the files in the Source Directory will be loaded into the Target Directory, including all subdirectories. A tree view representation of the Source and Target directories can be seen by selecting the Project Source and Project Target tabs located at the bottom of the file window. Optimization will be performed only on the files in the Target Directory. The files in the Source Directory will remain unaltered.back to top Optimizing Files By default, the w3compiler optimizes all eligible files in the Target Directory, including HTML, JavaScript, CSS, ASP, ColdFusion, and PHP pages. Through the Options menu under Code Optimization Settings, the types of optimization that are applied can be controlled by enabling or disabling optimization routines performed on the files. Each file type is represented by a tab in the interface. Associated File Extensions Under each tab in Code Optimization Settings, there is a configurable list of associated file extensions. These are the extensions that will be treated as the type of the tab. By default, the following associations are set:
HTML Optimization Optimizations for HTML files include:
JavaScript Optimization Optimizations for JavaScript files include:
CSS Optimization Optimizations for CSS files include:
ASP Optimization Optimizations for ASP files include:
ColdFusion Optimization Optimizations for ColdFusion files include:
PHP Optimization Optimizations for PHP files include:
In order to optimize every file in the directory, click the Optimize button, select Optimize from the Action menu or use the F7 key. To optimize a specific file or files, first select the files by clicking on them. You can select multiple files by using the ctrl key. You can also right click on the selected file(s) you wish to optimize and chose Optimize from the popup menu. back to top Comparing Original and Optimized Files Information on initial optimization results can be viewed in the file window under the Project Target tab. Information on each file, including Original Size, Optimized Size, Percent Saved, and Status, is displayed in the tree view. Original Size is the size in bytes of a file before optimization. Optimized Size is the size in bytes of a file after optimization Percent Saved is a calculation of size saved by optimization Status is a description of the optimization process. Its values can include the following:
Visual Compare After you optimize a file, it is easy to compare the original file and the optimized file in a browser window to verify that there are no problems with the display of the optimized file. This is done by selecting the file from the Target Files list and selecting Visual Compare from the View menu. Alternatively, you can select the file from the Target Files list by right clicking on the filename and then selecting Visual Compare from the popup menu. This view also includes the size of both versions of the file in bytes and in percent saved in the optimized version. This is a quick way to determine the individual page optimization results using w3compiler. Note: This will only work with pages without server side scripting, such as traditional .htm and .html files or if the Project Target directory is configured as a running Web site. Code CompareIt is also easy to view a side-by-side comparison of the original and optimized versions of the code. This is done by first selecting a file in the file window by left clicking on the filename, then selecting Code Compare from the View menu. This is an easy way to see the code level results of w3compiler's optimization on your files. In addition to side-by-side file comparisons, w3compiler also provides a quick and easy way to view optimized page results in a variety of Web browsers. To view an optimized file in a Web browser, select the file you would like to view, choose Preview in Browser under the View menu and select the browser you would like to launch. This makes it very easy to quickly preview an optimized file in a variety of Web browsers. Although, by default, Internet Explorer is the only browser available in the Preview in Browser list, any Web browser can easily be added to this list. For information on how to configure an external browser see Configure Browsers. back to top Viewing Project Statistics Optimization statistics can be viewed for your entire project inside w3compiler. Using the General Statistics tab located at the bottom of the message window, general statistics such as the number of files evaluated in the project and total bytes saved can be examined. Statistics are also grouped by the types of files that are optimized. These statistics can highlight the file types that are experiencing the highest levels of optimization and also which types can benefit from changes in the Code Optimization Settings. Other useful project information is viewable in the message window, such as a comprehensive log of file name remappings and of variable name remappings that are performed on your project. This information demonstrates how w3compiler converts long, descriptive directory paths and variable names to short, optimized alternatives. This also makes troubleshooting fast and easy. These logs are viewable under the File Remapping and Variable Remapping tabs. Any error or warning that is thrown during the optimization process is viewable under the Errors/Warnings tab. Information under this tab includes the source file that caused the error, the line and column number in the code where the error was triggered, and a description of the type of error that was encountered. The Project Log tab includes the step-by-step log of the optimization process. back to top Restoring Optimized Files If, after optimizing a project or a file in the Target Directory, you realize that you need to restore it to the original file, this can be done easily by using the Restore feature. w3compiler is safe because the original files in the Project Source directory are unaltered. When Restore is used, w3compiler merely restores the file(s) in the Project Target directory with the version from the Project Source directory. In order to restore every file in the Target Directory, select Restore from the Action menu. In order to restore a specific file or files, first select the files by clicking on them. You can select multiple files by using the ctrl key. Once you have selected all of the files you wish to restore, select Restore from the Action menu. You can also right click on the file you wish to restore and select Restore from the popup menu. back to top Editing Loaded Files After loading a file, you can make changes to the original file and then optimize the changes or make changes directly to the already optimized file. Edits made to an already optimized file will, however, be overwritten if the Source file is optimized again. To open a file for editing, first select the file from the file list by left clicking on the filename. Then, select Edit With from the View menu. Finally, select the editor you wish to use to edit the file. You can also open a file by selecting it from the file list by right clicking on the filename, choosing Edit With from the popup menu, and then selecting the editor you wish to use to edit the file. Additional external editors can be added to the Edit With menu by selecting Configure External Editors or through the Options menu. For information on how to add an external editor see Configure External Editors. back to top Saving a Project A project can be saved to preserve your Source Directory, Target Directory, and all optimization settings for your Web site. The saved project file will have a .wcp extension. After creating a new project and running the w3compiler on it, select Save Project from the File menu. In the Save Project dialog, you can choose a directory and filename for your project. When you have chosen where to save the project, click Save. back to top Loading a Saved Project w3compiler projects are saved as .wcp files. To load a saved project, first select Load Project from the File menu. Then, locate and select the project you wish to open in the Load Project dialog box. Once you have chosen the project you wish to load, click the Open button. w3compiler will load both the Source Directory and Target Directory along with any previously saved optimization settings used for that project. You can also load a recently accessed project by selecting Recent Projects from the File menu and then selecting a project from the project list. back to top Configure Browsers If the Web browser that you would like to use is not present in the Preview In Browser browser list, you can add it by selecting Configure External Browsers from the Options menu. Click the Add button. In the Add New Browser window, you must choose a browser name and a browser path. The browser name can be anything you wish. The browser path must be the path to the browser's executable file. This is usually located in the browser's directory under C:/Program Files/ Once you have filled in these fields, click the OK button to add the browser to the browser list. To edit a browser's information, select the browser by clicking on the browser's name in the External Browsers List. Then click the Edit button. In the Edit Browser dialog, the browser name and browser path will be filled in from the values you listed when you created the browser. You may edit both of these values. Once you have made your changes, click the OK button to edit the browser's values. In order to delete a browser from the browser list, select the browser by clicking on the browser's name in the browser list. Then click on the Delete button. back to top File Compare Settings Visual Compare Settings You can use the Visual Compare feature to view an optimized and a non-optimized page at the same time in a browser window in order to assure that they render identically. When Visual Compare is used, two instances of Internet Explorer are launched side-by-side. View By default, the browser instances are horizontally stacked. Using the View tab, this setting can be changed to one of three settings. To change the view, select Visual Compare Settings from the Options menu and under the View tab choose which setting you wish to use.
The Protocol tab allows you to set the protocol that is used to display the files in your Source and Target directories. Since the Visual Compare feature uses instances of a real browser, your files can be opened in the browser or they can be requested through Hypertext Transfer Protocol (HTTP) as real Web pages are. If your Source and Target directories are configured as part of a Web site, HTTP should be used. With this option server side scripting, such as ASP or ColdFusion, can be interpreted. This will provide the most realistic environment for viewing your optimized pages. Code Compare Settings You can use the Code Compare feature to compare the code view or "View Source" view of your optimized and non-optimized pages at the same time. By default the code views are horizontally stacked. The Code Compare view has two different settings. To change this setting, select Code Compare Settings from the Options menu and chose which setting you wish to use.
Configure External Editors A file loaded into w3compiler can be edited easily by launching the file in an external editor. When w3compiler is installed, the default editors in the Edit With dialog will include Notepad and WordPad. Additional editors can be added through the Configure External Editors selection under the Options menu. In order to add a new editor, click the Add button. In the Add New Editor window, you must choose an editor name and an editor path. The editor name can be anything you wish. The editor path must be the path to the editor's executable file. This is usually located in the editor's directory under C:/Program Files/ Once you have filled out these fields, click the OK button to add the editor to the editor list. In order to edit an editor's information, select the editor by clicking on the editor's name in the editor list. Then click the Edit button. In the Edit Editor dialog, the editor name and editor path will be filled in from the values you listed when you created the editor. You may edit both of these values. Once you have made your changes, click the OK button to complete the changes. In order to delete an editor from the editor list, select the editor by clicking on the editor's name in the editor list. Then click on the Delete button. back to top Code Optimization Settings w3compiler implements a variety of byte-saving techniques to optimize files on your Web site. Each technique is designed to be extremely safe. Default settings are conservative in order to prevent the breaking of sloppy markup or complex code. Understanding the settings and tolerances of your optimization options may allow you to safely optimize more aggressively. White Space Removal White space removal is safe in all cases, thanks to the contextual sensitivity of w3compiler. It removes white space where it is unnecessary for safe rendering, paying particular attention to the instances where white space is needed. If, for example, certain HTML tags are used, such as PRE and TEXTAREA or the white-space property is used inside a Cascading Style Sheet (CSS), w3compiler will preserve it. Remove Comments w3compiler safely removes the contents of commented code along with the comment markers, except in cases where they are commonly used for old browser compatibility, such as masking comments for JavaScript or CSS blocks. Lowercase Tags w3compiler flawlessly converts all uppercase characters in tags and attribute names to lowercase. This has no effect on the way a page displays in a Web browser. However, lowercase tag and attribute names in HTML pages can result in tighter GZIP compression when HTTP compression is implemented through a server module or server filter. Color Substitution w3compiler automatically determines the most succinct of equivalent color values--hex value or color name--and substitutes that value throughout an HTML or CSS page. Entity Substitution Since special character entities can be displayed by character entity references or a numeric equivalent, w3compiler will substitute the shortest of the two options. Meta Tag Removal w3compiler can remove META tags that take up space and unnecessarily transmit information, such as AUTHOR, EDITOR, and GENERATOR, while preserving only your valuable search engine or cache control related tags. JavaScript Code Condensing w3compiler searches for instances where it is able to condense JavaScript by replacing verbose code with safe, streamlined, equivalent code. Remap Built-In JavaScript Objects To condense JavaScript, w3compiler can remap long JavaScript object names to single or double character substitutes. This is safe because a reference to the remapped object is stored, ensuring that the correct value is always maintained. w3compiler always checks to determine if an object is used often enough to warrant remapping. It also excludes any object name that is a string that could possibly change during runtime. These checks help ensure that JavaScript object remapping is safe. By using the Enable IE only remapping option, the list of built-in objects will include additional methods inside of the document object that Internet Explorer permits remapping, such as document.write. Although this can result in additional optimization of JavaScript, this option is included for controlled environments where all Web site users will access your Web site with Internet Explorer. Rename Long User-Defined Variables w3compiler will safely shorten user-defined variable names, freeing the author to use long, descriptive variable names. Stringent checks are performed to prevent collisions, including verifying that the variable name is not used as an ID or NAME in any (X)HTML tag on the page or in any included pages. It will also not rename a variable if the variable name is a JavaScript keyword. As an additional safeguard it will not change variable names that are included on the list of reserved words, which is determined by the Strings As Variables Safety Level setting. The scope of the reserved words list is determined by the Remove Global Name Uniqueness Safety setting. This configurability allows w3compiler to optimize the widest range of JavaScript code, from simple to extremely complex. Remove Global Name Uniqueness Safety The Global Name Uniqueness Safety, which is enabled by default, will prevent an ID that is used on one (X)HTML page from being renamed on any other pages throughout the Web site. Likewise, if a JavaScript variable name is a reserved word on any page, it will remain un-renamed on all pages included in your Web site. This conservative setting helps to ensure that no values are lost in the renaming, making w3compiler extremely safe. However, there are cases where this level of safety is not necessary. For projects in which pages don't share a common JavaScript file, removing the global safety can result in tighter optimization by allowing more renaming on individual pages. With the safety disabled, a variable that is used as an ID on a page would remain un-renamed only on that page. Likewise, a variable name that is a reserved word in a JavaScript file would remain un-renamed only in that JavaScript file and those pages which include that JavaScript file. The same variable name used in any other context would still be eligible for renaming. Rename Local Function Variables Only Choosing this option restricts the variables being renamed to those declared inside of functions. If a variable is declared outside of a function or does not have a 'var' declaration, it will not be renamed. This is a very conservative option primarily for JavaScript that references external functions or variables. Exclude Specified Variables For projects that reference an external variable, but still wish to rename other variables, w3compiler makes it possible to exclude the external variable. The variable being excluded will not be renamed, but all other safe variables will be. Click the Configure button to add variables to the Variables Excluded from Renaming list. Strings As Variables Safety Level This setting determines which variables are regarded as reserved words. A lower safety level setting will result in more variable name shortening and more optimization, but will require a deep understanding of how JavaScript variables are named and used across your Web site.
Project View Settings General By default, the tree views of the Project Source and Project Target directories display only the files that w3compiler is able to optimize. If you would like to view every file that the project includes, select Project View Settings from the Options menu. Under the General tab choose Display all files. Additionally, tree views of the Project Source and Project Target directories are expanded when a project is loaded into w3compiler. This view can be inconvenient for Web sites that are exceptionally large or that include a large number of directories. To open a project with a collapsed tree view, deselect Expand File Tree on Project Load. The Message Window can be hidden from view by selecting Hide Message Window. After files in the Project Source directory are optimized, w3compiler will display the Project Target tree view, which includes the optimized files. The Display Project Target Tree upon Optimization setting can be deselected so that the focus will remain on the Project Source tree after files are optimized. Columns By default, all file and directory information is displayed in the Project Source and Project Target tree views. This columnar information can be hidden through the General tab by deselecting the column name. Excluded Files By default, all files in the source directory and subdirectories that match an Associated File Extension will be loaded into the project and optimized. There may be files or directories such as .bak files or files in generated directories such as CVS that you do not wish to be optimized. w3compiler allows you to exclude such directories and files from your project. Through the Options menu, select Project View Settings and choose the Excluded Files tab. The name(s) of the files and directories that you would like to be excluded from the project can be added to the Files Excluded from the Project list. back to top Index Pages, Paths, and Extensions To achieve a maximum level of file optimization, w3compiler can compress long file paths and safely remove unnecessary path information. Each piece of a link to a Web page or to a dependent resource within a Web page, such as an image or Cascading Style Sheet (CSS), offers an opportunity for safe and easy optimization. w3compiler includes features to optimize each element of a link. Index File Names Most well designed Web sites are configured to perform an automatic redirect or to return a default document for a request to a Web directory, oftentimes the page is index.htm, or something similar. This common practice makes the default page name unnecessary when it is part of a link to that page. w3compiler makes the removal of this superfluous text easy to perform across your entire Web site. Through the Options menu, select File Optimization Settings. Under the Index Files tab, enable Remove Index File Names From Links and chose to remove the index files from Internal Links only, External Links only, or both. Removing the index file names from links to external Web sites should only be done when the link targets are known to be using default documents. The name(s) of the Index Files that you would like to remove can be added to the Index File Names list. Note: Selecting Remove Index File Names From Links will display a warning. This warning is a reminder that the automatic redirects that are performed for index files are server side redirects. Therefore, the Project Target directory will need to be a Web site configured for the redirects to occur. Remapping FilesBecause the number of additional resources that a Web page references can be large, a significant reduction in source code size can be realized when the paths for these resources are minimized. Dependent resources like images, JavaScript files, and CSS files are oftentimes placed in a common directory for use across the site. Most likely, these directories have descriptive names to make site development and maintenance simpler. However, these can be represented easily with short, optimized names in your Project Target, thereby reducing the size of the references to these resources. Through file renaming and remapping, w3compiler will substitute a single character naming convention for the full names used on your original site. The new, optimally named directories and files will be created in your optimized site. This can add up to a large savings. For example, a reference like: <img src="../../images/nav_button1_large.jpg"> can be replaced with: <img src="../../0/c.jpg"> By using the Remap Files feature of w3compiler, your optimized Web site can have the structure of its dependent resources reduced to an absolute minimum without losing any of its full-sized functionality. To the Web browser displaying your pages, the paths make no difference. You keep the long directory paths and long descriptive file names in your development environment; w3compiler replaces them with minimized paths in the live environment. To use the file renaming features, select File Optimization Settings through the Options menu. Choose the Remap Files tab and select Remap File Names. Selecting the option to Keep Original File will include an original copy of your dependent resource in your Project Target for the case in which other Web sites reference that resource in its non-optimized form. Selecting Remove Original File will copy only the renamed optimized files and directories to your Target Directory. The list of File Extensions to Remap includes many common extensions for dependent resources. If you are using an extension for dependent resources on your site that is not in the list, it should be added here. Max Files Per Directory specifies the maximum number of files that will be added to a newly created directory. If this number is exceeded, then an additional directory will be created. The Virtual Path setting is available primarily for testing purposes. In cases where the Project Target is not located at the root of your Web server, a virtual path can be prepended to the references to dependent resources. For example, the Web root on a machine running Microsoft IIS is commonly c:/inetpub/wwwroot. If your Project Target is located at c:/inetpub/wwwroot/testing/optimized, "/testing/optimized" needs to be added as the Virtual Path in order for dependent files to display correctly. This needs to be present only for testing. Note: Using a virtual path adds additional size to the references to dependent resources. It is for temporary testing purposes only. Extension StrippingRemoving file extensions from your Web site source code can be beneficial for reasons beyond the byte savings it provides. It adds a modicum of security by hiding the common file extensions associated with server side scripting environments, helping to protect against platform-specific exploits. More importantly, however, it enables you to establish persistent URLs. With persistent URLs, you can maintain valid links to your Web site regardless of future migrations to different Web site technologies. A Web site can run safely without file extensions through the use of a server filter like Port80 Software's PageXchanger on Microsoft IIS or by configuring mod_negotiation on Apache. w3compiler allows you to quickly prepare a Web site for extension-less deployment with its Extension Stripping feature. To remove file extensions from your source code, select the Extension Stripping tab, check Enable File Extension Stripping. The file extensions that you wish to remove can be added to the File Extensions to Remap list. This list is automatically populated with extensions that are used by the resources in your Web site when you load your project. The option to Strip Absolute URL References is also available to handle links from your Web site to external domains, domains that may not be prepared to resolve links without extensions. Options include:
Using In-Page Directives In addition to the compilation options that you specify through the w3compiler's Code Optimization Settings menu items, there are a variety of special compilation directives you can embed directly into your HTML, ASP, PHP, ColdFusion, and JavaScript pages to control the compilation of those pages. These special compilation directives are embedded in HTML or JavaScript comments. w3compiler reads them and executes the instructions they give at the time of compilation. These compilation directives provide advanced control for developers who want to guarantee special treatment for particular pages during the compilation process. The NOCOMPRESS Directive You may have files that you do not want to optimize, but you do not want to unselect them from the file list each time you run the optimizer. You can add nocompress inside of an html comment like so: <!-- nocompress --> The w3compiler will ignore any page in which this has been placed. The STARTREMOVE and ENDREMOVE Directives There may be a portion of your page that you do not need in the live Web site environment. You can place: <!-- startremove --> before that area and then: <!-- endremove --> to finish that section. The w3compiler will remove everything in between this area during compilation. The STARTIGNORE and ENDIGNORE Directives There may be a portion of your page that you do not want optimized. You can add: <!-- startignore --> to begin ignoring the section and: <!-- endignore --> to finish. The w3compiler will ignore everything in that section and leave all of the white space and comments in the page. Similarly, for JavaScript you can add: //startignore and //endignore directives to your code for w3compiler to leave those sections unchanged. back to top HTML Page Validator Because w3compiler is the most standards-aware Web site optimizer available, it is safe to use even on Web sites that include content that must validate against validating parsers. To help ensure that this objective is met, w3compiler includes an easy way to validate both your original and optimized files using the Markup Validation Service provided by the W3C. To use the HTML Page Validator feature, select the file you would like to validate in the file window. Under the View menu select HTML Validator. Alternately, you can right click on your selected file and chose HTML Validator from the View menu that display. A side-by-side comparison of the optimized and original files is shown with the validation results. back to top File Preambles w3compiler allows you to add file preambles to pages across your Web site. Although this should only be used when absolutely necessary, since it adds bytes to your optimized files, it is easy to do. Under the Options menu, select Set File Preambles. Preamble text can be included in your HTML, JavaScript, and CSS files. Check the Enable box for the file type(s) you would like included and add your preamble text with the proper comment notation. back to top Command Line Interface w3compiler has a command line interface that offers much of the same functionality as the graphical interface. Using a command line prompt, the following arguments and options can be passed to the w3compiler: At the command line prompt enter: w3comp [srcfile] [destfile] [options] wheresrcfile is the file/folder for source file(s) anddestfile is the file/folder for optimized file(s). OptionsMultiple files must be comma-separated. Quotes should be used if there is a space in the file or folder name. These arguments can be excluded if the -P option is used.
| |
| © 2002-2009 Port80 Software, Inc. |  |