Writings of a Page Load Speed Geek

What is Minification?

Minification, which is also known as minimisation or minimization, removes unnecessary characters from source code in computer programming languages such as JavaScript. This removal does not alter the functionality of the code. Examples of unnecessary characters are white spaces, new line characters, block delimiters (used to make the code more readable but not required for the computer’s use), and comments. Removing these reduces the amount of data the computer must transfer, and it may also be used as obfuscation — which is not to be confused with false cryptography. Minified code can be reversed with a pretty-printer, unlike the false cryptography. Programmers compete to minify their code more than their peers.

Minification is not data compression

Minification is not false cryptography – nor is it data compression. The minified code can be directly interpreted as is with no uncompression step needed, and the same interpreter can read the original and the minified sources.

History

The first tool to perform minification of any sort was JSMin, which removed whitespaces and comments. Douglas Crockford developed it in 2003, and it was followed by the YUI Compressor. Next, Google, in 2009, developed a Closure toolkit, which included a source mapping feature and Closure Inspector (a Firefox extension). Then Uglify JS appeared in 2010, developed by Mihai Bazon. In 2012, the program was rewritten to permit source map support.

Source Mapping and Minification

Source maps permit the display of unminified code from the minified code, using an optimized “mapping” between the two. Joseph Schorr built the first format as part of the Closure Inspector minification project. Updates such as versions 2 and 3 minimized the size of the map files.

Minification Tools

Some JavaScript optimizers, if not all, can minify and generate source maps. UglifyJS and Google’s Closure Compiler are among these.

Other online tools compress Cascading Style Sheets files. These include Microsoft Ajax Minifier and the Yahoo! YUI Compressor (also known as Pretty Diff). Then, a PowerShell script — “minifyPS” — shrinks PowerShell script code and JavaScript code. At BlimptonTech.com, you can find a free online tool to minify JS using UglifyJS. The tool can also combine multiple files.

How Minifying Code Affects the Web

By reducing the size of various files, web design Springfield MO firms quicken the page loading time and optimize file requests. Therefore, libraries and components of websites and Web applications have been developed.

Both Cascading Style Sheets and JavaScript resources allow minification — which allows them to function the same way while at the same time minimizing their file size quite a bit. Google has engineered the Closure Tools project in an effort to open source the tools they use many of their sites and web applications for use by the wider community in Web development. The Closure Compiler packs JavaScript into high-performance, compact code and can achieve aggressive global transformations to obtain advanced optimization and high compression. Other online libraries can also minify and optimize at various different levels.

In addition, some libraries merge multiple script files into one for client download, fostering a modular approach to development.

Ziproxy takes a novel approach to server-side minification. Ziproxy is a forwarding, compressing, non-caching HTTP proxy for traffic optimization. It both minifies and optimizes not only JavaScript and Cascading Style Sheets but also HTML. Then, too, it re-compresses pictures.

Modern web browsers and compatible web servers encode content to compress HTML and similar texts. Often, they compress these things into the gzip format.

The off-line CrunchMe tool provides an alternative to content encoding at least in the server-client layer. The tool CrunchMe creates self-extracting JavaScript programs by means of the DEFLATE compression algorithm.

JavaScript source maps make readable, debuggable code even after the combining and minifying processes.

As you can see, the trend to the minification of code has made the web faster, which benefits all users.

Pingdom tools is an incredibly handy web site that provides what would normally be an entire suite of website speed testing tools in a simple, elegant, easy-to-use package. Loading speed is an inescapable fact of life for web designers. When a user goes to a web page, they expect to access it quickly, and if they have to wait for even a short amount of time they’re probably going to move on. For this reason, no matter how pleased I might be by the cool new web site I just made, I make sure to take advantage of Pingdom to make sure that my audience will stick around long enough to check it out.

The only information Pingdom asks of me is an address and a location to test from. This lets me check out loading times for whatever site I’m working on from my hometown, any major city, or any continent, all quickly and easily — and without a router enclosure. Once I’ve given Pingdom the information, it breaks down for me in very specific detail what my web site loading speed is looking like and where the bottlenecks are that are slowing down my site.

Not only does Pingdom give me specific information about what it is that’s preventing my users from accessing my site more quickly, it suggests specific concrete steps to help solve the problem. If my site has too many redirects, for example, Pingdom will not only let me know, but it will also point out the specific redirect chains that need to be simplified and link me to further information if I need advice concerning how to go about doing that. It will also break down the types and sizes of the various content on my page, and show how difficult or easy it is for the user to load that information.

Finally, in addition to just crunching the numbers, Pingdom helps provide me with the tools I need to put that information in context. Pingdom automatically compares my web site with the Google Page Speed best practices, saves my information from each test so that I can see how each iteration of my site changes its speed results, and makes it easy to share information with everyone on my team instantly. The end result is an extremely useful tool for any web developer, whether you’re a specialist or just someone creating a simple page for their own small business.

What is the World Wide Web Consortium?

