Why cookies slow you down
Cookies are uploaded with every request on a domain, although they are only read on dynamic web pages (for instance by PHP). And most visitors have asymmetric connections (like DSL) with at least a 1:10 up:down ratio. Also, uploads are often not compressed while downloads are. This is why, in terms of latency, reducing 500 bytes on upload is equivalent to reducing tens of kilobytes of download size. As Google states:
The best way to cut down on client request time is to reduce the number of bytes uploaded as request header data. So, minimize request size and serve static content from a cookieless domain. – developers.google.com
Well, if Google says so..
Limit the cookie reach
The following code will set a cookie that is named ‘cookie‘. This cookie is only valid on ‘www.somewebsite.com‘. The last argument states the domain for which the cookie is valid. You can omit ‘www’, it will then be valid for all subdomains.
setcookie('cookie', $data, 0, '/', 'www.somewebsite.com');
Create the cookie-less domain
You can easily create a cookie-less domain. First, you need to have access to the DNS editor of your domain. There you create a new “CNAME” record with the name “static” that points to your “www” domain. After doing this you can access your static files from your new domain.
Adjust the HTML to use the cookie-less domain
You do not have to move the files anywhere. All you have to do is change:
<script src="/js/jquery.min.js"></script> <!-- replace with: -->
And no, “http” is not missing. For CSS files all you have to do is to change the “href” property of the “link” tag:
<link rel="stylesheet" href="/css/bootstrap.min.css"> <!-- replace with: -->
<link rel="stylesheet" href="//static.somewebsite.com/css/bootstrap.min.css">
Image files follow the same scheme, just change the “src” property of the “img” tag:
<img src="/img/logo.png"> <!-- replace with: -->
Download links can also be adjusted:
<a href="/files/package.zip">download</a> <!-- replace with: -->
Speed it up even further… with CDN
Once you have a cookieless domain, the next step is to get a CDN account. You can sign up on Leaseweb CDN and adjust the CNAME not to point to your own ‘www’ domain, but to the domain provided by the Leaseweb CDN. In the control panel you enter the origin URL ‘http://www.somewebsite.com
‘. Now your content is cached and accelerated by the Leaseweb CDN.
Why Leaseweb CDN makes it even faster
We have 100Gbit uplinks in Amsterdam, Frankfurt, Washington DC, Silicon Valley and Singapore. On these locations, we have racks full of powerful servers packed with lots of RAM and high capacity high speed Solid State Drives (SSD). The CNAME you point to our CDN domain will automatically be routed to the nearest CDN cluster and the content is flowing over the route-optimized network.
ArnoldJune 5, 2014 at 15:45
Whithout the benefits of Leaseweb CDN.
Is an extra DNS resolv faster than just downloading the cookie?
as per example 500bytes of cookie vs. DNS size and time to resolv.
ArnoldJune 6, 2014 at 10:14
when loading the page (viewing extra->developer->webconsole)
it frequently says 302 not changed.
if you don’t want that as a devoloper (for temporarly testing) use
Roohollah Afshar SafaviJune 9, 2014 at 7:01
Why you didn’t count a new subdomain resolve time?
When you change static content to a new domain/sub-domain , you will face with new over head : resolving that domain/sub-domain !
I think this article conclusion isn’t true for everywhere , but it could help for some website with high amount of static data on each page.
(It’s my opinion )
Maurits van der Schee • Post Author •June 10, 2014 at 16:41
Hi Arnold and Roohollah,
Thank you for your responses. The DNS reponse is cached by default and will thus be done only once per day, while the cookies are sent on every request. Also, the DNS subdomain entry can be glued to the initial DNS response, so there does not have to be overhead. Also, the 302 response does not change that the cookies are being sent.
Kind regards, Maurits
ArnoldJune 10, 2014 at 21:50
thanks for clarifying.
can you edit the artikel and show wich valus the DNS should have to create the static domain?
how can i add an CNAME DNS entry. in Leasewebs SSC.
static.somewebsite.com CNAME http://www.somewebsite.com
do i need to set priority with CNAME.
just wondering. can’t know it all.
ArnoldJune 10, 2014 at 23:20
i’ve tested it just now, and i come to a conclusion it’s slower.
when loading as //static.somewebsite.com/ it takes approximate 38ms.
when using a relative path it takes 15ms (15Kb filesize).
also and this could be importand. firefox has some issues with accepting a (wrong) certificate when using SSL.
you need to open the static file first manual to accept the certificate, and only then the page loads correct.
Maurits van der Schee • Post Author •June 12, 2014 at 11:21
Yes the CNAME is correct, but leave out the “http://”, like this, priority is not needed:
static.somewebsite.com CNAME www.somewebsite.com
NB: Officially there should be dots at the end of the hostname, but those are not needed in the SSC.
About your conclusion. Are you sure you are measuring correctly? Although it should be faster in almost all cases, maybe you are doing something different and Google is wrong about the speed optimization in your specific case. If you post the URL in a comment, I will take a look at it.
ArnoldJune 12, 2014 at 15:36
thanks for the reply.
sorry about the “http://” it was automatic replaced/added by this text field.
the page i’ve been testing on is non public. so providing you with a working example is difficult.
i can provide you with info:
the page in question : https://norfolk.ledenmanager.nu/index.php
using a certificate from *.administratiemanager.nu (official certificate)
i’ve set the dns like: static.ledenmanager.nu CNAME http://www.ledenmanager.nu (without the http://)
and use a stylesheet like:
where /images is an Apache alias directory.
like i said before.
i need to open https://static.ledenmanager.nu/images/main_stylesheet.css first in a firefox tab before the entire page works. because the certificate is not valid for this domain (testing purposes.)
the main_stylesheet.css is an 15Kb file. when viewing the page load using firefox’s webconsole it shows the time approximate 38ms.
when replacing it with href=”/images/main_stylesheet.css” it loads in 15ms.
Apache vs. Nginx: Pros & Cons for WordPress | MotionBump ReaderMay 10, 2017 at 13:38
[…] best always to do this on a cookie-less domain so that the content will be truly cached by the browser (as cookie as not cachable), so using a […]