7 Easy Wins to Make Your Site Load Faster Today

Ryuzaki

お前はもう死んでいる
Moderator
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
6,246
Likes
13,132
Degree
9
zzIbVlY.png

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...
Faster user experience, more conversions, higher core search engine rankings, more long-tail traffic, lower bounce rate, and more...​

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 loading in under one second and giving you the killer benefits above. Skim the headers and bullet points for the quick and dirty. If you need more explanation on a specific point, it's there! Otherwise post a reply and let's talk about it.



BptVDXB.png
1) Reduce HTTP Requests

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.
  • Anything done with an image that can be done with CSS, do it.
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.
  • Combine CSS Files and JS Files.
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
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.
  • Look at Your Font Usage
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.
  • Minimize Redirects
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!
  • Use CSS Sprite Sheets
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.



pgFYmIK.png
2) Shrink Your Page Size

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.
  • Save & Compress all non-critical images as JPGs
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.
  • Save small images as GIFs
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!
  • Save & Compress critical images as PNGs
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.
  • Use the Right Resolution
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.
  • Smush your Text Files
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.



zdGQBrC.png
3) Optimize your Database Performance

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?

ATTN: Always take a backup of your database before you run any queries!
  • If you can get away with it, don't use a database
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.
  • Reduce Bloat
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.



fqVern6.png
4) Render Above-The-Fold First

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.
  • Have a fallback system font that can pre-load before webfonts
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.
  • Inline the right CSS elements
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.
  • Move Render-Blocking JS to the Footer
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.



SuednNJ.png
5) Use Caching of All Types

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 can be cached, allow it. If it can't and you can get rid of it, axe it.
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...
  • Enable Browser Caching
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...

To be added to your .htaccess file:
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 ##

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.
  • Enable Server-Side Caching
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.
  • Use a Content Delivery Network
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!).



oG7RYOl.png
6) Upgrade Your Hosting

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.
  • Cancel your Shared Hosting plan
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.
  • Get a Virtual Private Server or Dedicated Server
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!).



yve6Hkb.png
7) Write or Use Good, Fast Code

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.
  • Use the Most Efficient Functions
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.
  • Start With Efficient Code
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.

0QVLge8.png

Guaranteed you can make it as beautiful as any other with an end-result that loads two to three times as fast!



C1QrS7Y.png
Don't Load Last, Load 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:

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.
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)!



PRCzn3M.jpg

.
 
Just what I needed!! Thanks @Ryuzaki for making it so actionable. I can figure out how to do a lot of this myself and now I actually know what to ask for when I outsource the rest.
 
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.

Can javascript and jquery go into the same file? I've heard that "one extends the other" but I don't know what that means. I actually don't even know if I have both or just one or the other. AHHH this thread opened the proverbial can of worms!
 
Can javascript and jquery go into the same file? I've heard that "one extends the other" but I don't know what that means. I actually don't even know if I have both or just one or the other. AHHH this thread opened the proverbial can of worms!

Yep, same file. Javascript is a scripting language, while jQuery is basically a javascript library or framework that allows you to manipulate what's being seen in the browser after it's loaded more easily than trying to do it in pure javascript from the ground up. It's essentially a set of nice, pre-written functions to make your life easier.
 
I always made use of various plugins because I have no knowledge of programming.

Now I managed to replace the most plugins by adjusting the functions.php,htacces,robots and style.css.

But now I'm still looking for a solution to replace contactform7. I found some online tutorial to make yourself a contact form, only this one loads google fonts.

Does anyone know where I can find a online tutorial to make a good/fast/safe contact form for WP?
 
@Bloghue I've made a ton of my own contact forms but the one thing that I'd like to be able to do is integrate it into Akismet. Do you know how that's done?
 
@Ryuzaki

Akismet requires a whole lot of data to pass through objects before submissions occur. Unfortunately, they donot have a one off API which can be loaded onto the form page. Every transaction has to go through their plugin in most existing scenarios. They themselves ask you to go the Plugin route (Jetpack, CF7, FastSecure CF) etc.

