X

How to Accelerate Your Web Site

Speed to display a web site is critical, wait a few seconds and the visitor will quit.
It is an extremely important ranking factor for Google!

Reliable Hosting Company

Of course, choose carefully your host before everything else.
Test them during the free period most are offering, generally 30 days.

If speed is very important to you, it is for Google ranking, I recommend Planet Hoster, all VPS plans are using SSD hard disks, support is very friendly, they speak English and French. They have servers in Canada-Quebec and France.

Search Engine Optimization

When I need to do SEO, I use SEO PowerSuite.
Try the demo version, it is really cool.
Price is correct for all the tools, the team is professional.
They release frequent updates to incorporate Google's new rules which can affect your ranking.

Before You Start

Make a backup of your original files before any changes!

CSS and JavaScript, after compression are unreadable, though tools exist to format them back in a clean format.
After program code compression, test your code thoroughly.

Both languages are 'interpreted', mistakes might remain undetected before that part is executed.

Take a look at jsfiddle.net to make some quick tests.

Have fun!


2016-04-30

oncrawl.com provides well conceived and beautiful tools to analyze website performances, and proposes solutions to enhance it.


2016-03-13

screamingfrog.co.uk has a free multi-platform application, SEO-Spider, which crawls and collects information to create SEO reports, few limitations in the free version.


2016-01-20

website.grader.com very nice tool to evaluate a web site's performances, and to get various solutions to improve it.


2016-01-18

To reach your site, a visitor's browser must find its IP address. This and several other data are defined in DNS records. Generally, they are configured in the Domain Name Server(s) of the company from which you bought your domain name.

For a fast DNS resolution, you must have several DNS hosts in different countries/continents, the closer to the visitor, the faster he will reach your site.

With several DNS hosts around the world, not only you increase the resolution speed but also have backups if one of them is down!

luadns.com - 5 name servers: two in USA (NY and CA), two in Europe (NL and DE) and one in Asia (JP), optimized for fast propagation of changes and are constantly monitored.
Supported records: A, AAAA, ALIAS, CNAME, FORWARD, MX, NS, PTR, SOA, SPF, SRV, SSHFP.
A record can have 4096+ characters, e.g. needed for very secure DKIM definition.
Can you believe it's free for 3 domains with 30 host records, 5 minutes TTL, 50000 queries/month, redirects, email forwardings, real-time stats, AXFR, reverse zones, API, dashboard, statistics and git integration!!!

Few others, not tested:
namecheap.com
zonomi.com
cloudns.net


2015-11-15

BigRig eases performance testing during app or website developement.


2015-11-05

HTTPS/SSL/TLS slowing down? - O’Reilly - High Performance Browser Networking - Transport Layer Security don't miss this two valuable reports.


2015-10-15

Web Font Anti-Patterns are they slowing down your web site?


2015-05-16

SVGcleaner compress and clean SVG (Scalable Vector Graphic) up to 60%.


2015-04-03

Compressor.io is a free online tool to compress images (Max. 10 MB) with a high level of compression without loosing the original quality.

ImaCSS converts several images into data URI and save them in one CSS file as background images.


2014-03-07

Parallel Downloads Limits

Browserscope.org lists the details about all parallel limits: html, css, scripts...

Today the MaxConnexions number is 6 for most browsers, more for few of them.


In Firefox, type 'about:config',
filter by using 'parallel', 'network' or 'limit' word and check,
depending of FF version:
'network.http.max-connections',
'network.http.max-connections-per-server',
'network.http.speculative-parallel-limit'.

My latest tests on Macintosh Safari 6 show the limit was 4 for the same server/url!
Tests should be made using waterfall timeline in browser developper tools or from the great tools.pingdom.com.


2014-02-19

Kraken.io - Optimize your images with blazing speed

Kraken.io is my new discovery to compress images of max file size 16 MB, the results, quality and compression, are incredible! (See above Compressor.io which is free)

Minify - PHP App

Minify is a PHP5 app that helps you follow several of Yahoo!'s Rules for High Performance Web Sites.
It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

LazyLoad - Tiny, dependency-free async JavaScript and CSS loader

LazyLoad to load external JavaScript and CSS files on demand. LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load.