Among web designers and developers, few organizations carry more weight than the World Wide Web Consortium. Founded in 1994 and often referred to as the “W3C,” the group is the largest standards body in the world for Internet design standards and best practices. The group is responsible for maintaining, updating, and continually revising standards for popular programming languages like HTML, XML CSS, CGI, and dozens of other languages routinely used in web design and web application programming.

An International Standards Body

The W3C was founded in 1994 in recognition of the importance of standardization among website designs internationally. The group, which held its first meeting at the Laboratory for Computer Science at the Massachusetts Institute of Technology, eventually expanded to three international locations. Today, the World Wide Web Consortium maintains its office at MIT alongside an outpost in France, at the Institut National de Recherche en Informatique et Automatiqe, and Japan, at Keio University.

All three international outposts meet with American, European, and Asian leaders and WordPress web design companies in Springfield MO who offer insight on the future of the Internet and how it relates to their programming needs. In fact, more than 500 individuals and corporations maintain an active membership in the World Wide Web Consortium and guide the standards body toward each new release of best practices, design standards, and new iterations of popular programming languages.

Membership: Who is Part of the W3C?

The World Wide Web Consortium membership is made up of more than 500 member entities, including large corporations, development firms, universities, representatives from major world governments, and nonprofits. In the interest of openness, the organization maintains a current list of active members on its website. Members are managed by a CEO and an executive management team that works to coordinate development efforts, finances, membership, and communication.

Definition of Standards: How the W3C Works

Like most standards bodies around the world, the World Wide Web Consortium maintains a rather long process of standards definition, review, and finalization. The process is deliberately slow. The organization understands that major revisions, like those in CSS3 and HTML5, require a great deal of change and education on behalf of developers, and a slow development process allows the standard to be fully understood before implementation. Here’s how the process works:

Working Draft:Candidate Recommendation:Proposed Recommendation:W3C Recommendation:Continual Monitoring of Standards and Best Practices

• Working Draft: At this early stage in the process, a series of proposals and comments on a new standard are brought together into an initial WD, or working draft. After the working draft has been released, it is open for comment by virtually anyone, including W3C members, large organizations, and individual developers. These comments are taken into account as the proposed standards change moves toward final certification.
• Candidate Recommendation: Satisfied that the standard meets its overall goal, the World Wide Web Consortium releases a CR, or candidate recommendation, of the new standard. This CR incorporates changes from within the W3C as well as from individual commenters who reviewed the working draft previously. At this stage, the consortium is confident that the new standards meet its goals for the industry.
• Proposed Recommendation: More mature than a candidate recommendation, the PR, or proposed recommendation, is put into everyday use. At this stage, the new standard can be used to design websites or build web applications. Changes to the standard arise from complications when designing websites and applications, and primarily rely on developers “beta testing” the new specification on behalf of the larger W3C organization. This is one of the final stages of standards implementation.
• W3C Recommendation: Finally, with all of the “kinks” worked out of the PR, the World Wide Web Consortium reviews a standard and recommends it for final implementation. This is a process that can take several months or even several years, as was the case with the revolutionary changes in the HTML5 set of standards.

Though the World Wide Web Consortium is primarily interested in industry standardization and aligning best practices in creating websites and applications, the group is also highly technical and involved in everyday monitoring of its existing standards. On an ongoing basis, the W3C may implement revisions to standards like HTML and CSS to address unforeseen issues among developers. These revisions are often very minor; developers are typically informed of minor standards changes through press releases and blog posts on the W3C’s official website.

An Open, Important Member of the Developer Community

Internet developers largely owe their careers to the work that the W3C has been performing for more than two decades. Since 1994, the group has been responsible for the creation or maintenance of all major web programming languages. Whether it was early HTML or the revolutionary changes of HTML5, the W3C’s more than 500 members and countless global developers provide a template for evolving websites and cutting-edge applications.

Before Cascading Style Sheets (CSS) there was very little that could be done to change the design of a web page. While Hyper Text Markup Language (HTML) creates documents for the World Wide Web, it was specifically designed to hold the content of a web page. Housed in a separate file, CSS adds the style and design to a web page. The term cascading comes from the ability to combine multiple CSS files to determine the style for one page.

As more people started using HTML, the demand grew for more design capabilities, which would allow developers to control how web documents looked. But browsers offered limited capabilities for styling. In 1993 NCSA Mosaic was released, making the web more popular than ever, but it only offered limited capability to change fonts and colors.

In October 1994, Tim Berners-Lee formed the World Wide Web Consortium, (W3C) at the Massachusetts Institute of Technology Laboratory for Computer Science. The W3C has members that are government entities, businesses, educational institutions and individuals. The W3C creates recommendations that are used to keep the web experience consistent among different browsers.

Hakon Wium Lie released the first draft of “Cascading HTML Style Sheets” in October 1994. Brent Bos was also building Argo, a browser that had style sheets which could be used by other markup languages. In all, nine different style sheet proposals were submitted. The discussions on the www-style mailing list, which was created in May 1995, influenced the development of CSS. Because it was important to be able to use the style sheets for other markup languages, HTML was removed from the name. The W3C set up the HTML Editorial Review Board (ERB) in late 1995 to make HTML specifications.

