Website optimization tips

Websites are now richer than ever. They have high quality images, astonishing animations and responsive CSS, but this comes with a cost: your server will have to serve bigger images and text files, and your clients’ browsers will need to use more CPU cycles to process your site. In this post we will see how we can improve this without affecting the quality of the beautiful site you devised.

The Peregrine Falcon is considered the fastest member of the animal kingdom.

The Peregrine Falcon is considered the fastest member of the animal kingdom. A really “optimized” bird.

GZIP compression

Enabling GZIP compression is probably the easiest way to give a boost to our website, as we can have it up and running in a matter of minutes.

GZIP provides lossless compression, that is, we can recover the original data when decompressing it. It is highly recommended for text files such as HTML, CSS, JavaScript or XML, and as it is really fast, there is almost no overhead both in the server or the browser.

Check out our post on how GZIP works to see how to enable GZIP compression in Apache or nginx.

Image optimization

Optimizing images is crucial, as they represent around 60% in average of the total weight of modern websites, being JPEG the most used format:

formats

The first step to optimize images, even before using any tool, is to determine which is the most appropriate format for a specific image.

JPEG

JPEG images are usually suitable for photographs and performs worst results for small images or containing text or sharp lines.

There are a few tools to optimize JPEG images, but we will see only two: jpegoptim and jpegtran.

jpegoptim is a command-line tool available in most Linux repositories, as well as in Macports and Homebrew. Supports lossless and lossy compression.

$ jpegoptim aircraft.jpg
aircraft.jpg 467x312 24bit Exif ICC JFIF  [OK] 31623 --> 30810 bytes (2.57%), optimized.

If we ask jpegoptim to discard ICC profiles, IPTC markers, EXIF markers and comment markers, we can achieve greater compression:

$ jpegoptim --strip-all aircraft.jpg
aircraft.jpg 467x312 24bit JFIF  [OK] 31623 --> 19261 bytes (39.09%), optimized.

By default, the lossless optimization mode is enabled. So, previous transformations have not had cost in terms of image quality. We can enable the lossy mode and so have even higher compression ratios (reducing quality). In the following example, a quality of 80% is defined. Ratio is quite impressive but obviously the quality of the image is not the same:

$ jpegoptim --strip-all -m80 aircraft.jpg
aircraft.jpg 467x312 24bit JFIF  [OK] 31623 --> 14981 bytes (52.63%), optimized.

Determining the optimal value of the quality loss is a manual process, but we don’t have to be afraid of it. Usually, a quality loss of 5% – 10% is not perceived by the regular human eye. There are other situations where quality is not important, so we can have a bigger loss, like in small thumbnails.

The other tool, jpegtran, performs only lossless transformation of JPEG files. It also allows us to transform the image: rotate, scale, convert into grayscale, etc.

$ jpegtran aircraft.jpg > aircraft_comp.jpg
$ ls -lh
-rw-r--r-- 1 raul  raul  31K Apr 22 10:56 aircraft.jpg
-rw-r--r-- 1 raul  raul  20K Apr 22 11:01 aircraft_comp.jpg

Many times, grayscale images used in websites are not really grayscale, but color images using only gray tones. Changing the image mode to grayscale we can achieve better results.

PNG

PNG is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for GIF. It is usually used for graphics, but is capable to handle an impressive number of image types with good results.

OptiPNG is a PNG optimizer that, without losing any information, reduces the size of PNG files. It works in two steps: first, preprocesses the pixels to make them more “compressible”, that are later compressed using LZ77. It provides quite a few options and optimization modes.

Executing it with default settings we get a 39.18% decrease in this image:

$ optipng image.png
** Processing: image.png
450x90 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 8 bits/pixel, 37 colors (34 transparent) in palette
Input IDAT size = 7467 bytes
Input file size = 8375 bytes

Trying:
  zc = 9  zm = 8  zs = 0  f = 0		IDAT size = 4017
                               
Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 0		IDAT size = 4017

Output IDAT size = 4017 bytes (3450 bytes decrease)
Output file size = 5094 bytes (3281 bytes = 39.18% decrease)

As it provides different optimization levels (-o0 … -o7), we can try to get better ratios by using more time/memory.