Yotta - Website Speed Test

yottaa.com to check speed, optimization, end user experience testing, mobile...
Test website speed and performance see what your users see any browser, any location & any last mile connectivity.


2013-05-17

Zoompf free speed report

Zoompf.com provides less known methods to accelerate a website.

There is a free diagnostic tool, some informations are only for subscribers but you have a lot of tools and references' links explaining the detected problems and how to solve them.


2013-04-22

CloudFlare.com free CDN

CloudFlare offers dozen of servers which will provide a huge acceleration to your site all around the world!

Go to CloudfFare.com to open a full featured, no time limit, free account!

Explanations from CloudFlare site:
CloudFlare CDN — Distribute your content around the world so it’s closer to your visitors (speeding up your site).
CloudFlare optimizer — Web pages with ad servers and third party widgets load snappy on both mobile and computers.
CloudFlare security — Protect your website from a range of online threats from spammers to SQL injection to DDOS.
CloudFlare analytics — Get insight into all of your website’s traffic including threats and search engine crawlers.
CloudFlare apps — CloudFlare apps makes installing web apps on your site fast, safe and one-click simple.

See also 2014-03-07 message above and 'Two servers - parallel downloads limits' message below.


2013-04-13

Tip: accelerate your web site

This is part was for the users of impresspages.org CMS.
So some parts will be a bit obscure but quite easy to apply to other sites or CMS.

Here is the best heading for SEO, speed and standard compatibility that I have reached until now based on all my researches.

Speed is very important for visitors, they left after 2 seconds and for Google since Penguin ranking algorithm.


GTMetrix
W3 Validation

.htaccess

Add this to Apache invisible file .htaccess
- use the correct charset (see below)
- use file caching
- compress files
- block sites to use your files, your bandwidth and slow down your site
- specify a canonical domain for SEO.

......

 

# choose the correct set for your site!

AddDefaultCharset UTF-8

 

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css|pdf)$">

ExpiresActive On

ExpiresDefault A2592000

</FilesMatch>

 

<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript

</ifmodule>

 

RewriteEngine on

 

# Block sites from using your stuff

# Options +FollowSymlinks

RewriteCond %{HTTP_REFERER} badsite\.com [NC,OR]

RewriteCond %{HTTP_REFERER} anotherbadsite\.com

RewriteRule .* - [F]

 

# force www in front to have a canonical domain

RewriteCond %{HTTP_HOST} ^([a-z.]+)?mysitename\.com$ [NC]

RewriteCond %{HTTP_HOST} !^www\. [NC]

RewriteRule .? <a href="http://www.%1mysitename.com%{REQUEST_URI}" rel="nofollow">http://www.%1mysitename.com%{REQUEST_URI}</a> [R=301,L]

 

......


Modifications to main.php

main.php is the file which generate all the contents of a page, doctype, header and body.

TITLE

Maximum 70 characters, starting with the subjects/words of the page.

DESCRIPTION

Maximum 155 characters, also starting with the subjects/words of the page.

KEYWORDS

Better to limit long trailing to 4 keywords ('decorative door curtain' instead of 'decorative, door, curtain') better to use the words that are in the title.

ICONS

Order is important for PC, iPod, iPad and most Android devices.

That's a simple solution, not the fastest and all the possibilities are not covered.

Use dozen of conditional css tests if you want to dive into this big mess.

Search on the net for tools, sizes and specifications.

Note

For the 3 favicons and google analytics, I did not yet verified if they can be moved without problems
to another server and/of directory.
Google ga.js is sometimes very slow to download, but the code is so complex.
I am not sure you can relocated, and even if it can be relocated, a cron must be used to updated it regularly on your server because Google updates it from time to time.

PHP FLUSH

Add this code just before the BODY tag.

<?php flush();>


It allows PHP to start building the page before all stuffs are downloaded.

GROUP CSS

ip_content.css and site.css has been compressed and saved in one single file.

Joining files is also a good solution to accelerate javascript, when possible...

DEFAULT.JS

It is only used when you are editing inside IPS CMS.

Can not be moved at the end.

GOOGLE ANALYTICS

The asynchrone code must be just before the HEAD closing tag.

