Your free Content Delivery Network

Started by flapjack, July 02, 2010, 04:15:55 PM

Previous topic - Next topic

flapjack

One of the advanced steps when trying to optimize your forum is to use several servers to serve your files. Paralles downloads can help especially with large websites/forums. Regular users however don't have the luxury of having multiple servers. However I am going to show you how you can easily speed up your forum's. This will not have a big impact on small forums however may help you understand processes associated with speeding up pageload.

This tutorial is a compilation of other works that can be found over the Internet, see below for references.
First of all: THINK, it's not 100% foolproof so read it couple times so you know what you are actually doing, if you have problems I will help you, but I am not going to take everyone by hand and do it for them. This is not for beginners.

So, let's start:

-------

First, here's an introduction to using a CDN (Content Delivery Network) taken from Yahoo, that will show you what we want to achieve:
The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective. But where should you start?

As a first step to implementing geographically dispersed content, don't attempt to redesign your web application to work in a distributed architecture. Depending on the application, changing the architecture could include daunting tasks such as synchronizing session state and replicating database transactions across server locations. Attempts to reduce the distance between users and your content could be delayed by, or never pass, this application architecture step.

Remember that 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. This is the Performance Golden Rule. Rather than starting with the difficult task of redesigning your application architecture, it's better to first disperse your static content. This not only achieves a bigger reduction in response times, but it's easier thanks to content delivery networks.


We are not going to use CDN as it cost money. Instead of this, we are going to user free service - Dropbox. The advantages of using Drop Box to host your Javascript and CSS files:

    * Low Bandwidth Usage
    * Reliability  and as DropBox is fast in serving files, your websites actually serve faster
    * As you are externally sourcing the JS and CSS files, you can use the same files over different domains enabling you to load the pages even quicker :)
    * There is no Bandwidth limitation at all in Drop Box and hence you need not worry about eating up your bandwidth.