GIF

GIF is a bitmap format usually used for simple animations, but its usage is decreasing in favor of CSS3 animations. It is still a widely used format to display funny cats though :)

If you like computer science history, the GIF part is quite interesting. From the “Unisys/CompuServe GIF Controversy” episode, that led to the “Burn all GIFs campaign”, to crazy stuff that has been done recently such as gifsockets, a library to provide real time communication using animated GIFs as a transport layer.

Going back to the purpose of the post, even though GIF images are usually really small, we can reduce them a bit. Gifsicle is a command-line tool for creating or editing GIF images, and since the animations consist of frames and some parts of the image don’t change from one frame to another, GIFsicle detects it and does not carry over the duplicate pixel information:

$ gifsicle -O2 image.gif > image_opt.gif
$ ls -lh
-rw-r--r-- 1 raul  raul  565K Apr 22 14:07 image.gif
-rw-r--r-- 1 raul  raul  548K Apr 22 14:07 image_opt.gif

WebP

WebP is an image format created by Google that provides lossless and lossy compression for images. The compression ratio is significantly better than PNG (26%) and JPEG (25-34%). Unfortunately is still not supported in all browsers. Firefox, Internet Explored and Safari still don’t support this format.

Favicon

A favicon is that little icon associated with a web page that is displayed next to the URL. This icon is usually placed in the server’s root directory with the name favicon.ico. Forgetting to include this icon affects the performance. As web browsers ask for it explicitly, if we don’t have a favicon our web server will have to look for it every time and return a 404 Not Found error. So, the recommendation is to have a small (less than 1K) and cacheable favicon.

ImageMagick can help us to create small favicons by reducing its size (16×16 should be enough) and number of colors. For example, to create a 16×16 favicon using only 4 colors from a PNG image:

$ convert -resize 16x16 -colors 4 favicon.png favicon.ico

We can increase the number of colors until our favicon looks ok. For example, I was able to create a ServerGrove favicon of 318 bytes (current one weights 678 bytes) using 16 colors and with similar quality.

Text files size reduction

As we discussed earlier, text files must be compressed with GZIP as we can achieve great compression ratios. Let’s see what we can do if we want to go even further:

JavaScript and CSS

There are two common techniques to try to reduce JavaScript and CSS files size: minification and combination.

By minifying a JavaScript/CSS file, we remove unnecessary bytes, such as extra spaces, line breaks and indentation.

YUI Compressor is a JavaScript and CSS compressor tool created by Yahoo!. It is a JAR file so we only have to download it and execute it with the Java runtime. For example, to minify the jQuery library:

$ java -jar yuicompressor.jar jquery.js > jquery.min.js
$ ls -lh
-rw-r--r-- 1 raul  raul  239K Apr 22 13:25 jquery.js
-rw-r--r-- 1 raul  raul  127K Apr 22 13:26 jquery.min.js

Another common technique is to combine different JavaScript/CSS files into 1 (1 of each type, of course). This has two benefits: less round-trips (requests) and possibly better GZIP compression ratios, as it works even better for larger files.

Finally, there are specific techniques to reduce the size of JavaScript or CSS files. For example, in CSS, we can convert “margin: 0px 0px 0px 0px” to “margin:0″, or “border-color: #ffeedd” to “border-color: #fed”. These optimizations are also done by YUI compressor. For JavaScript, variable names can be changed automatically for shorter ones.

HTML

HTML files can be minified, but is not an easy task at all, as there are tags such as <pre>, <textarea>, <script> and <style> that may be affected if we remove certain whitespaces. It is also important to note that can be a slow process, so doing it on the fly may not be the best idea, but for files minified once and served many times.

htmlcompressor is a Java-based command-line tool to minify HTML files. For example, the index page of the ServerGrove site can be reduced from 29K to 23K:

$ java -jar htmlcompressor.jar -o servergrove.min.html servergrove.html 
$ ls -lh
-rw-r--r-- 1 raul  raul  29K Apr 22 12:54 servergrove.html
-rw-r--r-- 1 raul  raul  23K Apr 22 12:55 servergrove.min.html

Remember to test the results as it is still an experimental technique.

