paperplane.io blog

3 Simple Tips to Make Your Site Faster

Kyle Shipley November 13, 2013
Network tab

You may have noticed the changes we made to Paperplane last week that have significantly improved performance. There were a lot of sites that were taking 2-3 seconds to load that are now under 200 milliseconds. (10x improvement!) Even with these changes, you might notice that the HTML loads quickly, but images slowly paint in or CSS styles don’t take effect immediately.

We might be able to help with some of these, but there’s some simple things you can do to decrease your loading time and make your visitors happier.

1. Don’t resize images in CSS

You can probably get away with this in some cases, but resizing images in CSS is a major culprit of slow sites. If you’ve ever used a content management system (CMS) like WordPress or a service like Shopify, you may have noticed that they make multiple copies of your image for different sizes (small, medium, large, jumbo, thumbnail, and so on).

Let’s say you upload a 1MB image file at a 1920x1080 resolution. If you’re only going to show that at 480px (1/4 of the width), that file could probably be almost 4 times smaller and download 4 times faster. That means your visitors are waiting 4 times as long for that image to download!

Tip: Create exact-size versions of your images depending on where they’re going to go on your page.

2. Optimize your images

ImageOptim

If you’re a photographer, you probably know that images taken with a digital camera have lots of “metadata” (that’s data about data) in them. These bits of metadata tell you things like who took the picture, where it was taken, what camera settings were used, and so on. These are great if you’re uploading a photo to Flickr or Picasa, but not so great for most web sites. Does your visitor really care what photo settings were used to make your splash image, or do they just want to see your blog or your product?

Luckily, there are some simple tools you can use to shrink your image sizes even further before you upload them to Paperplane. On Mac, I use ImageOptim, which is a simple drag-and-drop compressor and metadata remover. It’s almost impossible to explain how simple it is, so just download it and try it out! (Warning: ImageOptim modifies your images in-place, so you might want to make a copy before you use it.)

I haven’t used an image optimizer on Windows, but there’s some recommendations here and here. Let us know if you have a favorite!

Tip: Use an image optimizer like ImageOptim to compress images and remove metadata before uploading your images.

3. Move JavaScript tags to the bottom of the page

JavaScript in the footer

Browsers have a limit on the number of assets (CSS, JavaScript, images, etc.) they can download from one host at a given time. Although I couldn’t find a canonical source, it looks like this number is 6 for most modern browsers. If you’re loading a lot of JavaScript files, especially big ones, they might prevent images or CSS styles from loading. Your visitors probably need a moment to read your page and understand what they’re looking at, so the interactive bits of your website can probably wait a few milliseconds.

One solution to this problem is minification. Basically, you can write some code or use a tool that will smash all your JavaScript together, shorten variable names to single letters, and sometimes even zip the output. This is great because your file is smaller and only requires one connection to download. On the flip side, it’s kind of hard. I might talk about minification tools in a future post, but there’s a simpler option for now.

The simpler approach is simply moving JavaScript tags to the footer of your page. Browsers kick off downloads in the order they see them. If your JavaScript is all the way at the bottom, that means your browser has already started downloading all of the CSS styles and images on your page. The page loads quickly, your visitors read your content, and they don’t even realize that if they had clicked on an element 10ms after your page loaded, it wouldn’t have had that cool JavaScript behavior you wrote.

Speed doesn’t have to be hard!

Optimizing performance can be really difficult. If you need Google levels of speed, it might take you 20 engineers and 2 years to shave 50ms off of a request. But when you’re first getting started with web development and design, there’s almost always a few small things you can do that will provide you with the best outcomes for the least effort. If you can spend 20% of the time to get 80% of the benefit, take that trade every time!

If you enjoyed these tips, want to know more about speeding up your site, or are having any trouble with Paperplane, let us know at support@paperplane.io or on Twitter.

(Anti-)Social Auth

Kyle Shipley September 27, 2013

One question we get from time to time, especially from our developer friends, is why we’ve decided to use social authentication instead of an email based solution for Paperplane. There are plenty of arguments for and against social auth, but I wanted to lay out our thoughts so you know why we made our decisions the way we did (so far).

Too many passwords

If you’re a good citizen of the internet, you probably use a different password at every site. You might even use a password manager like 1Password, Dashlane, or LastPass. This is a great start, but it means that there’s no centralized place for you to track all of the services you’ve authorized. You could go into your password manager, figure out which services you no longer want to use, then visit each site and turn them off. This is time consuming compared to the options provided by Facebook, Twitter, and GitHub.

If you don’t use a password manager, things are even bleaker. We don’t see Paperplane as an “everyday” service. Rather, you log into Paperplane every week or two to create new sites or change metadata like your site’s URL, then interact with us primarily via Dropbox. How many times do you forget or mistype your password for everyday sites, let alone once-in-a-while sites? We just wanted to sidestep the password reset problem and use credentials you definitely remember.

