TwitterMake Fast Sites

🚅 Fast sites get more traffic and make more money!

How to make websites faster

Refactor the Code

Most sites include an excessive amount of JavaScript (JS) and CSS that never even gets used on their pages. There are several ways this code bloat can be refactored to make a site faster.

Consider using Chrome Developer Tools to identify slow loading files. Typically, the slowest files are externally hosted JS files. If possible, try hosting the files or find an alternative that's faster.

Use System Fonts

All modern browsers now support linking to and using different fonts. In fact, Google made it incredibly easy for web designers to utilize a diverse group of fonts thanks to Google Fonts. These fonts have opened up new style options for designers, but they’ve also slowed down page speeds.

If the font doesn’t exist on the visitor’s computer, the browser has to download it. In most cases, designers will use multiple fonts with multiple weights (thinness and boldness) along with their italicized versions. Font file sizes add up quickly. For example, if you use just one font like Lato, the download size quickly jumps to 1.2MB.

Font Sizes

Linked fonts should be used sparingly or not at all. Instead of using linked fonts, use system fonts. System fonts are fonts that the OS uses throughout its GUI for displaying text. There are several benefits to using system fonts.

The following CSS code will cover all major platforms and devices.

body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }

That's the exact code that's used on this site. The font that you're seeing on this page right now is your system font. Here are some examples of how much your current system font can be styled with CSS.

font-weight:100;
font-weight:300;
font-weight:500;
font-weight:700;
font-weight:900;
font-weight:600;font-style:italic;
font-weight:200;letter-spacing:2px;font-size:1.5em;
font-weight:800;font-size:2em;

Since the idea of only using system fonts will most likely make a designer twitch and think about ways of killing you, consider making the following compromise with them. Tell them that they can pick one font with one weight that they can use for headers.

Optimize Images

Images that are large and unoptimized can significantly slow down sites. Fortunately, there are several ways to optimize images for speed.

Use the best format for the image

The ideal image type to use on web pages is SVG. They are vector images that have small file sizes and look great on high definition screens. However, they should only be used for simple images like icons, logos and images that are not complex. For example, you wouldn't want to use SVG for a photograph or any image with many colors and objects in it.

The next ideal image type after SVG is PNG. They are raster images that work well for simpler images, like screenshots. One of the best features of PNGs is that they support transparent backgrounds, but are typically much smaller in file size than a GIF.

The final image to consider using is JPEG. Like PNGs, they are raster images, but they typically maintain a smaller file size for complex images like photographs.

SVG PNG JPEG
Raven Tools Automated Report Jon Henshaw

I created this this flow chart to help you pick the right image. Here's a PDF version of it if you want a printer-friendly copy. Also, this flow chart was adapted from Daniel Box's flow chart which was originally adapted from Ilya Grigorik's flow chart.

Image Format Flow Chart

Reduce the size of PNGs and JPEGs

PNGs and JPEGs can be significantly reduced in size by changing their Quality and using an optimization tool. For example, PNGs are usually 24-bit, but you can use image editing software like Photoshop to export it as a much smaller 8-bit PNG. Similarly, JPEGs can be exported and made smaller by reducing their Quality percentage. For example, I was able to reduce the picture of me drinking beer from 140KB to just 30KB (almost 80% smaller!) by adjusting the Quality percentage from 100% to 50%.

Export JPEG

Image Optimizers

After reducing the file size of PNGs and JPEGs in an image editor, you can then use a free image optimizer to further reduce the file size, but without losing any visual quality to the image.

ImageOptim

Use SRCSET to deliver images specific to the device

There’s a standardized HTML attribute used with the IMG element called SRCSET. It enables you to deliver different images based on a device’s screen size and type without the need for JS. For example, you can specify a smaller, alternative image for mobile phones using SRCSET.

<img src="/images/5-most-common-issues.jpg" srcset="/images/5-most-common-issues-320.jpg 320w, /images/5-most-common-issues-480.jpg 480w, /images/5-most-common-issues-768.jpg 768w, /images/5-most-common-issues-1024.jpg 1024w" alt="5 Most Common SEO Issues" />

In addition to speeding up the load time for a site, SRCSET also provides a unique way to improve the UX of images that isn’t just size-related.

Lazy load images

Another way to speed up pages is to only deliver and display images that can be seen in the current browser view (above the fold). That method is called lazy loading and it forces the browser to only download images as the user scrolls down the page. Lazy loading is most helpful on long pages that have many images. It requires JS and you may need to alter the attributes in the IMG element to make it work correctly.

The best way to implement lazy loading is to use a single-purpose script (versus a library like jQuery) that supports responsive image attributes like SRCSET. Two popular scripts that do that are:

If your site requires using a library like jQuery, there are many lazy load plugins to choose from.

Use a CDN and HTTP/2

HTTP/2 is a new protocol that sends multiple requests in parallel over a single encrypted (SSL) TCP connection. The result is a significantly faster delivery and rendering of pages. Used in conjunction with a CDN, page speeds can be dramatically increased.

The easiest way to add HTTP/2 and a CDN to your site is to use Cloudflare. Here's a tutorial on how to add HTTP/2 and SSL for free using Cloudflare.

WordPress Plugins

Cloudflare works well with WordPress, but you may need to use one or more plugins to make everything work smoothly.

Minifying and Compressing

It's important to note that minifying code and compressing files is important for speeding up page delivery. Fortunately, both are available with Cloudflare's free account. Gzip compression is done automatically and there are options to turn on code minification for JavaScript, CSS and HTML in the Speed section of Cloudflare.

Improve UX

A good user experience is one that is clear, focused and doesn't confuse or overwhelm the visitor. A cluttered page with numerous areas of content and ads not only loads slower, it also disorients the visitor.

Consider reevaluating your pages by identifying its primary purpose and then it's secondary purposes. Then remove everything else from the page and consider using a single-column layout if possible. The result will be purposeful navigation and happier visitors. After you improve the layout of your pages, consider using Resource Hints to improve site navigation speed and increased conversions.

Use Resource Hints to speed up navigation

If a page is designed to funnel visitors to a particular page, you can load its assets or the entire page in the background using Resource Hints. Resource Hints like prefetch and prerender make the pages you navigate to load incredibly fast, because they store the page or its assets in the browser's cache.

How to use "prefetch"

If there are assets or pages that the visitor is likely to visit next, you can use prefetch to load them in the background while the browser is idle.

<link rel="prefetch" href="/js/script.js" as="script">
How to use "prerender"

The prerender link attribute should be use sparingly and only for pages you are confident the visitor will navigate to next. For example, you may want to use it for the next page in a tutorial.

<link rel="prerender" href="/tutorial/step-4/">

Or a landing page that you are funneling the visitor to.

<link rel="prerender" href="/landingpage/">