Other files

Web fonts

Web fonts usage is growing steadily. According to HTTP Archive, 43% of websites are using them:

fonts

Web fonts size is determined by the number of glyphs, metadata and the used compression method. To make it more complicated, there are four different formats (woff, ttf, eot, svg), and none of them provides universal adoption. Services like Google Fonts can help us with this, and as we will see, it also provides ways to optimize the font size.

For example, the Open Sans webfont, as supports 20+ languages, weighs in at over 217K. If we are using only latin characters, we can ask only for that subset, reducing its size dramatically to 36K:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin" rel="stylesheet" />

We can even download a web font containing only a few characters, something useful for fonts that are only used for a title for example:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&amp;text=ServerGrove" rel="stylesheet" />

Flash

Unlike web fonts, the use of Flash in modern websites is going down, but still relevant, as 29% of websites still have at least 1 Flash file.

flash

Using vector graphics and avoiding embedded fonts can help to reduce the size of Flash files. Also, when using raster images, previous tips for compressing images are applicable too. Said that, my personal recommendation is to not use Flash unless is strictly necessary, something that is becoming less and less common with CSS3 and the new JavaScript APIs.

Caching

Caching is essential in today’s websites and applications. The basic idea behind caching is not to serve the same content to the same client twice. It is especially useful for resources that don’t change often, such as CSS/JavaScript files or images. With caching, we reduce the number of request our web server will have to handle, as well as the data transmitted. In HTTP, this is achieved by using HTTP headers.

HTTP/1.1 provides the following caching response headers:

  • Expires and Cache-Control: max-age: These headers specify how long the browser can consider the resource as fresh and use it instead of requesting it again. Once this time is expired, the browser will request the resource to the server.
  • Last-Modified and ETag: These headers follow a different approach, as are two ways to determine if the file we are requesting is the same as we have in the cache, and in case it differs, download it again.

For static assets, the recommended strategy is to set Expires to one year and the Last-Modified date to the last time the resource was changed.

Network optimizations

Reduce cookie size

Cookies must be as small as possible. The reason is that they are sent in the HTTP headers in every single request. No matter if we are requesting an HTML page, JavaScript file or even images, they are sent always. Using a different domain/subdomain for serving static assets can help as no cookies will be sent.

DNS lookups

Web browsers have a limit on the number of concurrent connections, so it is common to parallelize downloads across hostnames (domains or subdomains). While this can be good measure to load your site faster, if the number of hostnames is too long the time that the client spends to resolve the domain can affect negatively.

Avoid bad requests

404 Not found or 410 Gone HTTP responses come from unnecessary requests, which waste server time and resources. Looking for broken links and removing them is simple, so there is no excuse to leave them there.

Tools

It is important to be able to measure our page as soon as we are improving its performance. Automatic tools are of great help, as they report potential issues and give us indications in order to improve them. The most important ones are Google PageSpeed, YSlow and GTmetrix.

PageSpeed Module

mod_pagespeed and ngx_pagespeed are open-source modules created by Google for Apache and nginx. These modules speeds up websites by automatically applying some of the recommendations we have been talking about in this post, without having to modify our existing content or workflow.

Resources

Photo: Peregrine Stretching Wings, by Jerry Kirkhart

marzo 13 / 2015

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

Sunshine PHP 2015

ServerGrove is a Silver sponsor of this year’s Sunshine PHP Developer Conference in Miami!

We’ll have a table setup and we’d love to meet you! Stop by, say “hi!” and let’s talk shop.

Oh, and we’ll be giving away 3 months of free VPS service to folks who visit us (VPS300).

The conference schedule looks great! Some of the talks that we’re looking forward to are:

  • Advanced Git Skills
  • Your Inner Sysadmin
  • Getting Started with Varnish
  • Unit Testing PHP Applications (you do have a test suite for your applications, right? right?)
  • Tuning Nginx And PHP-FPM The Right Way
  • REST API Best Practices
  • Dockerize All The Things!

We’re excited for the conference and we’ll see you all there!

febrero 04 / 2015
Author Avi
Comments 1 Comment

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

PHP 5.5 available on Shared Hosting

