Faster user experience, more conversions, higher core search engine rankings, more long-tail traffic, lower bounce rate, and more...​

in under one second

1) Reduce HTTP Requests

Anything done with an image that can be done with CSS, do it.

Combine CSS Files and JS Files.

Reduce Plugin Dependency

Look at Your Font Usage

Minimize Redirects

Use CSS Sprite Sheets

2) Shrink Your Page Size

Save & Compress all non-critical images as JPGs

Save small images as GIFs

Save & Compress critical images as PNGs

Use the Right Resolution

Smush your Text Files

3) Optimize your Database Performance

ATTN:

If you can get away with it, don't use a database

Reduce Bloat

4) Render Above-The-Fold First

Have a fallback system font that can pre-load before webfonts

Inline the right CSS elements

Move Render-Blocking JS to the Footer

5) Use Caching of All Types

If it can be cached, allow it. If it can't and you can get rid of it, axe it.

Enable Browser Caching

Code: ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##

Enable Server-Side Caching

Use a Content Delivery Network

6) Upgrade Your Hosting

Cancel your Shared Hosting plan

Get a Virtual Private Server or Dedicated Server

7) Write or Use Good, Fast Code

Use the Most Efficient Functions

Start With Efficient Code

Don't Load Last, Load Fast!



​ Head over to Pingdom Tools and run a few tests before you do anything to see how fast you are loading. Make sure to use the same loading location each time, such as New York. Then, use just one of the tips above, and when you're done run another few tests and average them out. You'll become more and more motivated and excited as you watch the load time become faster and faster after you use each tip.



. ​