JAVASCRIPT AT THE END

Move these 3 javascript links at the end: prototype, scriptaculous, lightbox.

TWO SERVERS - PARALLEL DOWNLOADS LIMITS

See GTmetrix.com, user settings, analysis.
Parallelism download, that is download from several server, provides a huge acceleration!
To enhance parallelism use another server to store and download various items, images, logo, some icons, style sheet, javascript...
Do not forget to correct the paths that are on the main and second server inside php, css, js.
Is still useful when using a CDN like CloudFlare.com? (See 2013-04-22 message)
Tests should be made but I would say yes, even if the improvements are less important.

SAMPLE PAGE

This page is for ImpressPages.org CMS, adapt it to your needs.

Respect the order of ALL the lines, for SEO, speed and compatibility either with browser
or some widgets in ImpressPages CMS.


<?php if (!defined('FRONTEND')) exit; ?>
<?php echo '<?xml version="1.0" encoding="'.CHARSET.'"?>'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/MarkUp/DTD/xhtml-1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"version="XHTML" xml:lang="<?php echo $site->getCurrentLanguage()->getCode()?>">
<head>
<title><?php echo htmlspecialchars($site->getTitle());?></title>
<meta name="description" content="<?php echo htmlspecialchars($site->getDescription());?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($site->getKeywords());?>" />
<link href="http://anothersite/4realsite/allthe.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
<script src="http://anothersite/4realsite/default.js" type="text/javascript"></script>
<script type="text/javascript">var _gaq=_gaq || [];_gaq.push(['_setAccount','UA-12345678-1']);_gaq.push(['_trackPageview']);
(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;
ga.src='http://anothersite/4realsite/ga.js';
var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})();</script>
</head>
<?php flush();?>
<body>
...
<script type="text/javascript" src="http://anothersite/4realsite/allthe.js"></script>
<script type="text/javascript">
// <![CDATA[
LightboxOptions.fileLoadingImage='http://anothersite/4realsite/loading.gif';
LightboxOptions.fileBottomNavCloseImage='http://anothersite/4realsite/closelabel.gif';
//]]>
</script>
</body>
</html>

 

FURTHER ACCELERATIONS

Try to
- defer parsing of javascript
- use efficient css selectors (Can it be done easily when using IPS?)
- move 3 favicons to another server
- use css/js code to replace loading.gif spinner

2012-03-19

Best practices to accelerate a website

developers.google.com/speed
developer.yahoo.com/yslow

alistapart.com/article/better-javascript-minification

Compress the CSS

Be careful some compressions might affect the rendering, so test your site afterwards.

I made tests of few online tools my with 2 css.
Each time I use the all the maximum compression options.

Number of characters for:
site.css --- ip_content.css
11050 --- 9308

iceyboard.no-ip.org/projects/css_compressor
3242 --- 6452

cleancss.com
3186 --- 6459

A quick test gave me one menu problem with site.css compressed by cleancss.com
I did not try to correct my site.css in order to solve this problem, probably a missing definition or an incomplete cascading structure.

phpied.com/cssmin-js

Compress JavaScript

Be careful if you compress Javascript manually.

For example, in JavaScript the ; at the end of a line is not required.
You can remove it but be careful not removing those inside instructions, e.g. for(i=1;10;i+1).

jscompress.com
6740 --- 3958

javascriptcompressor.com
6740 --- 3951
javascriptcompressor (and its other copies/versions by Dean Edwards) produces errors
Though you can use his Uncompress tool which seems ok.


thoughtco javascript

developers.google.com/closure/compiler/

compressorrater.thruhere.net

dean.edwards.name/packer

Compress PHP

Todo: add more item that can be removed

You can remove the spaces before ' ?>'
Remove all the spaces or tabs in front of the lines to indent them.
Remove all comments
Remove spaces in function parameters, e.g. myfunction('aa',null,'cc')
Put all lines in one single line.

There are also online compressors but PHP is executed on the server.
For small files, the compression is almost useless.

Compress HTML

textfixer.com/html/compress-html

digitalcoding.com/tools

If you can clean a text by using Regular expressions, the following ones are already doing an important cleaning.
Of course they can be enhanced or extended...