We have provisioned new Shared Hosting servers with support for PHP 5.5 and 5.4. You are able to select different versions of PHP for each domain. If you are looking for speed and all the latest features, 5.5 is the one.  You can take a look at the phpinfo for our PHP 5.5 installation here.

We have noticed big improvements in performance compared to our previous servers, so we are really excited about it, order your shared hosting account now!

We are also offering Shared Hosting in our European datacenter.

It’s important to note that PHP 5.3 reached the end of life, so no more updates will be available anymore. We don’t have plans to force an upgrade to customers currently on servers with PHP 5.3.

If you are currently a Shared Hosting customer and would like to migrate your account to one of the new servers, please open a support ticket so we can coordinate the migration.

agosto 21 / 2014

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

PHP 5.3.29 released and available at ServerGrove, reaches EOL

Last week, the PHP group released the last version of the PHP 5.3 series, 5.3.29. It has reached the end of life, so no further updates will be available for it. It is encouraged to upgrade to PHP 5.4 or even better, 5.5.

PHP 5.3.29 contains about 25 potentially security related fixes backported from PHP 5.4 and 5.5. Read the full Changelog for further details.

If you are a current ServerGrove customer with an account on a server with PHP 5.3, check out our announcement of the availability of PHP 5.5 on Shared Hosting.

agosto 21 / 2014
Author Pablo
Category PHP, Shared Hosting
Comments No Comments

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid

2014 PHP Conferences (2nd edition)

2014 started with out as a great year for PHP conferences, but is not over yet and there are still quite a few very good conferences coming up. Here are some of these conferences where you can sharpen your skills, meet key members of the PHP community, and make new friends:

WeCamp wecamp-logo

The Netherlands – August 25th-29th, 2014
http://weca.mp/

WeCamp is a new event focusing on not just hearing about cool technology, but also applying it. During the 5 days of the event, you’ll get to work on a project together with 4 random other people, under the guidance of an experienced coach.

New Zealand PHP Conference NZ-php

Wellington – August 27th-29th, 2014
http://www.phpconference.co.nz/

This is the first edition of this event and it is looking good, with a great selection of speakers, nice venue, and it’s in New Zealand. What else can you ask for?

Summer Camp Croatia PHP phpsummer-croatia

Rovinj, Croatia – September 3rd – 6th, 2014
http://2014.phpsummercamp.com/

Improve your skills under the sun in a beautiful small Croatian town. No need to say more!

North East PHP phpNE

Boston, USA from September 6th – 7th, 2014
http://www.northeastphp.org/

The second edition of North East PHP includes a mix of PHP and UX topics with some really interesting talks. With an entry fee of $150, there is no excuse to miss it if you are in the region.

MadisonPHP madison

Madison, Wisconsin – September 13th, 2014
http://2014.madisonphpconference.com/

Top notch selection of speakers for this one day event. The ticket price is a steal at $99 until Aug 27th, then it shifts to the regular price of $149.

brnoPHP brnophp-logo

Brno, Czech Republic – September 20th, 2014
https://www.brnophp.cz/conference-2014

Being the first of its kind, it brings together great technology content and great people. You will find a high-quality presentations by the brightest experts in the PHP world, coupled with a welcoming and friendly community of attendees and speakers.

Symfony Live London sfl_london_2014

London, UK from September 25th – 26th, 2014
http://london2014.live.symfony.com/

I attended the first Symfony Live in London that was held at The Brewery and it was a great experience. I will be attending again this year on my way to Manchester for PHPNW. I am looking forward to catch up with the Symfony community in the UK.

ZgPGP zgPHP

Zagreb, Croatia from October 2nd, 2014
http://2014.zgphp.org/

Three years ago, they started organizing Zagreb PHP user group meetings. This conference is a way to say happy birthday and thanks to all members that have been a part of this awesome community. The 2013 conference blew everyone’s expectations: amazing speakers, generous sponsors, perfect venue, plenty of food and drinks and most importantly great bunch of developers and web aficionados. Why not do it all again?

PHP South Africa phpcraft-southafrica

Cape Town, South Africa from October 2nd – 4th, 2014
http://www.phpsouthafrica.com/#home

