“I was thinking of using a theme like GeneratePress – or Astra. They seem to be the fastest but, now I’m unsure.”
Free Elementor is 61 milliseconds and adding paid Elementor Pro delays another 71 milliseconds. That slows down every page by 132 milliseconds.
Should I use GeneratePress or Astra theme with Elementor for mobile speed?
For comparison, WordPress core loads in 215 milliseconds. Five times slower than your speed theme.
A typical free, discrete, single-function, no-setting plugin loads in less than 0.5 to 2 millisecond.
25 percent of plugin speed overhead is often consumed by one plugin.
80 percent of total plugin load time is burned by your 5 heaviest plugins.
The average WordPress website has 25 plugins.
Of PagePipe’s 70 total plugins, 12 load in under 3 milliseconds each. And 29 of the 70 load in under 1 millisecond each.
There’s usually one big-fat plugin killing speed – like WooCommerce 262 milliseconds – or more. Or perhaps Yoast SEO Premium plugin loading in 240 milliseconds.
We repeat. These plugin speed problems are minor compared to the real problem:
Speed killers: Undisciplined, novice site owners.
They’re the real problem. And some professional developers are apathetic about quality, too. You can do anything and everything dreamed of with a pagebuilder. That should be good. Right? But start adding incremental features and soon the site is overweight and slow. It’s not one slow thing – it’s everything. Egomania. Then site owners ask us, “Can you fix this Elementor speed problem?”
Sorry. It’s not Elementor’s fault. They didn’t make you put in all that web junk. They only tempted you.
WP Rocket is a $49 speed plugin with annual renewal (rent overhead). Most don’t realize WP Rocket caching plugin adds 109.1 milliseconds to global page loads. The irony.
Can you fix speed on a bloated Elementor site? The answer is probably “no.” Pagebuilder plugins can’t be selectively deactivated to reduce site heaviness. Not without white screening an entire site anyway. Discrete plugins can be selectively activated or deactivated on pages and posts. This is important for speed. It’s not the evil your pagebuilder does, it’s the goodness that got left out. It’s a sin of omission.
In fairness, Elementor doesn’t activate their widgets on pages where you don’t use it. But that’s not the same as selective activation. If you must use Elementor, don’t use it on your most-popular landing pages. Use good judgement for speed.
Desperate site owners throw money at speed problems. Usually by adding CDN, caching, or more expensive hosting. Things get costly. The speed investment is worse instead of better. Discarding whimsical features prevents speed waste.
How do I build a fast website from the start, without using a full-time developer?
What is the right decision about builder plugins?
Our speed advice is design without a pagebuilder whenever possible. Pagebuilder’s are slower, add more requests, and have a big learning-time commitment. But if you have no idea what you’re doing and are new to the game, go ahead – be a make-believe designer with a pagebuilder. It’s OK.
Pagebuilders are not the speed panacea you seek.
Will your pagebuilder site be slow? Most likely. The odds are high it’ll be slower than you ever dreamed. Why?
The answer: Because you own a rifle doesn’t make you a hunter. Just because you own a car doesn’t make you a racing champion. Owning a pagebuilder doesn’t make you a skilled web designer.
Using a pagebuilder doesn’t guarantee design quality. No surprise. There’s a pagebuilder learning curve. You still need to learn good universal design principles – aka best practices. It’s disappointing when your site is of low quality. You need a speed strategy before you start. Say, “No!” to dull, faddish fluff that doesn’t matter and adds no real value.
How do you design a website to be fast from the start? Building for speed is called “origin optimization.” It happens even before the project begins. It’s not an emergency, after-the-fact, speed repair. It’s strategic.
Here’s what to do for WordPress origin optimization:
1Get the best shared hosting you can afford. What’s best? Find a normal host allowing writing to the .htaccess file on your server. Special hosting – like WP Engine – won’t allow this. That ability is important for plugin speed tricks. Don’t choose SiteGround. Their wild TTFB fluctuates and is erratic. Their servers are worse than mediocre for TTFB.
2Choose a host with stable TTFB (time to first byte) on your server. Excellent is 200 to 300 milliseconds. Ordinary is 500 milliseconds and poor is around 1 second or longer. One way to find out is by testing the hosting company’s home page TTFB using ByteCheck.com. That’s the best possible it will ever be. Do at least 6 tests. PagePipe.com gets about 500 millisecond TTFB on GoDaddy (blog) and 1.7 millisecond TTFB on BlueHost (store). We host at these services to prove our point. You can get good-enough speed on cheap shared hosting.
3Do NOT install SSL certification – unless you’re doing ecommerce. You don’t need SSL for simple email signups. SSL handshaking slows down your site globally by 500 milliseconds average. SSL does NOT improve your SEO. There’s no proof. But you can measure the heavy toll on speed.
4Don’t put an email signup API (like MailChimp services) on every page.
Have a single page with signup and use image or text links to that page. Use selective activation and only turn on your email plugin for that one signup page. Isolate the site drag.
5Use Twenty-seventeen default theme (48.4 milliseconds – after stripping Google Fonts). Live within its limitations. There are tons of articles online about how to customize Twenty-seventeen default theme. Why use it? Longevity. It’ll have an 8-year shelf-life. Don’t use Divi theme. It has a 1-second load time. Yes. That’s only the theme: Half your performance budget gone! Any theme is faster than Divi. Rather consider longevity a high value. Astra and GeneratePress are cool and fast. But they don’t have the potential longevity and risk-reduction of Automattic authorship.
NOTE: We’ve tested Twenty-nineteen theme for speed. While it is not as versatile as Twenty-seventeen, it loads in only 15 milliseconds. Dang fast.
Do NOT use free Cloudflare. It slows down your site with delays and 501 errors.
“Thanks for your time and feedback. You are definitely right about speed inconsistencies with free Cloudflare!” silvercoast-apartments.com, Portugal
When in doubt about some feature or frill, leave it out. What makes for a good website is content, not fancy things that move or animate. Like sliders, rotators, accordions, dropdowns, etc.
9Optimize your images with free “Imsanity” plugin. Other optimizer-plugin promises are seductive – and cost money. Don’t use free Smush plugin. Don’t use PNG format for photos. Use JPEG images and compress quality using your judgemental eye – and not a robot machine for a brain.
Can you survive without social media links? Do you have to have comments? Are you using Avatars (Gravatars)? These extras slow down your site and add little value.
Paid Yoast SEO plugin is the speed equal to 250 discrete plugins. Bad site drag.
Accept that your learning journey requires frustration and failures. Nothing worth doing is easy. There’s a price. Pay your dues by investing in your brain power. “You” have future value.
BONUS TIP – If you use WooCommerce plugin, the best speed you’ll often achieve is 3- to 4-second load times. Reduce your expectations.
A conversation with Arisara Thitimoon about speed, Elementor, and Astra theme:
Arisara: Just purchased the bundle, I can’t wait to get into this!
Steve: Thanks for sharing your speed learning and web adventures. Also, thank you for caring about speed. It’s all about being kind to users and showing them you want to provide a good experience. They sense that when the site loads.
Arisara: First of all thank you so much. After days of researching why my site was !@#$%^*, I finally come across your article that helped me understand that a website built with bloated code is unfixable and is better off being built in a clean manner.
Steve: I wish more readers would realize this. I usually get requests to fix the impossible. Web miracles!
Arisara: What I do: I work on small projects $1000 to $2000 and so workflow speed plays a significant role in how much my hourly rate is effected. This is why I opt to use a pagebuilder (Elementor Pro). I use this in conjunction with Astra Pro and the combinations is damn near perfect for my type of projects.
Steve: This is a good combination. We’ve used it before and we’ll use it again on some client sites. But not all sites need these methods. Some can be simpler.
Arisara: But I’m not satisfied with performance … I’m learning that a pagebuilder needs to be used with respect and my goal is to master every little detail that allows to build a clean website that loads fast.
Steve: Value analysis is something we borrow from industrial manufacturing. It’s a discipline to improve profitability and efficiency. It consists of 5 things: combination, simplification, elimination, standardization, and substitution. It’s attention to details and creativity combined. Those use two different sides of the brain.
“Respect” is the keyword. If you use strategy, doing value analysis on features and functions, you’ll build a fast site. Assuming your host doesn’t have a TTFB of 2 seconds or more. But many shared hosts have TTFBs below 1 second. 200 to 500 milliseconds is ideal. You can find out by using ByteCheck.com and type in the URL of the host’s homepage. Their speed will never be better than that. And of course, avoiding SSL if you can.
Arisara: My speed goals is 2 – 3 seconds per page.
Steve: Good goals. This is the performance budget. Everything you add nibbles into that budget.
Arisara: My speed question: What is your advice to an Elementor user for building fast sites and avoiding bloated code and crazy amounts of HTTP requests?
Steve: I steer clear of pagebuilders when I build solo. But my colleague, Matt Stern, uses this combination often. Elementor makes my speed job more challenging. If it’s a WooCommerce site then we’re fortunate to get under 3-second load times with Elementor.
Here’s a free plugin to help you create or restore the look of your multi-column homepage without Elementor:
It is authored by Tom Usborne, the developer of GeneratePress. While it
is possible to handcode this “CSS3 grid,” the plugin simplifies
everything. No pagebuilder needed or extra paid addons. Much faster
Keep reading below for more ideas.
Arisara: So far in my research, I’ve learned to use Astra features as a first priority (so create headers and footers in Astra, set up typography, etc)
Steve: Yes. You are on target. Here’s a quote from Matt Stern, my collaborator:
Here’s what I like about Elementor and Astra, having used them on different projects.
• Allows you to customize the entire theme (not just specific pages), this means you can use a drag-and-drop interface to customize your header, footer, blog layouts and more.
• Allows you near complete control of woo-commerce pages. See custom woo product page here: https://naturespiritherbs.com/product/kelp-fronds/. Again, you may not need this feature yet, but it will be a game changer if you decide to update your product pages.
• Leaves behind “clean code,” which can be reused if necessary. Divi leaves behind shortcodes which only apply to Divi and can’t be used elsewhere.
• Designed to be both customizable and fast. The fast part is an important consideration that many themes (even popular ones) seem to forget. One way Astra does this is by making some of its features modular. For example, if you don’t need to customize a particular aspect of a site, say the typography or the blog layout, you can turn “off” the customization for that specific part of your site, keeping your site leaner. See more here: https://wpastra.com/features/#performance
• Good Woo-Commerce customization “out of the box.” While Elementor allows for more in depth customization that take longer to implement, Astra has a nice set of options that are quick and easy to customize. https://thetoolmerchants.com/ was customized primarily with Astra and only used Elementor for certain pages.”
Steve: It takes good planning and cautious testing to not enqueue jQuery with a feature or plugin. Astra says their theme loads in under 500 milliseconds. But our real-world research shows it loads in less than 50 milliseconds! It’s WordPress core that adds the extra load time – about 300 milliseconds.
Arisara: Use custom CSS in my customizer to set default styling in elementor (btns, section padding, etc) so I don’t have to restyle every single element
Steve: Good job.
Arisara: Ditch the gimmicky features Elementor offers.
Steve: Amen. Try to avoid installing the Pro version if you can. Not only does it increase annual overhead $$$, but it doubles the load time of the free version.
Arisara: Reduce unneeded functionality like carousels, etc.
Yep. Sliders suck for UX and everything else that moves. Use static images instead.
Arisara: Disable fontawesome (got this from your article ).
Arisara: Optimize all images. I do this using Shortpixels site (everything on lossy).
Steve: ShortPixel plugin is good. But it isn’t always the best alternative. It adds 30 milliseconds of site drag to every page – if you keep it active. Resizing and compressing in a standalone image processor offline is always best (Gimp or Photoshop, etc.). Machines don’t make good decisions. One size doesn’t “fit all” in the image compression department. It requires a human eye.
REFERENCE: http://pagepipe.com/polite-pdf-downloads/ << about ShortPixel
Our preferred stopgap to prevent uploading oversized images is Imsanity plugin. It’s only necessary if you don’t control the media library.
Arisara: Avoid bloated plugins
Steve: Absolutely. Meaning avoid “popular” plugins.
Arisara: Don’t put complicated things in footers.
Steve: Good. Like email signups (MailChimp, etc). Use a central signup page and link to it instead.
Arisara: Disable any theme options / plugin / widgets that are not active.
Arisara: Reduce animations.
Steve: Mentioned that. No moving elements.
Arisara: Avoid all performance plugins (leave them till last).
Steve: Yes. And some speed plugins help scores – not milliseconds. Like minification, caching, etc.
Arisara: Don’t use a CDN (at least not right away).
Steve: CDNs are indicators the site wasn’t built for origin optimization.
Arisara: I’m probably barely scratching the surface. But if you have any tips, I would HIGHLY appreciate your expert opinion!
I’m really getting passionate about creating high quality designs and I’m prepared to invest the necessary time it takes to learn how to do it. So excited to read your ebooks.
Steve: Be patient. There ‘s a learning curve and new vocabulary. But I feel confident you’re a talented person and will be building “good stuff” soon.
Is there a reason we don’t like Astra for longevity?
Astra is a fast theme with 600,000+ active installations. That seems remarkable. And it is.
We know the theme (without WP core included) loads in under 50 milliseconds. Much faster than advertised. Bless them!
If you buy the pro version, it doubles the load time. If you buy their pagebuilder (templates?), things get slower and slower.
How many people support this theme? 45 according to their about page. And they’ve been in business for many years. That all seems pretty good. But is it better than WordPress theme authorship for long-term updates? No one matches that. Especially for default themes. Astra is NOT bad – but they don’t have the strong future of WordPress / Automattic. WordPress has a market valuation of over 1 billion dollars.
We use Astra on client speed sites. But not on our own sites, we try and stick with customized default themes. Not everyone codes. We can write CSS and figure things out. So it’s OK for us – but not everyone.
We include Astra on our *list of goodness*. Along with GeneratePress – who is only one guy and an assistant. But Tom Usbourne only supports one theme and that’s it. We also recommend Tiny Hestia and Twenty-seventeen default theme with Google Fonts stripped. They’re all about the same speed as Astra.
If Tom gets run over by a bus, GeneratePress is dead, too.
If all of San Francisco, USA (Automattic’s headquarters) fell into the ocean, miraculously the WordPress torch (core) will be picked up by others around the globe and carried onward. That’s a harsh incident we hope never happens. But it demonstrates how bulletproof WordPress is today and tomorrow.
We don’t hesitate to use Astra on a client site. But rarely our own. Hmm? What does that say about out opinion?