CategoryOptimization

August 13, 2015 — 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? Google’s PageSpeed Insights tool can be very helpful when trying to profile a web page and find areas for improvement. You simply enter the URL of the page that you want to test, and the tool provides you with a list of performance suggestions. Fortunately, the solution to this problem is simpler than it seems! The answer lies in the way that the CSS and JavaScript are loaded in your web page. Read more…

June 25, 2015 — 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. As designers and developers, we have an enormous amount of power to shape how the web works. One of the biggest impacts we can have is to make our websites more performant, which will improve our users’ experiences and even make our content available to whole new markets. Cutting image weight is a relatively simple and hugely impactful way to increase performance, and I hope the information outlined above helps you make a difference to your users. Read more…

May 18, 2015 — Are you designing at “Retina” resolution in Photoshop? In this article, Murdoch Carpenter will walk you through the problems he faced in creating Retina mockups to be displayed on a tablet device. He will then explain a way to work that is easier and gives you better performance. This is about Murdoch’s experience with Photoshop, but it could be applied to Illustrator and other software. Throughout this article, he will use the @2x and @3x notation. These represent the Retina buckets for iOS. A great example is the app’s icons. Read more…

May 4, 2015 — The extend directive 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. Understanding how extend works and keeping the guidelines above in mind will enable you to use @extend to its full advantage — reducing CSS output and keeping relationships intact, no matter what exported selectors (classes, attributes, etc.) you use. Make wise use of both the @mixin and @extend directives — they’re meant to coexist in your well-organized style sheets. Read more…

February 16, 2015 — ESI works in a similar way to other methods of including fragments in your pages, such as Server Side Includes (SSI) or PHP include statements, but it has been designed for reverse proxies like Varnish that sit in front of a web server and cache content. In this article Rachel Andrew will explain how you can benefit from using Varnish even when there are parts of your pages that can’t be cached for long periods, using Edge Side Includes. Read more…

September 25, 2014 — It’s easy to get lost with so many options for hosting your website. You have quite a lot to choose from! How much should you pay? Is support important to you, or are you a tinkerer who likes to do your own thing? Hopefully, reading this article will help you have a clearer picture of the different packages available, and you will be able to make a decision based on your website, requirements and budget! Read more…

August 27, 2014 — WordPress has released the first release candidate for the upcoming 4.0 version. According to the official version numbering, and a new major release is always a cause for excitement! Since Daniel Pataki has always used WordPress in English, it took him a while to realize how important internationalization is. Version 4.0 makes it much easier to get WordPress to speak your language. In fact, the first installation screen asks you to choose your native tongue. Let’s take a look at the new features the team at WordPress has been working on for us! Read more…

June 11, 2014 — Gulp is one of quite a few build tools available in JavaScript, and other build tools not written in JavaScript are available, too, including Rake. Why should you choose it? Gulp is a build system that can improve how you develop websites by automating common tasks, such as compiling preprocessed CSS. In this article, Callum Macrae will see how you can use Gulp to change your development workflow, making it faster and more efficient. Read more…

April 23, 2014 — In this article, Per Buer will talk about cache invalidation specifically to readers who already work with Varnish Cache. To learn more about it, you’ll find background information in “Speed Up Your Mobile Website With Varnish.” A cache miss depends on two factors: the volume of traffic and the average time to live (TTL), which is a number indicating how long the cache is allowed to keep an object. To have a high TTL, we need to be able to invalidate objects from the cache so that we avoid serving stale content. With Varnish Cache, there are myriad ways to do this. You’ll explore the most common ways and how to deploy them. Read more…

March 21, 2014 — People recommend various tips on optimizing WordPress’ performance. All of them are effective ways, however, be careful when implementing any of these techniques. In this article, Hristo Pandjarov will cover some of the most common issues with various speed boosters that he has encountered and share solutions to help you fix those problems or find ways around them. Read more…