PHP South Africa is aimed at proficient developers, new developers and people who care about developers, with events that are all about working together to inspire each other to greater heights in our skill and passion for coding. South Africa’s PHP community exists of an exciting mix of developers, ranging from junior developers, to the very best in the industry. This year they will be having a special PHP Youth Conference to encourage the next generation of developers. With over 140 students attending a 2 day event from previously disadvantaged backgrounds, this is their stepping stone to passing on our craft.

PHPNW UK 2014 nw

Manchester, UK from October 3rd – 5th, 2014
http://conference.phpnw.org.uk/phpnw14/

I have heard a lot about this conference and many of the developers I highly respect, go there no matter what. This year I have been fortunate to be selected to give a talk, so I am really happy to add this one to the “attended” list. Take a look at the schedule, it is great!

Symfony Live NYC sfl_newyork_2014

New York City from October 9th – 10th, 2014
http://newyork2014.live.symfony.com/

The North American edition of the Symfony events moves to the east coast and New York will be the place to be if you are involved with Symfony in any way. The call for papers is still open, so if you have something to share you still have time.

PHP Forum Paris 2014 screenshot-www afup org 2014-08-11 12-15-53

Paris from October 23rd – 24th, 2014
http://www.afup.org/pages/forumphp2014/

AFUP is pleased to announce the next edition of the PHP Forum, the largest annual gathering of all the PHP communities, professional and open-source, dedicated to the language and its ecosystem in France.The Forum PHP 2014 will take place Thursday 23 and Friday 24 October 2014, in Montrouge, at the gates of Paris

ZendCon zendcon

Santa Clara, California – October 27th – 30th, 2014
http://zendcon.com/

The annual PHP conference organized by Zend turns 10 years old, and there will be a big celebration. The schedule looks really interesting.

True North
truenorth2012

Toronto, Canada – November 6th -8th, 2014
http://truenorthphp.ca/

True North is the premier Canadian PHP conference. Their call for papers is currently open and early bird tickets will be going on sale soon.

PHP Conference Argentina php-ARG

Buenos Aires, Argentina – November 7th – 8th, 2014
http://2014.phpconference.com.ar/

I attended and spoke at this event last year and it was a blast. Some of the top speakers for this edition are Michael “Monty” Widenius (creator of MySQL), Brad Fitzpatrick (creator of Memcached), Mitchell Hashimoto (creator of Vagrant) and Fabien Potencier (creator of Symfony). If these names are not enough to impress you, take a look at the rest of the lineup (more speakers are being announced daily). Also, there will be the “Gaucho day“, a 3rd day full of talks, hackathon, games, and argentinian food!

php[world] php-world14

Washington DC, November 10th – 14th, 2014
https://world.phparch.com/

A new conference with the goal to unite all communities within the PHP world and organized by the folks at php architect. With 5 conference tracks over 3 days (plus a tutorial day) this promises to have something (and a lot) for everyone!

Tech Meetup UY techmeetup

Montevideo, Uruguay – November 14th – 15th, 2014
http://tech.meetup.uy/

If you live in Uruguay or nearby, this event is great to meet with the Uruguayan developer community. It includes talks covering a wide range of technologies. It is organized by a great group of very energetic individuals. Check out the video from the 2013 edition.

SymfonyCon Madrid sfc_madrid2014

Madrid, Spain from November 27th – 29th, 2014
http://madrid2014.symfony.com/

The premier event for the Symfony world will be held in Madrid, Spain. The community in Spain is very active and numerous (deSymfony attracked 400 in 2013 alone), so there is no doubt this will be an amazing event. Don’t miss it! The call for papers is open until September 4th.

 

Did we miss your conference. Email help_at_servergrove_dot_com and we’ll list it.

agosto 08 / 2014
Author Pablo
Category Conferences, PHP
Comments No Comments

Upcoming Conferences

WeCamp

PHP New Zealand

PHP Summer Camp Croatia

PHPNE

MadisonPHP

brnoPHP

SymfonyLiveLondon

ZgPHP

PHPSouthAfrica

PHPNWUK

SymfonyLiveNYC

PHPForumParis

PHPARG

PHPWorld

TechMeetupUY

SymfonyConMadrid