Although it took 3 years for any browser to come close to fully implementing CSS, August 1996 Microsoft Internet Explorer became the first browser to support CSS. Netscape followed suit in supporting CSS, but also implemented an alternative Javascript Style Sheets, which were never fully completed, and are now deprecated. To this day, there are differences in the way CSS is implemented in different browsers, leading developers to use hacks to make web pages look consistent in different browsers.

The CSS Level 1 W3C Recommendation was made in December 1996. The release of CSS 1 supported: font properties, text attributes, alignment of text, tables, images and more, colors of text and backgrounds, spacing of words, letters and lines, margins, borders, padding and positioning, and unique identification and classification of groups of attributes. It was after this release that the Cascading Style Sheets and Formatting Properties Working Group was formed by the W3C to focus solely on CSS.

In May of 1998, the W3C released CSS 2 which added new capabilities including z-index, media types, bidirectional text, absolute, relative and fixed positioning, and support for aural style sheets. Not long after the release of CSS 2, a new browser, Opera was released which also supported CSS. It wasn’t until June 2011 that W3C released CSS 2.1, which fixed errors and aligned the capabilities better with browser functions.

With the release of CSS 3, capabilities were broken into modules. Between June 2011 and June 2012, the following four modules were released as formal recommendations: color, selectors level 3, namespaces and media queries. More modules are have reached the working draft or candidate recommendation phase of release and are considered stable.

Because level 3 was separated into modules, there will be no single CSS 4 release. Some level 4 modules which build on level 3 functions have released. New functionality has been added in other modules. Modules will continue to be released to continue to add and update features.

Although there are some limitations, CSS has added functionality and design to web pages which were once simple documents. The advantages of CSS include content and presentation being in separate files, consistency of format throughout a site, reduction of bandwidth, accessibility, the ability to easily change the style of a site, and the ability to change the design of a web page for different devices. If you take a moment to imagine a website where the only design features are font and color changes, you will recognize that CSS has contributed greatly to the popularity, ease of use and accessibility of the internet.

Setting up a website and giving it a unique look can seem to be an overwhelming task. With new content being continually added to most sites, that look has to remain the same for every new page created. At first glance, this requires re-entering the code that creates the site’s style for every new page, an impossible task.

Enter Cascading Style Sheets, also known as CSS.

CSS allows web programmers to easily manage a site’s overall style by placing that code in a separate document. Each page in the site refers back to the CSS when loading so the page’s style matches the rest of the site. This saves hours of work for the programmer, speeds up page loading times, and reduces total storage requirements by cutting down on code.

Many style elements such as text size and font are already specified within the base programming of HTML. This base program has been maintained and updated since October 1994 by the World Wide Web Consortium, also known as WWWC or W3C.

Style sheets have been used in one form or another since the 1980s, but the initial version of CSS was proposed shortly after the creation of the W3C and implemented in 1996. However, it was not widely supported until around 2000 with the released of Internet Explorer 5. Since that time, CSS have become a standard part of any site and used almost worldwide.

By default, HTML recognizes the difference between different sections of text or types of media present on a page. When creating a page, the different elements on the page are marked with selectors that determine their style. What you’re reading right now is actually marked by the body selector.

Text can be modified within the actual content using angle brackets. Some tags are simple to use, like using b in brackets to make a section of text bold. Other tags are more complex, like using a tag to specify the color or font of a selected range of text. Using these tags for every page in a site adds a lot of extra code, and therefore a lot of extra work for the devices involved.

Say, for example, you want your site to have larger text than normal. You could mark every single piece of text on the site with < font size=”13″ > with each page’s text here < /font >.

The text would then look like this for each page you remembered to tag.

This may seem small, but imagine having to use that tag for every single page, and to add new tags to every single page every time you wanted to change your site’s look. That adds up, slowing down the servers and eating up storage space, not to mention turning every small change to the site into a large development project.

CSS allows web developers to modify existing selectors or create new ones. The font, text size, text color, or any number of other properties for every page that uses a selector can be modified at once by modifying the selector itself in the CSS. Instead of tagging every page that already exists as well as adding the tag every time you make a new page, just go into the CSS and add this code:

body {

font-size: 13px;

}

Now all the text on the site that uses the body selector will be the same size it would have been if it was tagged, but only a few words had to be entered and as little code as possible has been added to the site.

While this example focused on text, which is simple to understand and modify, CSS can be used to modify almost any form of media including tables, photos, or embedded video. The size of an element, the borders between table cells or around and element, and even the resolution can be modified using a CSS and applicable selectors. HTML tags can also be modified and custom tags can be created with a CSS for style changes that aren’t universally applied to the site. However, the tag names should be chosen very carefully so as not to overlap with any future standard tags that could be created.

Skilled users with special needs or that wish to view pages with their own custom style can also create a custom CSS that is then applied to any page they visit. This is most commonly used to convert sites into alternate format that are easier to use for those with sight or hearing problems.

Any developer setting up their own site needs to understand and utilize this powerful tool to streamline their website and create its style. Hopefully now you understand why.