Find first expression and replace by second one:
\r   by   nothing
\t   by   nothing
+    by   nothing

Which can be reduced to
\r|\t|  +   by   nothing
Note that there are 2 spaces before the + sign!

Compress Images

kraken.io is my new discovery to compress images, the results are incredible!

Use reSmush.it™ to clean and compress images without loosing quality

You can use a program on your computer: Photoshop, GIMP, GraphicConverter...
Some are painting programs but also just to compress.

Painting programs directly on a web site.
photoshop.com/tools
4design.xyz/15-photoshop-like-en-ligne-testes-et-commentes (15 comparisons)

Save with compression and for some image formats also reduce the color table.

Remove EXIF, CMP, Comments, GPS... it is useless for websites.

A nice online tool is tools.dynamicdrive.com/imageoptimizer.

You can view several compressions and simply drag the one you like on your desktop.
Remove the added digit _2, _3 etc then upload them by FTP to override the previous one.

Add Width and Height to <IMG tags

Enhance the HTML <IMG... > tag by adding the WIDTH and HEIGHT parameters

With Width and Height defined, the browser can draw the 'invisible frame/skeleton' of the page before images are all loaded.
The page has immediately its final layout while the images are still loading inside their final area and position.
The page is displayed faster and the items inside do not 'jump' everywhere.

Apache Compression

See chapter '.htaccess' in the article above 'Accelerate your website'.

If you have a good host, e.g. with Cpanel, activate the option 'Optimize Website'.
It optimizes the performance by tweaking the way Apache handles requests.

Apache 2.0 and 2.2 allow you to compress content (txt,html,etc) before sending it to the vistor's browser.
The types of content to be compressed are specified by MIME type. This feature requires Apache's mod_deflate to function correctly.

Miscellaneous

yuiblog.com/blog/2008/02/11/helping-the-yui-compressor/
yuiblog.com/blog/2006/03/06/minification-v-obfuscation/

CSS Manuel Cleaning

Before compressing your CSS with a tool, it really worths to clean them by hand.

Lot of codes are duplicated, inheritated...

Move somes into *{} and other general classes.
Extract similar instructions existing in several different definitions, like this

* {
margin: 0;
padding: 0;
border: 0 none;
list-style: none;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: .98em;
}

.icons a img:hover,
.languages a:hover,
.breadcrumb a:hover
{
color: red;
text-decoration: none;
}

On four files, the gain was between 20% and 40%.
Of course the compressed results were extremely small.

To do such cleanings, use Code Inspectors most are included in the browsers, like Safari, MSIE,... others like Firefox requires to add an extension.

With this Inspector, you can see duplicates, inheritance, etc.

Audrius wrote: Just want to add that you should avoid using * selector.
It slows down the rendering process. The shorter selectors and very specific selectors work fastest.

Miscellaneous Tools

Keyword Density
zippy.co.uk/keyworddensity
Shows information such as a site PageRank, Cached pages, Keyword Density, Geolocation, Server Header Code, Summary, Words counts, Links etc...

zippy.co.uk
- Playground Bookmarklet - same but in a nice bookmarklet, slower than the site.
- GeoTargeting Tool
- Returns IP and Geographic informations.

tools.pingdom.com

- Full Page Test
Test the Load Time of a Web Page
Enter a URL to test the load time of that page, analyze it and find bottlenecks

- DNS Health
Test DNS servers and settings for a domain name
Enter a domain name to check if its DNS servers are configured correctly

- Ping and Traceroute
Test network connectivity to a server
Enter a host name or IP address to perform a Ping or a Traceroute
yoast.com
Full Website Review from Yoast in hand, you can improve your website's SEO, Speed, Usability and Conversion.


turbo.net spoon After compression it's better to verify if everything is still ok.

browsershots.org
Image Tools

smashinghub.com/12-best-batch-processing-tools
Another tool is to group images into a single one, called a sprite.

css-tricks.com/css-sprites

toptal.com css sprite-generator

Small Utilities

quixapp.com
SEO tool, url storage, shortcuts, etc... all in one bookmarklet.





Copyright © 2009-2024 - Tous droits réservés - Informations légales - Sitemap