So, how do you host your Javascript and CSS on Drop Box? Follow this step-by-step process:

   1. First sign-up for a new account on Drop Box (That's my referral link and both you and I get 250MB extra if you sign up using that link).
   2. Download and install the client. It will allow you to see your files under Windows/OSX/Linux.
   3. Now log into you account, and go to Public folder.
   4. Make two new folders by names CSS and JS over there.
   5. Now upload your Javascript files to JS folder and CSS files to CSS folder.
   6. When you want to use a JS or CSS files as source, just navigate to the respective file and click to get a drop down menu. Select "Copy Public Link" and that will be the link you need to reference in your webpages.
   7. (this is for default template, 1.1.11) Open your index.template.php and find:

<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?fin11"></script>   

and replace it with:

<script language="JavaScript" type="text/javascript" src="here_is_the_link_to_the_file_on_dropbox/script.js?fin11"></script>   


You can do the same with following lines:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';


   8. (this is for default template, 2.0RC3) Open your index.template.php and find:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?rc3" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/print.css?rc3" media="print" />';

and replace it with:

<link rel="stylesheet" type="text/css" href="here_is_the_link_to_the_file_on_dropbox/css/index.css?rc3" />
<link rel="stylesheet" type="text/css" href="here_is_the_link_to_the_file_on_dropbox/css/print.css?rc3" media="print" />';


   9. That's it! You should have a basic understanding of the process and there's nothing stopping you from using it for all your template files in future.

You don't have to limit yourself only to js/css, with a small bit of imagination and some extra code you could store for example your avatars on the Dropbox. And, who knows, maybe even the files for the SMF's gallery.

WARNING:
   Always keep a backup copy of your files. In the example I am using default theme, in case something goes bad you may end up without js/css so the forum may look a little bit strange. I encourage you to play with a copy of theme that can be created from the Admin Control Panel.

----

If you like this tutorial I will appreciate if you use my referal to create your own Dropbox account. This way both you and I will get extra 250MB associated with the account:
https://www.dropbox.com/referrals/NTk5MzA5NDk

----
References:
http://developer.yahoo.com/performance/rules.html
http://wiki.dropbox.com/TipsAndTricks/HostWebsites
http://www.tuaw.com/2009/11/20/looking-for-free-iweb-hosting-heres-how-to-use-dropbox-as-your/
http://eurekatips.com/2010/01/03/save-bandwidth-by-using-dropbox-to-host-css-and-javascript/873/


----

Dropbox itself is a great tool for syncing your files between different computers (there are PC/Mac/Linux version available), actually it's its REAL purpose, I really encourage you to look at it and start using. Possibilities are endless :)

rd

This will be pretty useful for people who want a bit more speed.

Afro

Sounds nice. I have read about this somewhere in google.

I followed the instructions. What kind of url should be added to the code from index.template.php

[i am asuming , we should add the dropbox file url there]

flapjack

right click on the file and select Dropbox/Copy public link
remembert to put files in Public folder first

Afro

#4
Ok. the two files to copy should be the index.css and print.css

Am i right ?

Also, where does the JS com in play here ? The code you gave from indextemplate covers only css.


Afro

#6
Quote from: flapjack on August 13, 2010, 06:00:47 PM
in 2.0 Themes/(themename)/scripts/


Thanks. I know its the scripts. I mean, As i edited the index.template.php of my team to add the urls i copied from CSS files from Folder in dropbox ?
Where should i add the urls i copied from JS folder ?

I am also currently without JS, though i have the bacck up folder in place but the JS on the forum is not working.

lastnico

Nice idea, but I would say that's a perfect tip to crash your website as soon as Dropbox understands you use their services as a CDN... and disables your account.

Afro

Quote from: lastnico on August 16, 2010, 09:55:48 AM
Nice idea, but I would say that's a perfect tip to crash your website as soon as Dropbox understands you use their services as a CDN... and disables your account.

Are you saying using it as CDN is against their TOS ?

lastnico

Quote from: Afro on August 16, 2010, 10:10:57 AM
Quote from: lastnico on August 16, 2010, 09:55:48 AM
Nice idea, but I would say that's a perfect tip to crash your website as soon as Dropbox understands you use their services as a CDN... and disables your account.

Are you saying using it as CDN is against their TOS ?

Well, nothing in their TOS clearly prevents you from using Dropbox as a CDN, but this is clearly a non-standard usage of their tool, so it could be forbidden as soon as they think this has nothing related with data backup.

Afro


flapjack

do I really have to? this is merely a proof of concept, free way to work things out instead of paying for a "real" CDN
and - and in this I can see the best use - an excellent tool for colaboration/using more than one machine to work

have a look at the links provided - this method is there for long time and still works

flapjack

here's a more recent info about similar service from google:
http://www.wired.com/epicenter/2010/01/google-docs-storag/?utm_source=feedburner

and it seems it's not free, however *VERY* cheap:
QuoteWhile text documents and spreadsheets don't count toward the total, the offering is actually quite underwhelming in terms of capacity: 1 GB, with extra storage available for $0.25 per GB/year. By contrast, Gmail now offers more than 7 GB of storage for e-mails and attachments, while Google's Picasa lets you store 10 GB of photos.

But perhaps this is just a beginning of the famed Google Drive, a full-on hard drive in the sky. It's one more step to make the free Google Docs into a compelling alternative to Microsoft Word — another attempt to break the hold Microsoft has on the desktop to transition users to using the internet even more (because that's where Google makes its money).

青山 素子

There is also Rackspace's Cloud Files, which is also quite cheap. It rides on Limelight Network's CDN, which makes it an especially good value for the price.

Hmm. Maybe SimpleMachines should see if they can get a courtesy account? It would certainly help with distributing the downloads here.
Motoko-chan
Director, Simple Machines

Note: Unless otherwise stated, my posts are not representative of any official position or opinion of Simple Machines.


lastnico

Thanks for the info, I keep these links in store for a future usage

Geremia16

Does SMF not have an option to disable fetching scripts with a remote CDN?

vbgamer45

Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

Advertisement: