⚡️ How do I make my WordPress site load like this? ⚡️

[DerangedWolf]

I don't know what terminology should be used for this kind of loading, but it's fast, and the website almost works like an app.

Here's an example: https://thoslite7sfq4.zyrosite.com

I've seen a lot of WordPress sites load like this. So basically, the first load takes time, that's it.

The website works like an app after that. It works similarly if you turn on preload in WordPress using WP Rocket, but it's not this perfect.

It feels like on the first load, the website saves all the necessary assets in the browser and then uses them for all the other pages as well.

It's so fast that there's no loading in the browser when you click an internal link.

What's the best way to achieve it in WordPress?

 

[Dopious]

Short answer; Headless WordPress if you want that speed with WordPress.

 

[Deleted member 731332]

Either learn react and php or hire a web dev that does!

 

[terrycody]

It's made by a new CMS system called:

Zyro​

https://builtwith.com/thoslite7sfq4.zyrosite.com

 

[Ababba2]

Probably they are using Varnish or other server-side accelerators like that. This basically "save" page in the server so that when you load a page, it's like a html static site.

 

[MisterF]

It's made by a new CMS system called:

Zyro​

https://builtwith.com/thoslite7sfq4.zyrosite.com

Looks ok, £2.20 /month is pretty cheap

 

[DerangedWolf]

Short answer; Headless WordPress if you want that speed with WordPress.

If I go with WordPress as the CMS, then which front-end do you suggest? Something that's fast and easy for non-coders to implement.

It's made by a new CMS system called:

Zyro​

https://builtwith.com/thoslite7sfq4.zyrosite.com

Yeah, it's a website builder by Hostinger

Probably they are using Varnish or other server-side accelerators like that. This basically "save" page in the server so that when you load a page, it's like a html static site.

I use Cloudflare to cache everything but still, I don't have this 'app-like' performance

Looks ok, £2.20 /month is pretty cheap

Yeah, but all the plans are per site. That's a bummer because you'll have to pay this recurring amount for all the sites you host.

 

[Dopious]

If I go with WordPress as the CMS, then which front-end do you suggest? Something that's fast and easy for non-coders to implement.

I have not really experimented with Headless WordPress yet, hopefully someone else can answer this for you.

 

[MasonF]

By creating a lightweight theme yourself if not you can use nitropack.

 

[NulledCode]

Next JS and WordPress if you want headless WP and a blazing fast website.

Here's a good starter for people interested: https://www.cloudways.com/blog/use-react-with-wordpress-to-create-headless-cms/
This is a good plugin for people wanting to roll your own headless WP: https://wordpress.org/plugins/headless-wp/
Or, you can always use this: https://frontity.org/. I haven't used Frontity yet, but it's one I will try out on my next project.

 

[Scorpion Ghost]

Jetpack lazy load for images will do that for images.

But it irks me to scroll down and wait a milisecond or a second for the image to load. How dare you?!!!

So i dont use it

 

[DerangedWolf]

Jetpack lazy load for images will do that for images.

But it irks me to scroll down and wait a milisecond or a second for the image to load. How dare you?!!!

So i dont use it

If this was Reddit, I would repost it on r/yesyesno

Next JS and WordPress if you want headless WP and a blazing fast website.

Here's a good starter for people interested: https://www.cloudways.com/blog/use-react-with-wordpress-to-create-headless-cms/
This is a good plugin for people wanting to roll your own headless WP: https://wordpress.org/plugins/headless-wp/
Or, you can always use this: https://frontity.org/. I haven't used Frontity yet, but it's one I will try out on my next project.

Will give it a try, thanks

By creating a lightweight theme yourself if not you can use nitropack.

Nitropack is so expensive

 

[1ksao]

You can also use https://instant.page/ which helps to replicate the effect of preloading the pages.

 

[tacopanaya]

If I go with WordPress as the CMS, then which front-end do you suggest? Something that's fast and easy for non-coders to implement.

I just finished installing my first Headless WP website using Frontity as @NulledCode recommended. I highly recommend this setup, because I think it's the future of WordPress: last year Automattic acquired Frontity. They're working in WordPress core itself: https://wptavern.com/automattic-acquires-frontity-founders-to-work-full-time-on-gutenberg

Automattic is the team behind WordPress.com, WooCommerce, Jetpack, Akismet, Gravatar, Tumblr and so on.

I's not exactly a setup for non-coders, but it's something you might hire someone to do for you easily and without spending too much. If you have experience with WordPress and JS you're good to go. I don't have much experience with JS but I was able to set it up.

Frontity is a framework created especially for running in WP as backend server and React in frontend.

Basically you need two servers: a PHP one for the backend (any server capable of running WP is enough) and another one for your Frontend.
Vercel is the way to go for the frontend server: https://vercel.com/
They're the creators of Next.JS themselves and they have a free pricing plan for starters.

If you want to start with it you can check Frontity Documentation: https://docs.frontity.org/

 

[desertz1]

If you go the headless react route, with a Wordpress backend, have a look at gatsbyjs

 

[DerangedWolf]

You can also use https://instant.page/ which helps to replicate the effect of preloading the pages.

I'm already using it, still not working as the site I shared in the original post

If you go the headless react route, with a Wordpress backend, have a look at gatsbyjs

There are so many frontend frameworks. Everyone recommends a different one. What should I look for when choosing a front-end?

I'm not a coder

 

[NulledCode]

There are so many frontend frameworks. Everyone recommends a different one. What should I look for when choosing a front-end?

I'm not a coder

Choosing "the right" frontend framework can easily send anyone down the paralysis by analysis path. Gatsby and Next are the biggest boys on the block. I favor Next only because I've seen more retail sites use them, and Next just clicks with me. I've never tried Gatsby because Next gets done what I need so I'm not going to switch or have a need to switch.

 

[She Hulk]

May be on the premium litespeed webserver, as well as integrating the premium dns cache plugin and the WordPress rocket plugin

 

[Ashk881]

I don't know what terminology should be used for this kind of loading, but it's fast, and the website almost works like an app.

Here's an example: https://thoslite7sfq4.zyrosite.com

I've seen a lot of WordPress sites load like this. So basically, the first load takes time, that's it.

The website works like an app after that. It works similarly if you turn on preload in WordPress using WP Rocket, but it's not this perfect.

It feels like on the first load, the website saves all the necessary assets in the browser and then uses them for all the other pages as well.

It's so fast that there's no loading in the browser when you click an internal link.

What's the best way to achieve it in WordPress?

That's called an SPA. Single Page Application.

You don't see any loading after the first load because there's no loading. The website doesn't make calls to the server for resources.

All content and the site is packaged in into bundles which get sent by the server. The bundle contains javascript code which generates the pages.

The only way you do this with wordpress is by a custom frontend and wordpress api running headless.

Also you might not want to do this. This is first but it's also horrible for seo. Crawlers that don't execute javascript can't see anything. Google has only recently gotten ability to parse js and you shouldn't be relying on that if seo is your goal on sites like these.

 

[Ashk881]

There are so many frontend frameworks. Everyone recommends a different one. What should I look for when choosing a front-end?

There aren't "many" different frameworks.

There are 3 major frontend libraries out there. React, Vue and Angular. React and Vue are more of a library and are just core libraries so there are extensions.

Nextjs is an extension of react that adds features like server side rendering and bundle organization and stuff. Same with Nuxt, it's an extension to Vue.

These 5 are the major ones. Everything else are new kids on the block looking to be the next big js frontend framework. Apart from a few like Svelte and Inferno and gatsby( another react extensions) none of them are as mature as these 5 libs.