Tag Archives: web development

Understanding Web Acceleration

web acceleration

Usually, a high traffic website must support hundreds of thousands or millions of users. Not to mention the demand of user for a fast and reliable website. Therefore, to meet such high volumes, some web developers prefer to add more server hardware.

However, this method can be expensive. So, in order to reduce your operational cost, you can use web acceleration as another option. Web acceleration produces better speed delivery of both static and dynamic content. Furthermore, it will enable your web servers to handle more client request without the need for more hardware.

In general, web acceleration is a content delivery network. It aims to speed up the transfer of content between web servers and client browsers by utilizing a variety of techniques such as caching and compression.

HTTP Optimization
Load balancer or reverse proxy server is one of the primary ways to accelerate web traffic as it flows between clients and backend servers. However, this can create inefficiencies in server utilization and cause poor performance for other users as well.

In HTTP optimization techniques, the load balancer is in between clients and servers. It forwards requests for content to backend servers in a streamlined and efficient way. Therefore, this method maximizes speed and server utilization.

Caching and Prefetching
Rather than fetching it over and over from back end servers, web acceleration server cache or locally store commonly requested information. This will avoid any wasted server resources and increase the speed of content delivery. In fact, to prevent serving content that is out of date, the web accelerator will refresh cached content at a specified interval.

Furthermore, the web accelerator is also able to prefetch and cache content that the user is likely to ask for, such as the next page of a document. This method will enable web accelerator to deliver the content immediately after the user requests it.

Compression
To reduce transfer times, a web accelerator will compress large files, such as image or video files.

SSL/TLS Processing
In order to serve content faster, some advanced web accelerators can offload computationally intensive processing from backend servers. For example, encryption and decryption of documents during transmissions secured with Secure Sockets Layer (SSL) or Transport Layer Security (TLS).

 

How to Avoid Design Fails through a Usability Test

how-to-avoid-a-design-fails-through-a-usability-test

As web designers, one of the lessons that will come in handy is learning objectives. With these objectives, a designer will figure out whether a design has passed or failed a usability test. Here are few things that you should know.

Verbs are Magical

One of the books that can teach you about learning objectives is George Piskurich’s Rapid Instructional Design. These books will provide you with list of behaviors to start your success criteria.

For example, you need to describe or demonstrate your objectives for comprehension rather than just understand it.

After obtain a higher level, a participant might develop their work stage into “explain” or “organize”, and even “create” or “evaluate”.

Think through the End of the Session

When you start planning your next usability test and you’re working on tasks, you can ask yourself a simple question like, “What should a user be able to do with this design?”

This question will take you to these answers:

  • Track three hours of time for a particular project;
  • Generate an invoice to a client based on that tracked time;
  • Describe the difference between tracking time and logging time.

Those three statements will guide you to give three success criteria to the participants. Success is different with tasks, even though it may sound similar. Success criteria are for your team, while the task is for the participant in the context of the usability session. In fact, in the explanation above, you’ll see that success criteria are about describing something. For instance, following-up question to a task rather than completing a task.

Stakeholders Love Success Criteria

Since stakeholders’ orientation is on your results rather than on your process. They will be terribly irritated, if your presentation of the results is vague.

So, using success criteria can help you clarify whether your design is really successful. They make it easier to share those results.

To help you track your success criteria, you can create a simple table with a color coding, such as below:

web designer

On the table, you can find where the problems are and grounds the results in the experiences of actual participants.

What is Minification?

css minification

Web browsers aren’t concerned about the readability of code, when it comes to generating a page or running a script. In order for the file to be executed, minification strips a code file of all data that isn’t required. With minified files, you don’t need to be decompressed before they can be read, modified or executed. This is so much different from traditional compression techniques. If you are a web developer or web designer, you may need to know further information about CSS minification.

After the code for a web application is written, and before the application is deployed, minification is performed. Minification can result in faster response times and lower bandwidth costs, as it sends the minified version instead of the full version. Nowadays, minification can be widely used in many websites ranging from small personal blogs to multi-million user services.

Minification Techniques and Tools

Minify is one of the more comprehensive minification tools. Minify handles minification, caching, and compression of CSS, HTML and JavaScript files. Minify also offers integration with popular web applications and frameworks including WordPress and the Zend Framework.

HTML minification

If you are looking for performance improvements to websites, you can find the PageSpeed Insights Chrome extension in Google. PageSpeed Insights provides a “Minify HTML” rule which generates a minified version of the open website.

CSS minification

Several online tools provide instant CSS minification, since CSS is less likely to change frequently. To get a quick and simple way to minify CSS, Refresh-SF uses multiple tools to minify CSS, HTML and JavaScript.

JavaScript minification

To create a more efficient copy of any JavaScript file, you can use Google’s JavaScript optimization tool, the Closure Compiler. Usually, a developer will use the Closure Compiler to minify the code and make change to a JavaScript file. For a user’s web browser, they can access the new file in the web server.

Example of Minification

The following code block shows an example of plain HTML and CSS:

<html>
       <head>
               <style>
                 #myContent { font-family: Arial }
                #myContent { font-size: 90% }
</style>
</head>

        <body>

                 <!– start myContent –>
                       <div id=”myContent”>
                       <p>Hello world!</p>
                       </div>
                 <!– end myContent –>

        </body>
</html>

Here are the same codes after minification:

<html><head><style>#myContent{font-family:Arial;font-size:90%}</style></head><body><div id=”myContent”><p>Hello world!</p></div></body></html>

Benefits of Minification

  1. As less unnecessary data needs to be downloaded, users can load content faster. Users experience identical service without the additional overhead.
  2. Lower bandwidth costs as less data is transmitted over the network. Developers no longer send the extra content that users don’t care about.
  3. Lower resource usage since less data needs to be processed for each request. The minified content need to be generated once, but can be used for an unlimited number of requests.