Ever stop to think that maybe your site isn’t signing up users like you hoped because it’s not loading fast enough?
47% of your visitors expect your site to load within two seconds, and 40% of them will leave if it takes more than three seconds. Each second of delay decreases customer satisfaction by around 16%, and reduces your sales by 7%.
To put it bluntly, performance can make or break a website.
There are two foolproof ways to increase the speed of your site, and thereby improve customer satisfaction, retention, and conversion:
- Decrease the size of your site – a larger site takes longer to download
- Use faster hosting – a faster, more responsive server decreases the total time between a visitor pressing enter (or clicking a link) and the page loading
The focus of this article is learning how to decrease your site’s total file size plus learning how to increase its scrolling performance. There are many potential techniques we could cover when it comes to web performance, but we're going to focus on the ones with the largest impact for designers. Luckily, these improvements can all be made in under 30 minutes.
Regardless of your existing technical expertise, reading this simple guide will help you increase your site’s loading speed and visitor retention by a meaningful amount. Let’s get started.
Reducing the size of your site
The single most important technique to speeding up a web page is to make it smaller. I’m not talking about having less content, but rather about reducing the number of kilobytes that your site’s content consumes.
To view a web page, your computer has to download all of the related files from the server to display them in the browser. The more kilobytes a user needs to download, the longer it takes to load the site.
How do you reduce the size of your site’s files? By optimizing images, minimizing text files, and by using smaller images when your site is viewed on smaller screen sizes. It’s time to put your site on a cleansing diet.
Images are the vast majority of your site’s file size consumption, and optimizing images to reduce their size can make your site load several times faster. This is where you should focus the majority of your performance optimization efforts.
I know you want to keep your photos at maximum quality and at 5000px wide, because that’s how you see the individual pores on Obama’s face—but that file is over 10MB and is causing your site to slow to a crawl. Even for a full-page background image, you could get the image down to one or two percent of that type of file size, and it would still look great. For example, the banner image for this post (at the top) is only 15Kb.
Tip: The banner image consumes so few kilobytes because it’s visually simplistic. Visual complexity increases image file size. Therefore, consider using illustrations and graphics rather than detailed photographs. To learn how to find and manage beautiful design resources, check out our previous article.
So how can I reduce the size of my images?
Step one is to open your images in Photoshop then hit File > Save for Web. This opens a special panel with everything needed to optimize your images for reduced file sizes. (See an example photo in the JPEG section below.)
Start by matching up the image’s resolution to the size that it will display on the site. If you display the image at only 600px wide, then why keep it at 1600px? Chop it down and reap the size benefits — an image with half the width will be even less than half the size. You can double the size (from 600px to 1200px) to make your images look sharp on high-definition displays (Retina, 4K, etc.), but there’s no need to go any higher. Repeat after me: The larger the resolution, the larger the file size!
Aside from reducing the image’s resolution, how else can we reduce its file size? The primary way is to change the image to the best file format for the job then reduce the image’s quality without significantly sacrificing image clarity. It’s fairly easy to do with just a few mouse clicks.
JPEG, GIF, PNG, and SVG are the four main image file formats used on the web, and each have their specific use cases. Let’s go through them and learn how to optimize them.
JPEG is the main file type that digital cameras use. It’s a “lossy” image format, which means that simplifications are made to the image data in order to drastically reduce the image’s file size. In the process, image quality decreases (although by how much is up to your settings). To balance between size and clarity, you have the ability to set the image’s quality on a scale from 1-100.
Due to their cleverly implemented lossiness, JPEGs have significant file size advantages over the other formats, which is why you should use JPEGs for 90% of your site’s images. PNGs and GIFs are smaller only when you severely limit color count (more on this shortly).
Remember, however, that you still want beautiful, acceptable resolution images—so don’t go too wild with your quality slashing. I generally find that a JPEG quality percentage between 30 and 60 nicely balances image clarity and file size. Play around and see what works best for your own images.
Pro tip: You can get sharper images at lower file sizes by using a larger resolution with an even lower JPEG image quality. For example:
The image on top is 500px wide with a quality of 60% and is 53KB. The image below that is 1000px wide with a quality of 30% and is also 53KB, and it's notably sharper when displayed at 1000px!
JPEGs, unfortunately, do not allow for transparency. What does this mean? Say, for example, you want an image’s background to be transparent so that the color of the area behind it shines through. This wouldn’t be possible with a JPEG. Instead, the blank space behind the logo would default to white. To have a transparent background, you must use a PNG or a GIF. This is why company logos are often saved in the PNG and GIF file formats.
Below are two images against a grey background:
The top image is a PNG with a transparent background, so the grey background visible around the logo. The image on the right is a JPEG without transparency. Notice that its background defaults to white.
GIF is also a lossless format (no image information is lost in its creation). GIFs allow for transparency, but their greatest advantage is that they allow animations (of short durations). GIFs are most commonly used as “mini-videos” for comedic or illustrative purposes:
I feel kind of weird using the term “mini-videos," but I don't know how else to best describe it.
GIFs often look grainy and oddly colored because designers generally limit the number of total GIF colors to between 2 and 256. Reducing the color count can lead to huge file size savings. So, when creating GIFs, if the clarity of the image doesn’t matter too much, decrease the color count as much as possible to reduce its file size!
PNG is a lossless format, and it boasts the highest image quality of all the web image formats (it’s the best to use if Obama’s pores are that important to you). As mentioned earlier, PNGs support transparencies — and that is the primary reason to use them on your site.
PNGs come in two sub-formats: PNG-24 and PNG-8. PNG-24 is the highest quality version, while PNG-8s allow for smaller sizes by reducing the image’s color count, just as with GIFs. Therefore, if an image only has a few colors to begin with (e.g. a simple company logo as opposed to a detailed photo of a flower), use PNG-8.
Instead of spending the time tweaking the color count by eye, you can use simple drag-and-drop tools likeTinyPNG. TinyPNG automatically converts your PNG into a PNG-8 and removes any colors the image doesn’t actually use. This process can reduce the size of your PNGs by up to 80% without sacrificing transparency or image quality. Your visitors will still see the same beautiful images, but they’ll download much faster.
SVG is in a completely different category from the other three formats, as they are actually vector graphics—the file type designers often work with in Adobe Illustrator or Sketch. How does that make them different than the others? Well, you can expand an SVG to several times its original size, and it will be just as sharp as it originally was. They’re also incredibly small in file size, render perfectly on high-resolution (e.g. Retina or 4K) displays, and you can even customize them using CSS! Learn more about how to use them here.
How is all this possible? Unlike other images that are made up of specifically-defined pixels, vector graphics (SVGs) are made up of a set of shapes created in XML (an HTML-like markup language). Scaling a typical image reveals the underlying pixels in their full ugly glory, but scaling an SVG preserves the base shapes perfectly.
Examples of what you can make with SVGs
Note: You can check out Creative Market to peruse high-quality vector graphics.
To create an SVG, you need to use a vector graphics design program like Adobe Illustrator or Sketch. To reduce the file size of an SVG image above and beyond what Illustrator can do by itself, use a clever tool like SVG-Optimizer.
Using different image sizes for different devices
Do you think that a 3” phone needs to have an image as large as a 32” monitor to look sharp? Nope! Definitely not. You could probably significantly decrease the resolution of the image being served to the phone yet still have it look razor sharp, and the file size savings will be massive.
Mobile devices often rely on relatively slow 3G/4G connections, so your file size saving efforts become even more crucial for the roughly 50% of people visiting your site on mobile devices. And don’t forget, these visitors are probably also working with limited data plans—don’t eat through their 500Mb limit with a 10Mb photo of a dog wearing a suit!
Using CSS media queries, you can actually deliver a different background image for the various device screen sizes that your site is accessed with. This means that you must save your images in a few different sizes. This process only takes a few extra seconds per photo.
With Webflow in particular, it’s very simple to preview a different device view in real time then change the background image to a smaller version (to one that’s lower resolution and hence lower file size). Image changes intelligently propagate down to smaller devices in Webflow, so a background image that’s been set for a tablet-sized device will also automatically be set for phones as well.
Here are the key points for optimizing images on your site:
- If you want transparency in an image, use a PNG
- For images with animations, use a GIF
- For simple icons, logos, and illustrations, use SVGs
- If the image has very few colors, use a PNG-8 or a GIF with a reduced color count
- When appropriate, choose simple illustrations over highly detailed photographs
- For colorful images, use a JPEG at a lower image quality (30-60)
- Resize the image closer to the size it will be displayed on your site. Don’t use a 5000px image if it will render at 50px
- Display smaller background images on smaller devices. This is part of the concept of responsive design.
Third-party services: Instead of doing image optimization work yourself, you can use image-resizing services built on top of CDNs, such as imgix. A service like imgix does on-the-fly image resizing and compression then serves the optimized images over a CDN. It also works great when dropping photos into Photoshop isn't an option, such as when you have a library of user-uploaded content.
Images aren’t the only type of design asset that can be put on a diet—you can also significantly reduce the size of your site’s text files through minifying.
Minifying is the process of reducing the number of characters in a file (this applies to CSS and JS files only). Internally, minifying engines work by removing whitespace (spaces and line breaks), and by replacing longer words with shorter words. It does this in a way that doesn’t change the final behavior of your code. It’s pretty neat. Minifiers often lead to over 60% file size reductions.
Beyond making a site smaller, there are two other ways to increase a site’s load speed:
- Visit the site with a faster Internet connection
- Host the site with a faster hosting provider
Since you’re not about to go upgrade all of your site visitors’ Internet connections, you’re left with finding a faster hosting provider.
To save you from a technical discourse, here's the summary: You want fast servers that are strategically distributed across the areas where your visitors live. Why? Because the closer the server is to your visitors, the faster your site will load. Therefore, if your customers are worldwide, so should your servers be.
One of the best hosting providers for these purposes is Amazon AWS, which offers high performance servers distributed across 11 regions around the world. (Webflow’s own one-click hosting is built on top of Amazon AWS’s CDN servers. Check out this performance test for Overton Graphics, a site designed and hosted with Webflow by designer, Josh Overton; it scores 96/100.) A fantastic competitor of AWS is DigitalOcean (although they have fewer regions). Both Amazon and DigitalOcean are much faster and better distributed than smaller boutique web hosts, but much more technical expertise is required to setup websites on them.
Bonus: On-site optimizations
There’s one final piece of the performance puzzle that has less to do with page download speed, and more to do with on-site page performance—and it's just as important. It doesn't matter if your site loads instantly if it jitters and chugs whenever someone tries to use it. In fact, that’s even worse. Load speed is only annoying at first, but a laggy page is annoying throughout the entire browsing experience.
How can you keep your page snappy even after it’s been loaded? It’s all about limiting the amount of processing work the computer needs to do. Primarily, this means limiting animations and UI flourishes:
Don’t go heavy on animations. Animations require a lot of processing and graphics power, and can cause serious lag.
Avoid animating images as much as possible. You can sprinkle them in there, but don't go overboard. Animations require a lot of power, and animating images requires exponentially more power! Browsers have a hard time doing this type of work in bulk — especially on mobile devices.
Be careful about adding too many background gradients, box shadows, and text shadows. These are forms of “pseudo-images” that are equally as intensive for the browser to animate.
And, let's not forget: One of the biggest on-site performance culprits is triggering animations during page scrolling, such as moving page elements around or fading them in and out. Not only does the browser have to process the visual changes associated with scrolling a dynamic page, but it also has to process all your animations at the same time. That's a lot of work. Be mindful of what you're asking the browser to move around.
Don't get me wrong — I’m not saying to not use animations, but to be wary about incorporating too many of them.
Now go forth, and may speed be with you
I’ve now equipped you with the best methods for quickly improving the speed of your websites, but it’s all for naught unless you go forth and put them in action... so get to it!
Before you go, I want to recommend that you use Pingdom’s Website Speed Test to determine your site’s performance score, which is helpfully accompanied by tips for further improving your site.
Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.
6. Networking and word of mouth
The number-one way to find quality clients is to get out and meet people (figuratively and literally) at non-design events.
Once up a time, I’d spend all day at home, applying for mechanical engineering jobs in isolation. I was unsuccessful for months.
I did, however, make serious headway on my Netflix backlog. Serious progress, people.
Eventually, I gave up and focussed on pursuing a career in web design and development (which I was much more passionate about), and started getting out and socializing.
Within weeks, I had job offers coming in from my loose-knit network of new acquaintances. It’s not rocket science: People prefer to hire people they already know and like — not the faceless folks clogging their inbox with links.
Notice how I didn't specifically describe who the people I met were? That’s because you need to meet all kinds of people. You have no idea who your next client will be.
But they probably won’t be at a web design meetup — those are filled with jobless designers.
All of this is worth repeating: Go to any and every meetup that matches your interests, and simply tell people you’re a web designer. Watch what happens. Everyone needs a website, or knows someone who does. That's what’s so great about freelancing in this industry.
Some places to start meeting people:
- Sports events and classes
- Abroad (for some reason, people are a lot more open to talking to strangers while traveling)
- Slack groups
- Conferences and conventions
Just keep in mind that, no matter the event type or place, you have to actually talk to people you don’t already know.
Tip: Don’t be the typical “business networker.” Don’t bounce from person to person shaking hands, fake-smiling, repeating first names every sentence, and handing out business cards. Be legitimate. Make real connections.
The other side of the networking coin — word of mouth — comes from building up a client base, having lots of contacts, and building your personal brand (with your blog, portfolios, and templates). This takes time. Do great work, treat your clients with respect, keep in touch with past clients, and follow the rest of the advice in this article, and you'll absolutely be fine.
With networking and word of mouth, you can easily reach a state of having more work offers than you can sustain—without ever actually working for it. When this happens, you can increase your rates. Ka-ching.
Personally, I turn down contract offers on a weekly basis. And they’re all the result of word of mouth and networking I did months ago.
It honestly doesn't take long to get to this point if you produce quality work and put yourself out there.
Hustling is the art of working extremely hard and extremely smart. In the context of freelancing, hustling involves going out and finding work directly. For example: finding websites or businesses that desperately need your services.
Does your favourite pub have a terrible site? Why not talk to the owners and convince them they need you to fix it?
If you have the right personality, and the drive, this can be an extremely effective way to whip up some initial work. It just isn’t particularly glamorous. It also requires your repeated, hands-on time and energy. (In contrast, writing blog posts or setting up a portfolio one time can attract customers for years to come.) The success rate of in-person contact, however, is much higher. The trade-off is lower volume.
Fresh out of the studio (or maybe his cool van) Dann Petty released Freelance.tv. It’s a series of 10-minute interviews with freelancers that explores how they find, work with, and keep clients (and much more).
As you may have noticed from reading this post (or maybe not), hearing from other freelancers about their experiences can be extremely helpful. Check out his new episodes and also his upcoming documentary, Freelanced.
Now get out there and find your next gig
If you’re sitting at home, desperately hoping clients will come to you, I have news for you: They won’t.
You have to put yourself out there to start, and show prospective clients that you have tangible, valuable skills to offer.
Luckily, this is an industry where skill and contacts trump all — education is irrelevant. So take advantage of that.
So to summarize, here are your next steps for getting clients and building your freelancing business:
- Build your portfolio. Make it gorgeous. Share it everywhere. You can use Webflow to do it yourself without coding.
- Create profiles on Behance, Dribbble, and Webflow to connect with other designers and potential clients. Use their SEO advantage to drive more traffic to your website.
- Create a profile on Upwork and Design Inc, and bid on contracts. Be confident, and don’t be scared by inexpensive competitors. Also use AngelList to find contracts with promising or established startups.
- Start meeting people. Get out, meet, and befriend as many non-designers / developers as possible. Be legitimate.
- Start a blog to complement your portfolio. Write thoughtful, useful content to establish yourself as an expert in your discipline. Let your personality shine through.
- Convert your websites designs to templates, and release them on sites like Webflow, CreativeMarket, and ThemeForest to earn passive income and awareness.
- If it’s your style, start hustling. Find people who legitimately need your services and tell them why.
But most of all:
"Do something! Even if it's wrong."
– My friend's dad
When you’re starting out, it can be better to do the wrong thing than nothing at all. In the process, you’ll learn, and you might just stumble into something that works beautifully.
Just try to not to be so wrong nobody will ever work with you again. Ever.
Now, stop reading, and get out there and land some clients!
Oh — and If you’re a freelancer, how do you find clients? Is there anything I missed?