You might have noticed that most sites are moving away from password-based authentication altogether. Google is exploring all sorts of crazy alternative authentication schemes. The new iPhone 5S has a high-resolution fingerprint scanner. Android’s Ice Cream Sandwich added facial authentication. Although we’re not quite ready to dump the password completely, we’re getting close. Just like many web developers have taken a strong stance on supporting older web browsers, we’re taking a strong stance on supporting old password methodologies.

Privacy controls

Although we ask for access to your social account, we don’t use your information toward any devious ends. We’re Paperplane users ourselves, and we don’t want spammy wall posts or tweets any more than you do. The only information that we ask for is email address, and we take that permission very seriously. Facebook’s minimum permissions seem to grant us access to your profile information, but we don’t store any of that.

This emphasis on privacy can be limiting. For example, Dropbox only has two permission levels: full Dropbox access and individual App folder access. For some silly reason, you can’t share App folders with other users. We had to weigh the tradeoff between not being able to share Paperplane folders and requesting overly broad permissions. In the end, we decided to hope that Dropbox does the right thing and adds sharing features rather than demanding your complete trust before you create your first site.

Another reasonable question is why we chose to include Facebook, Twitter, and GitHub auth instead of having you auth with Dropbox directly. We’re revisiting this, but the short version is that Dropbox requires you to grant us access to your folder every time you log in to Paperplane. This seemed inconvenient, so we started with the best social authentication services.

Questions? Concerns?

If we ever do something you don’t approve of, let us know! Our goal is not to maximize short-term revenue and cash out. Paperplane is a service that we find immensely useful compared to S3, GitHub pages, MediaTemple, and GoDaddy’s shared hosting, among others. We want to be the easiest way for you to host landing pages, show off quick experiments, or host a blog with Jekyll. (So meta!) If we’re not accomplishing those goals, we’d love to know why.

If you really hate these opinions or think we could do better, let us know at support@paperplane.io or on Twitter. We’re “strong opinions weakly held” people, so we’d love to know if we’re making a huge mistake.

Using wget to make any site into a static site

Tony Dewan September 18, 2013

I want to make something clear: Paperplane.io doesn't support any kind of server-side scripting language like PHP. But that's on purpose! We believe that many sites don't need that level of sophistication, especially if you speak HTML and CSS.

Lots of sites are built on tools like WordPress, though, and it can be a daunting task to convert a site from WordPress to static HTML and CSS. We certainly wouldn't want to tackle it. Luckily, there's an easy way to backup any public website with a quick command, called wget. Here's how.

