Posts Tagged ‘Optimization’

We are pleased to present below all posts tagged with ‘Optimization’.

Let’s Play With Hardware-Accelerated CSS

If you’re a developer of mobile Web apps, then you’ve heard this before: Native apps perform better than Web apps. But what does “perform better” mean? In the context above, performance is usually about measurable aspects such as loading time and responsiveness to user interaction. But more often than not, statements about performance lie within the realm of animations and transitions and how smooth they are.

Let's Play With Hardware-Accelerated CSS

We humans tend to perceive a transition as being “smooth” when the number of frames per second (FPS) drawn on the screen is above a certain cognitive threshold — about 30 or so, arguably.

Read more...

10 Tips To Optimize Your WordPress Theme

The beauty of WordPress is in how easy it is to adapt for different tasks. One can extend it with just a couple of lines of code. In this post, we’ll review 10 shortcode snippets that will tweak and optimize your WordPress theme. You can add all of these code snippets to the functions.php file in your WordPress theme.

One thing that can go wrong in WordPress magazine themes is when users include too many words before the more tag. Sure, they could handcraft the excerpt in the dedicated field, but on a website that has hundreds of posts and on which the text above the more tag has always been used as the excerpt, going back to create excerpts for all of those posts by hand would be cumbersome. In this case, we can limit the number of words shown in the excerpt by using the code displayed below.

Read more...

Optimize Images With HTML5 Canvas

Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-quality images that are bigger in size and poorer-quality images that download more quickly. And keep in mind that modern Web browsers have enough power to enhance images right on the user’s computer. In this article, I’ll demonstrate one possible solution.

Let’s refer to an image that I came across recently in my job. As you can see, this image is of stage curtains and has some (intentional) light noise:

Optimizing an image like this would be a real pain because it contains a lot of red (which causes more artifacts in JPEG) and noise (which creates awful artifacts in JPEG and is bad for PNG packing). The best optimization I could get for this image was 330 KB JPEG, which is quite much for a single image. So, I decided to do some experiments with image enhancement right in the user’s browser.

Read more...

Optimizing Error Pages: Creating Opportunities Out Of Mistakes

In this article I'll be reviewing a few techniques that will help Web designers and UI professionals to improve their error pages in order to engage visitors and improve overall website experience. As C. S. Lewis once said, “Failures are finger posts on the road to achievement”. Web designers should take this to heart.

Screenshot

I’ll be focusing on error and maintenance pages, both from tracking as well as usability perspectives. I’ll also be providing a good number of examples on how to use analytics and defensive design in order to optimize user experience for such pages. First, let’s go over the error pages and cover the questions on how to optimize them efficiently.

Read more...

PNG Optimization Guide: More Clever Techniques

This post is a second part of the article Clever PNG Optimization Techniques that we posted last week. As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. Some of you may even think that this format is “unoptimizable”. Well, in this post we’ll try to debunk this myth.

Screenshot

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We'll talk about grayscale, how to use fewer colors for optimization and also about reducing detail to minmize the file size.

You may want to take a look at the following related articles:

Read more...

How To Automate Optimization and Deployment Of Static Content

A lot of traffic between users and your site comes from the static content you’re using to set up the user interface, namely layout graphics, Stylesheets and Javascript files.

Before optimization

This article shows a method to improve the providing of static content for a web platform. Further, it will show you a way to automate the deployment of these files, so you can deliver them with least effort but with maximum performance. This tutorial will take some time to set it up, but it’s going to save you hours of work in the future and will improve your page speed significantly.

Read more...

Clever PNG Optimization Techniques

As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It's a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG's (PNG-24 in Photoshop), which doesn't have any. Some of you may even think that this format is "unoptimizable". Well, in this post we'll try to debunk this myth.

Screenshot

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We'll start with some essentials about the PNG format and will then move to advanced optimization techniques.

You may want to take a look at the following related articles:

Read more...

↑ Back to top