Fortunately, achingbrain aka Alex wrote a class to ease this and can be found here - Github - Unfortunately, there have been no updates since the last 3 years (Lack of updates does not mean that the class won't work anymore).

You can follow a simple enough tutorial such as this - Tutorial - The reason I linked at the above tutorial is that it changes the subject to [SPAM?] -

Thing is, unlike Wordpress Comments, the success rate for Akismet in detecting Contact Form entries is not the best. Using the above scenario, if in case Akismet detects it as a Spam, however it still gets delivered to your inbox. This allows you to set a filter to mark all such emails as spam, yet allows you to skim through your spambox as various intervals and then mass delete. Sort of saves you from missing important correspondence, that would've otherwise been deleted.

You can always modify the query to drop the form if it is marked as spam, though.
 
Only thing I have to say is that if you are fucking with wordpress go with wp-rocket.me. It's worth every penny and way easier to setup/manage then anything else I've used.
 
Hey man. W3 Total Cache is free and the only add ons I see this plugin providing are not worth the $40. I could be wrong, but paying for Defer JS Loading and DNS Prefetching is not worth that much.

Only thing I have to say is that if you are fucking with wordpress go with wp-rocket.me. It's worth every penny and way easier to setup/manage then anything else I've used.
 
My aged site is SOOOOO slow. I've just got it down from an ELEVEN second load time to 6.83 :-(

1.4mb page size for the home page, 180 requests, tested in Pingdom from the San Jose USA server.

OUCH!!!! That probably is interfering with my ranking!

BTW, I'm running it with GeneratePress and using Thrive Architect for building out the newer pages. People say Thrive slows things up, but my other site with a similar setup is running around 2.3 secs, nothing amazing but a lot better.
 
1.4mb page size for the home page, 180 requests

Sounds like you have a lot of images that aren't resized and optimized properly, and/or some ad networks that are loading a ton of tracking pixels. If the ad networks are asynchronous it won't matter, but most sites will still measure them in your load time. What really matters is your render time, the time it takes to paint the site onto the screen.

Your situation may not be as bad as it seems if it's a case of ad networks or Facebook retargeting pixels. If it is that bad, then you have some work you can do! Start with any that can offer site-wide benefits, like header and footer optimization, plugins and functions that don't need to run on each page but do, etc. For instance, plugins like Contact Form 7 on Wordpress will load site-wide although you're only using it on one single contact page. There's some more info here in the crash course that'll help you along the journey.
 
Sounds like you have a lot of images that aren't resized and optimized properly, and/or some ad networks that are loading a ton of tracking pixels. If the ad networks are asynchronous it won't matter, but most sites will still measure them in your load time. What really matters is your render time, the time it takes to paint the site onto the screen.

Your situation may not be as bad as it seems if it's a case of ad networks or Facebook retargeting pixels. If it is that bad, then you have some work you can do! Start with any that can offer site-wide benefits, like header and footer optimization, plugins and functions that don't need to run on each page but do, etc. For instance, plugins like Contact Form 7 on Wordpress will load site-wide although you're only using it on one single contact page. There's some more info here in the crash course that'll help you along the journey.

Thanks @Ryuzaki - I got rid of around 15 plugins, now running 10 or so. I also got rid of FB universal pixel as I really am not going to be making use of it right now. Just GA running.

Yeah, I use Illustrator for images and save as medium quality jpgs for the most part. That said, as the course mentioned, no point having 1000w images if the content area is only 850 (not saying it is but making a point.

It's odd, it's always been somewhat slow, even when I had a good webdev buddy of mine build a completely custom and minimalist theme.

I'm running ad inserter to display ads via the Ezoic network, but when I turn it off it doesn't make much difference to load speed.

Sorry to sound ignorant, but I'm using Cloudflare with Rocket Loader and no minification, I have WP Fastest cache doing that.

Should I also have Siteground caching AS WELL? I'm on their Big Geek sharing plan I think it is, but only really have two sites doing anything, the aged one getting a few hundred hits a day and the new one getting around 50 visits.

Also keep getting inode warnings for SG, saying I am using 80% of my inode capacity. That's probably nothing to do with the load times, but does it imply some systemic overloading of my hosting?

Cheers for the feedback
 
Also keep getting inode warnings for SG, saying I am using 80% of my inode capacity.

You only get a certain number of index nodes available to you. I think it's built into the file systems when the servers are set up, so it can't be easily changed. Each file you have on the server requires an inode. You're running out!

Yeah, I use Illustrator for images and save as medium quality jpgs for the most part. That said, as the course mentioned, no point having 1000w images if the content area is only 850 (not saying it is but making a point.

Resizing to the proper size can save a ton of data and bandwidth over 1000's of images, even if it's just a 100px on either side.

And then you can look into options like TinyPNG and Kraken.io (my preferred these days, their algorithm is less destructive after TinyPNG went a bit more aggressive) and do lossless compression. It shouldn't change it visually but you'll still see some gains. Give it a test whirl on a few pics and you can see the savings and the image. If it's not that big of a deal, you can even go lossy and save more, which I choose to do on my sites. I save 60-75% bandwidth per image. That stacks up and is way faster for the visitor.

I'm running ad inserter to display ads via the Ezoic network, but when I turn it off it doesn't make much difference to load speed.

I haven't used Ezoic but I did just look it up. They use asynchronous loading, meaning that their javascript files won't block rendering. They aren't deferred to the footer so much as they begin loading as soon as they're encountered but on a different thread (may not be technically correct). They load alongside everything else, 'in the background' I guess you could say.

Sorry to sound ignorant, but I'm using Cloudflare with Rocket Loader and no minification, I have WP Fastest cache doing that.

Should I also have Siteground caching AS WELL?

You should definitely be minifying your CSS and any Javascript, especially if you aren't actively changing it constantly. That will provide site-wide savings.

I'm not sure exactly how it works but Cloudflare is going to be grabbing snapshots of your files individually and serving them from around the globe, as close to the user as possible. In my case, I actually had a faster delivery without a CDN and didn't really need to support global users that much. I make the bulk of the cash from USA users. You may experience the same.

But Siteground caching sounds like server-side caching where they'd build the page by grabbing all of the objects (dates, comments, tags, categories) and save them, then they build the HTML from all of the various PHP (header, body, footer) and then they save static versions of all of that. I'd rather have this server caching without a CDN than have a CDN without server caching. You can set up both and deliver the static version of the site to the CDN too.

Then of course there's HTML minification and GZip compression too, both of which can shave off a little more time and isn't taxing for a browser to decode.
 
Sorry to sound ignorant, but I'm using Cloudflare with Rocket Loader and no minification, I have WP Fastest cache doing that.

Should I also have Siteground caching AS WELL? I'm on their Big Geek sharing plan I think it is, but only really have two sites doing anything, the aged one getting a few hundred hits a day and the new one getting around 50 visits.

Also keep getting inode warnings for SG, saying I am using 80% of my inode capacity. That's probably nothing to do with the load times, but does it imply some systemic overloading of my hosting?

Cheers for the feedback

If you post your waterfall and yslow graph, it would be a lot easier to help out.

If you're going to stick with large page sizes, Varnish and Railgun might help you considerably. Also make sure you're using a lazyload MEDIA supported code... a lot of the wordpress lazyload plugins only do images, so you'll see the spike for youtube embeds (and anything else) on your graph just like you would for ad network code.
 
Thanks for the replies. Here is the YSlow, what do you need for the waterfall? It's freakin' long, in GTMetrix the load time was 10 secs with 1.49mb page size and 317 requests...wowsers.

1 min, I struggle to get these images to load :-(

f77btzj.png


Well, learned how to do it, so that's a win!!!
 
317 requests?!!
What plugins are you running? This is beyond a problem with your images.
 
Quick question. Is the site TLS (aka SSL) or HTTP? Also, under the "Avoid URL redirects" section, exactly how many redirects does it show? This is usually not a massive issue but, there are cases where a site could have tons of unnecessary redirects.

For example, say all the resource files on page (JS / CSS / images) are using the wrong URL format. You may have redirects setup, so everything resolves. When you actually look at the page request / response cycle, however, there is a LOT more going on.

Say you have 20 on-page resource files with wrong urls. Maybe they're absolute urls, with www subdomain, but maybe your site is at non-www (http:// example.com/). With each resource request, the cycle looks basically like this:

HTTP request -> response -> redirect -> correct resource response.

Look at the dev tools in your browser, on page load, and you'll often see things like a 307 redirect to the correct path/protocol version of that resource (happens often for things like Google Analytics, other tracking scripts, etc.). So, those 20 requests have now DOUBLED if each had incorrect paths. Again, not a big issue for most sites. I have seen it create big problems for some, especially with things like cross-protocol responses (http -> redirect to https) and /or resources that are render-blocking.
 
Hi there @turbin3 - it is https

There are 3 redirects when running the test on the home page

Code:
http://domain.com to https://domain.com
https://domain.com to https://www.domain.com

and a 3rd which I have no idea about

Code:
https://sb.scorecardresearch.com/b?... 
redirects to https://sb.scorecardresearch.com/b2?...

I did grab this from the Chrome developer tools, not sure if it sheds any light on what I need to look at?

Thanks for the advice and help

vJkeTdw.png
 
The first issue is a redirect chain. Ideally, it's always a good idea to update redirect logic and try to minimize "hops" by sending things straight to their destination. In this case it would be separate redirects of the HTTP and TLS non-www versions to the TLS www version.

That chart shows that most of the issue would seem to be with Javascript. Do you by chance have lots of inline JS on your pages? That's one thing I see a lot of people have issues with. They code fast and dirty, inline JS piles up, much of it being render-blocking.

That or, tons of theme developers have some bad habits of doing similar things. That or they simply don't even factor in performance and don't consider things like async with their scripts.

Regardless, I'd look at exactly what JS is being loaded. If you want to put up a list of what's being loaded, we can try to break it down and find the problem.

scorecardresearch.com (comscore) is a non-issue. That redirect is normal behavior. You'll see that with lots of tracking cookies, routing data through multiple redirects and even multiple domains.
 
Hi there.

Well, I've been fiddling and have got the load time for the homepage down to around 4.5 secs, which is still crap but twice as fast as it was.

Here are a couple of portions of javascript that are loading. I have no ads running on the site at all, removed them all from 'ad inserter' plugin. AlI have is GA and FB tracking pixel in the header, and 2 image ads I created to try to sell my own product.

Here are a couple of snippets of the scripts, why would all this G ad shit still be loading if there are no ads displaying?

aE6EKHD.png

8PkLNiS.png


Also a ton of redirects

ePLSYlH.png


OHHfVzD.png


The 2nd blurred bit is a redirect from http:// to https:// for my own domain

Thanks for the help so far btw. :-)

WHOOP!!!!!! A little trial and error and some tweakage :-)

Rv9w85N.png


Bigger WHOOP!!!!

tCbIvHX.png


Not sure if that is a good glitch or if it will stay that way.

Thanks again for all the help
 
Back