We perform marketing to earn traffic. We split test our copywriting, our website design, and optimize our sales funnels to get as much out of our traffic as possible. But what's the point if your traffic is bailing on you because your page took too long to load?Yes, page speed optimization can be somewhat technical and pretty intimidating. But a lot of times that's just because of the presentation of the material. That's why I'm about to hit you with 7 tips that are quick and actionable so you can boost your page speed not only today, but right now.Why even bother? Well, for starters...Let's get straight to it... apply all 7 of these core page speed principles and there's no reason your site shouldn't be loadingand giving you the killer benefits above.If you need more explanation on a specific point, it's there! Otherwise post a reply and let's talk about it.HTTP requests happen one at a time. The browser has to open and close a connection for each request, so it makes sense to have as few as possible. Here's how you can trim the fat.Some designers will cut a slide of a gradient out of photoshop and then apply a repeat-x on it. That's cool, but they do that for a ton of different elements. Why, when you can just create a CSS gradient or button? Heck, one guy created the entire Simpsons cast in CSS. I'm not saying go that far, but don't be lazy. If you can convert for example, an image-based shadow to a CSS shadow, do it.Organization is important, but you don't need to have a header.css, footer.css, buttons.css, forms.css, etc. And don't create one style.css and @import them all either. Copy and paste it all into the one style.css file and create a table of contents at the top. Same for Javascript and jQuery.Reduce plugin dependency too. They introduce tons of extra CSS and JS files that can't be combined without a huge headache. Some may only be used on one page, like a contact form plugin, but force every page to load their files. Get rid of them! You know those social plugins everyone loves? Look at your analytics and see if they are really receiving engagement. Otherwise, chop'em down. The Facebook widget, for instance, requires about 20 additional HTTP requests.Google Fonts is so awesome, so awesome that theme designers want to use 5 and 6 fonts per theme. Reduce that to two, if not just one, if you feel you must use them. Better yet, if you can host them on your own server, do that. Even better, just use system fonts so you aren't loading anything at all. Just make sure you cover Windows, OSX, Linux, and any other system, and the user's computer will do all of the work for you.There's really no reason for it, but you may find that your site has a lot of redirects in place. Let's say you're telling the browser to look for /theme/my-site/display/styles/js/mobile-menu.js. But at some point the designer wanted to move all of your CSS, JS, and Fonts to one folder elsewhere. And instead of finding all of these locations where he called the files, he just set up a redirect. For every file, you're demanding two HTTP requests instead of one. Fix this!Imagine your site is an eCommerce site. You have Buy Now button images, icons in the footer, a woman with a phone to her ear telling your customers to call for support, images for all of the payment options, and more. You can reduce all of these requests down to one by creating a CSS Sprite sheet, which is one large image that contains all of your repeatedly used images. You'll tell your site where to find them on the sheet using Cartesian coordinates (x, y). This is a huge win.So instead of 100 HTTP Requests, you're now only loading 30! It's faster but still slow, because you're asking your visitor to load 5 MB worth of stuff per page load. That's absurd! Let's shrink that way down.The JPG file format contains just enough information to display an image on the web sharply enough without being bloated. If you attempted to distribute a JPG file for someone to print and keep offline, it'd come out blurry. A lot of times, text will render awkwardly as well. Use JPG where you want quality but where you don't need perfection. If an image is meant for display only without elements that need sharpness, use the JPG format and compress them further while maintaining this quality by using TinyJPG The GIF format is essentially maximally compressed as it is, in a destructive manner. Big GIF images, or small but complex images will appear blurry in this format. Save small and non-complex images as GIFs. Use it where you can, but don't go overboard if the visuals matter. If you have a lot of these, you should be making a CSS sprite sheet!For logo's, images with text that need to look crisp, and anything that requires sharpness, use the PNG format. Then head over to TinyPNG to compress them. Present your brand's important images using the PNG format.Don't force the user to load a 800x600 resolution photo when you're only displaying it at 200x150. Resize it and compress it for big savings. When displaying images on a responsive site, the best and easiest option is to find a happy medium size between desktop and mobile. Mobile speeds are slow right now and serving different images based on viewport size is too complex right now to be a quick tip.Optimize your CSS file by reducing specificity, re-using elements where you can, using shorthand coding, and then minify it and your JS file. Take out any code not being used from your CSS, JS, and HTML files.If you're designing a 5 page business lander, you don't need a database. If your site is a content magazine or 10,000 product eCommerce site, a database is unavoidable. What can we do?If you can, go completely flat file with just HTML and PHP. There are some Content Management Systems (CMS) that can help you with flat file management for medium sized sites. Bypass a database completely if you can, but don't make your life harder than it needs to be. Database-dependent sites can still fly.Look in your dashboard. You see those 200,000 spam and unaccepted comments? You see how each post has 20 revisions and drafts? Did you plan on using 50 categories and only ended up using 10? Did you not even use tags but set up 100 of them? Do you have extra user accounts not being used? Get rid of all of this. Anything from extra accounts, to taxonomies, to a trash bin full of stuff. Delete it. If you're using Wordpress, WP-Optimize works great.Perceived page speed by the user is as important as what the search engines measure. Make sure your visitors see a full experience as soon as possible when they land. By making everything above-the-fold appear first, the user can begin enjoying your site while the rest of it loads behind the scenes.The most annoying thing is for a site to load before the words do, because the font was one of the last things to come through. By defining a system font in your CSS file, you can get the text on the screen immediately by asking the user's computer to show the text using something like Helvetica or Arial until your font loads.Generally, you don't want to have your CSS inline in your HTML document. However, the one place that's worth it is the above-the-fold elements. By inlining that CSS only within your HTML's head, you can make sure it loads with the HTML document first instead of waiting on the CSS file to be downloaded and read.If you have design-critical Javascript or jQuery, it may block the rendering of the above-the-fold area if it's placed in the HTML head. Move it to the footer so you can visually load the top of the page. It's unlikely the user will want to interact with anything before the JS has a chance to load, but they'll see what they might want to interact with quicker.Let me say first off that you should always compare the before-and-after effects of caching. Depending on your server, the location, the size of the site, and other variables, it could actually slow down your loading. It's rare, but be aware! Otherwise, get ready to cache...If it's on-site, it can be cached and you should do it. There are situations where on-site files can't be cached that you can fix, such as files that have dynamic variables attached. If your CSS file is listed as style.css?v012, get rid of the "?v012" or it won't be cached by the visitor's browser. Off-site resources can't be cached either, like Google or TypeKit fonts, the million of requests attached to that Facebook widget, and hot-linked images. You know what to do...If the visitor's browser is caching items, they'll load immediately upon a refresh or a second page view. You want this, obviously, but be careful too. Don't set your expiry too high or your users won't see updates to files later on. Here's a good starting point...Remember, this is a starting point. You'll be able to tweak the expiry times and other file types, etc. Be careful when messing around with your .htaccess. Back it up first so you can revert if you end up blocking access to your site.Your server can pre-process your site and cache static versions of pages to be served. This includes dynamic objects like dates, comments, posts, and more. You can imagine how much time this saves on loading already, I'm sure. Most CMS's will have a good caching plugin. If you use one, make sure it's being supported and constantly updated.A CDN is basically a set of bad-ass servers positioned around the globe. Not all of your visitors will live near your main server, and the CDN can choose the optimal server location to serve your files from to reduce the time it takes for your user's browser to receive them. The more nodes, data centers, and distance you can skip, the faster your site will be. My favorite of the many I've used is MaxCDN (BuSo's afflink for the win!).It all comes back to your hosting. If your server is slow, everything is slow. Maybe this should have been the first point on the list, because it all hinges on this.Don't use the lowest tier shared hosting just to save a few bucks. Many will tell you they are optimized for your certain CMS, and all kinds of marketing ploys to get you to sign up. But at the end of the day, you get what you pay for. Higher tier shared hosts can be okay in general but may not ready you for big spikes in traffic (or when another site on the same server gets a spike). You may go through all of the steps above and have your site loading in 1 second, but if it takes 6 seconds to contact the server and receive the first byte, then there's no point.The reason you want a VPS or Dedi is that you want your own resources. You wouldn't want to share your brick and mortar storefront with someone else, so don't do it online. Knowing you have a certain set of resources means your site's performance will be consistent and ready for any huge spikes in traffic. My favorite, and coincidentally where Builder Society is also hosted, is Knownhost (again, a BuSo afflink!).When bandwidth and serialized connections are our bottleneck, efficiency is where we'll make our gains. If it can be done in 10 lines of code instead of 100, then you're winning.If you're writing your own code, take the time to figure out the best way to do the thing you're doing. For instance, Wordpress has a lot of functions that can perform the same task, but did you know some of them are significantly faster than others? Find the fast ones and use them instead.Not everyone can code and shouldn't have to. But there are instances where a web designer hacks together a backend just to promote how pretty his or her front-end work is. These are the types of themes you want to avoid. Don't be seduced by the visual allure. Start with a theme that's optimized for fast loading times (like my free BuSo Lightning theme!) and enhance it visually as you see fit.Guaranteed you can make it as beautiful as any other with an end-result that loads two to three times as fast!Don't be intimidated, because this is such a fun process that I had a blast writing this. Make it a game. It'd be great if you share your results with us as you quickly go through the process. Here's a good way to keep track of your gains:Again, if you need any help, just post in this thread or PM me and I'll be happy to help out any Builder. If you're reading this and not a member, then what are you waiting for? Sign up and get involved! The benefits are ridiculous (and free)!