The only caveat: you'll need to use the command line. If you're scared of that, don't be! We'll make it easy. (Also, these commands are for Mac OSX. If you're on Windows, some things will be different. Let us know if you need help!)

First step, start the Terminal:

If this is new: the Terminal is the command-line interface to your Mac. More info here.

You should see something that looks like this:

Type or copy the following command into the terminal, making sure to replace YOURURL.com with the website you want to backup.

wget -p -P ~/Desktop/websitebackup --convert-links -m -nH http://YOURURL.com/

It will look something like this:

This will backup the site to a folder on your desktop called websitebackup.

Let me a explain a little bit about what's going on here. We're using a standard tool called wget. You can see that at the beginning of the line. We're then passing several flags (or options) to make sure it does exactly what we want it to do. Here's a few of the options we've set and what they mean:

-p
Tells wget to get all the necessary files to display the page (images, CSS, etc)
-P ~/Desktop/websitebackup
Sets the path on your local machine for the output (the new static version of your site)
--convert-links
After the download is complete, convert the links in the document to make them suitable for local viewing
-m
Turn on options suitable for mirroring. This option turns on recursion and time-stamping, sets infinite recursion depth and keeps ftp directory listings.
http://YOURURL.com/
The final parameter tells wget which url to get.

You can read all about the different options for wget at Wikipedia or gnu.org.

Now, if you want o backup to directly to your paperplane account, it's as simple as changing the path (-P) option. If, for example, your site has this url blogbackup.paperplane.io, just use this command:

wget -p -P ~/Dropbox/Apps/paperplane.io/blogbackup.paperplane.io \
  --convert-links -m -nH http://YOURURL.com/

This works well for converting sites for archival purposes, but what if you want to make sonething more editable? Jekyll is a fantastic tool for static blogging (we use it for this blog!) We'll write an in depth post about it soon!

DNSimple DNS for Paperplane Custom Domains

Tony Dewan April 19, 2013

Kyle wrote an in depth tutorial about setting up custom domains in your paperplane account. It explains the complete process, so that’s a great place to start if you’re confused. However, he focused on iwantmyname (which is great), and I’m an avid DNSimple user. I want to quickly describe how a DNSimple setup is different.

I’m going to assume a few things: you’ve got a paperplane.io subscription, a site added to your paperplane dashboard, and domain in your DNSimple account. If that’s the case, you’ll just need to add a few DNS records. Here’s what it looks like for me, on rebuildconf.com.

There are 2 important things to note.

  • First, I'm using DNSimple's URL record type to redirect rebuildconf.com to www.rebuildconf.com. This replaces WWWizer in Kyle's writeup. It's a one-stop shop!
  • Second, I have several subdomains (www, 2011, 2012) CNAME'd to proxy.paperplane.io. That means I have 3 different sites in my paperplane.io dashboard, and 3 different folders in my Dropbox.

It's as simple as that. Still have questions about custom domains or DNS? Let us know!

Setting Up A Custom Domain On Paperplane

Kyle Shipley April 16, 2013

We recently launched paperplane.io, a service that makes hosting web sites super easy. We’ve been using it a lot for quick experiments like manasword.paperplane.io, wherein I attempted to convince a friend to replay SNES Action-RPG classic Secret of Mana and played with CSS3 border-images. It’s also our go-to tool for landing pages, including the re:build conference and Equity Steaks.

You’ll notice that those last two pages are on custom domains. Luckily, paperplane has a fairly painless process for connecting that great new domain you purchased to a Dropbox folder. It’s a few more steps than using a paperplane.io subdomain, but with the right hosting partner, it can be pretty painless. If you haven’t signed up for paperplane.io yet, now would be a good time to familiarize yourself. We’ll wait for you.

Back? Great. Let’s get started.

Here’s a fresh paperplane dashboard.

Think about all those great ideas you have that could be out in the world. Maybe they’re even locked up in a Dropbox folder somewhere, but you haven’t found the right way to share them. Well, there’s no time like the present!

If you click the + in the top-right corner, you should see this little guy (after a totally rad animation!):

Aw man, custom domains are grayed out? What’s up with that?

Instead of making you track the number of sites you have or the amount of bandwidth you’re using (what’s a gigabit anyway?), we decided that custom domains probably represent a step up from side project to real deal. If you have a custom domain, you’ll probably be driving traffic to it and trying to nab potential customers, so that’s probably the right time to spend some money on your idea.

Once you’ve decided that $9 is a wonderful deal for such a great service, go ahead and click “Get a premium account!” and fill out the credit card form. We’re using Stripe for payment processing, which we highly recommend. That also means that we don’t store your credit card info – they do. And they’re super-duper-ultra secure. (Sites like reddit, Forrst, and AppSumo use them too.)

Assuming you typed all the numbers correctly and the internets worked as expected, you should now be able to create a custom domain. I’ll walk you through the process we used to create Equity Steaks.

First, let’s go ahead and fill out the new site form:

Now it says there should be a new folder in Dropbox at Dropbox > Apps > paperplane.io > www.equitysteaks.com. And sure enough:

There it is.

There’s also some gobbledygook at the bottom about CNAME DNS WTFBBQ. If you’re not familiar with domain hosting, it can be kind of a bear. If you’ve ever used GoDaddy, you might think it’s the hardest process in the world. Luckily, there’s some new domain registrars that make the process much simpler. I use iwantmyname to do all of my hosting, so I’ll show you how to setup your domain there. (DNSimple is another good one if you want to compare.)

First, search for your preferred domain name using their simple search tool:

(In my case, equitysteaks.com is taken because I already own it.)

Once you’ve found a domain name that you like that’s available, go ahead and add it to your cart and check out. After completing the purchase, go to your dashboard:

Select “Manage DNS Records” from the Manual DNS section.

You should see a list of the domains you own. Here’s what mine looks like:

We’re going to be changing equitysteaks.com, so I’ll click on “Edit DNS Records” on that row.

We only need two records to get our site up and running: an A-record and a CNAME.

First, add a record with hostname www, type CNAME, and value proxy.paperplane.io. Go ahead and leave the TTL blank – it defaults to 3600 seconds, which is 1 hour. That means that domain changes might take up to one hour to take effect, depending on your internet provider.

Now, if someone visits www.equitysteaks.com, paperplane will automatically serve your site out of Dropbox. Pretty neat, huh?

What happens if someone visits equitysteaks.com, without the www?

WHOOPS! That’s no good. We need to add something called an A-record. If I want my site to show up in the browser bar as equitysteaks.com (without the www), I’ll need to jump through some hurdles and find IP addresses and generally do messy things. That sounds hard, and this is supposed to be easy, right?

Instead, let’s use a service called WWWizer to do a “naked domain redirect.” The tl;dr version for iwantmyname: Add a new DNS record. Leave the hostname blank, set the type to A, and set the value to 174.129.25.170. This IP address is run by WWWizer, and all it does is redirect from equitysteaks.com to www.equitysteaks.com. (Some other registrars, like DNSimple, have something called a 301 Redirect that can be used to accomplish the same thing.)

Once you’re done, the two records should look like this:

Now we play the waiting game. If your ISP is Super Great™, you should be able to go to visit your custom domain within a few seconds and see the right content. It might take up to an hour, though. If it takes more than an hour, send us an email and we’ll help you debug.

Phew! We made it. Your new project/product/portfolio/other-cool-idea-you-should-tell-us-about is live on the internet with a custom domain. Once you get the hang of your domain registrar, you should be able to take any HTML + CSS + JavaScript site you have on your computer and ship it within minutes.

When you’re launching a new product, anything that gets in your way can sap momentum, which can kill new ideas. Tools like paperplane take the pain out of shipping new things and make hosting fun again.