Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Optimization’.

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

Introducing The Website Speed Test Image Analysis Tool

Web developers spend their days writing hypertext, but, byte for byte, most of the web is composed of images. It is hard to overstate the effect that images have on the average web page’s performance; faster websites have broader reach and a higher impact. The first and most important thing you can do to improve the performance of your website’s images is figure out how to measure them.

Introducing The Website Speed Test Image Analysis Tool

Enter Website Speed Test, a free and drop-dead-simple tool that leverages our (Cloudinary’s) image smarts to let you measure, diagnose and (crucially) communicate about the image performance of any website. Better yet, it’s built on top of, and integrated in, Pat Meenan’s WebPagetest. Interested? Read on!

Read more...

Let The Content Delivery Network Optimize Your Images

Sometimes you have to step back and ask why a tradition exists. In mobile-first design, serving an image in three sizes — one for smartphones, one for tablets and one for desktops — using media queries and responsive images has become a tradition. But is it the best solution?

Let The Content Delivery Network Optimize Your Images

It's most likely better than doing nothing, but how well does it actually work? And is there room for improvement? In this article, we'll look closely at how well the one-size-per-form-factor approach really works and how we can use smart content delivery networks to improve image performance.

Read more...

case study How Mail.Ru Reduced Email Storage From 50 To 32 PB

When the Russian ruble's exchange rate slumped two years ago, it drove us to think of cutting hardware and hosting costs for the Mail.Ru email service. First, we had to take a look at what email consists of. Indexes and bodies account for only 15% of the storage size, whereas 85% is taken up by files. So, optimization of files (that is, attachments) is worth exploring in more detail.

How We Reduced Email Storage At Mail.Ru From 50 To 32 PB

At the time, we didn't have file deduplication in place, but we estimated that it could shrink the total storage size by 36%, because many users receive the same messages, such as price lists from online stores and newsletters from social networks that contain images and so on. In this article, I'll describe how we implemented a deduplication system under the guidance of PSIAlt.

Read more...

WordPress Responsive Images With Art Direction

Support for responsive images was added to WordPress core in version 4.4 to address the use case for viewport-based image selection, where the browser requests the image size that best fits the layout for its particular viewport.

Responsive Images In WordPress With Art Direction

Images that are inserted within the text of a post automatically get the responsive treatment, while images that are handled by the theme or plugins — like featured images and image galleries — can be coded by developers using the new responsive image functions and filters. With a few additions, WordPress websites can accommodate another responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints.

Read more...

How To Optimize Mobile Performance

You can’t underestimate the importance of consistent, high-quality web design across devices of all shapes and sizes. Responsive web design is the way forward — but it’s often linked to performance issues. This is critical when 64% of smartphone users unforgivingly expect websites to load in under four seconds, yet average page weights continue to rise.

Managing Mobile Performance Optimization

The best designs balance aesthetics and performance by working with mobile in mind from the start. From setting strict performance budgets to implementing client- and server-side optimization techniques, I’ll share the current mobile performance optimization processes we use at Cyber-Duck.

Read more...

Technical SEO – Fundamental Principles

Ask ten people what SEO is, and you’re likely to get ten different answers. Given the industry’s unsavoury past, this is hardly surprising. Keyword stuffing, gateway pages, and comment spam earned the first search engine optimisers a deservedly poor reputation within the web community.

Modern Technical SEO: Wiring Websites for Organic Search

Snake oil salesmen continue to peddle these harmful techniques to unsuspecting website owners today, perpetuating the myth that optimising your website for Google or Bing is an inherently nefarious practise. Needless to say, this is not true.

Read more...

HTTPS Everywhere With Nginx, Varnish And Apache

The web is moving toward using HTTPS encryption by default. This move has been encouraged by Google, which announced that HTTPS would be a ranking signal. However, moving your website to HTTPS is good for other reasons, too.

HTTPS Everywhere With Nginx, Varnish And Apache

Rather than debate those reasons, this article assumes you have already decided to move to HTTPS. We’ll walk through how to move your website to HTTPS, taking advantage of Varnish Cache.

Read more...

What A/B Testing Taught Us About App Store Optimization

1.5 million apps in Apple’s App Store and another 1.5 million in Google’s Play store. That’s a lot of apps, and for a growing number of mobile users. An average user in the US will download only three new apps per month (at best), according to comScore’s “US Mobile App Report.”

What A/B Testing Taught Us About App Store Optimization

Competition in the App Store is fierce, and if an indie app developer wants to get noticed, having an amazing product is no longer enough.

Read more...

Understanding Critical CSS

The web is slow, yet there are a few simple strategies to make websites faster. One of them is inlining critical CSS into the <head> of your pages, yet how exactly do you do it if your site contains hundreds of pages, or even worse, hundreds of different templates? You can't do it manually. Dean Hume explains an easy way to get it done. If you're a seasoned web developer, you might find the article obvious and self-explanatory, but it's a good piece to show to your clients and junior developers for sure. — Ed.

Understanding Critical CSS

Delivering a fast, smooth web experience is an important part of building websites today. Most of the time, we develop websites without understanding what the browser is actually doing under the hood. How exactly does the browser render our web pages from the HTML, CSS and JavaScript that we create? How can we use this knowledge to speed up the rendering of our web pages?

Read more...

Efficient Image Resizing With ImageMagick

Responsive images have been keeping us on our toes for quite some time, and now that they are getting traction in browsers, they come with a scary problem: the need to efficiently resize all our image assets. The way responsive images work is that an appropriately sized image is sent to each user — small versions for users on small screens, big versions for users on big screens.

Super-Efficient Image Resizing With ImageMagick

It’s fantastic for web performance, but we have to face the grim reality that serving different sizes of images to different users means that we first need to create all of those different files, and that can be a huge pain.

Read more...

A Better Way To Design For Retina In Photoshop

Recently, I had a project in which I needed to produce high-fidelity screens for a tablet. I was to present these screens on the device and also produce a clickable prototype. They needed to be pixel-perfect. The timeline was tight (as always), so I went with my go-to tool, Photoshop. I’ve been using it for over 10 years, and it gives me the fastest high-quality output.

A Better Way To Design For Retina In Photoshop

Are you designing at “Retina” resolution in Photoshop? If the answer is yes, then this article is for you. I will walk you through the problems I faced in creating Retina mockups to be displayed on a tablet device. I will then explain a way to work that is easier and gives you better performance. This is about my experience with Photoshop, but it could be applied to Illustrator and other software.

Read more...

Extending In Sass Without Creating A Mess

The @extend directive in Sass is a powerful directive that facilitates the sharing of rules and relationships between selectors. However, it can produce undesirable side effects if it is not carefully implemented. Thankfully, there are many strategies for using @extend effectively that can prevent these side effects and produce clean, organized CSS.

Extending In Sass Without Creating A Mess

By examining @extend in detail and exploring these various strategies, you can accurately predict exactly what happens when you use @extend, and make more informed decisions about when to use a @mixin and when to use @extend, to ensure optimal organization and to restrict unused styles in your style sheets.

Read more...

↑ Back to top