Why switch from PHP to NuxtJS?
The main reason why I decided to switch from PHP to NuxtJS is the following, I was making changes to the SpeedProxies landing site to have it load faster and get it to maybe improve my SEO ranking, the changes to the site started optimizing everything I can by minifying, using better cache policies, trying different web server softwares (nginx, apache), making use of cloudflare as our CDN and many other things to get the best performance out of the site until I hit a roadblock which was the fact I were using PHP and depending on our web server being in 1 location.
To find out what was causing down the slow down was happening when loading the site, it couldn't have been on the CSS, JS as I removed uncessarry code to make the loading of resources faster, so I decided to check the Network Timings of the page loading and saw this:
The waiting as you can see is quite high, so I checked further with other sites like (GTmetrix) which gave me a better insights on what's really slowing down the site loading.
Another reason why I wanted to switch to NuxtJS was that I wasn't making use of any PHP needed code for the landing site and plain HTML could have been done but NuxtJS had the tools that would have helped me expanding the site even more easily especially with it's changable configuration to reusing site components which lets me reuse part of my code in multiple pages for example the navbar or the footer which can help with code redability.
What changed after changing from PHP to NuxtJS?
After changing our site from PHP to NuxtJS I started making use of SSR which allows us to remove the burden of rendering the site on the client's side, also this would help with the SEO of the site as search engine crawlers will be able to easily scrape the site's data without having to render the JS of the site, also not every search engine's crawlers can render JS properly.
Additionally I started making use of a lot of the plugins it offered such as:
- PurgeCSS to remove unused css and inline to the pages that need them
- Sitemap to automatically make a sitemap and exclude certain pages from it
- Webpack with a custom config to optimize the site building process even more
Alongside with the switch from PHP to NuxtJS we also decided to change our hosting for the landing site from a OVH server to Cloudflare Pages which comes with a easy to use Git integration which automatically builds everytime we push a commit.
Since Cloudflare Pages is within Cloudflare's infrastructure there is no need for Cloudflare's caching system to reach my server to update it's cache.
This should means the latency to load the site should minimised as everything is hosted on Cloudflare. Here we can see the results of moving from PHP to NuxtJS and using Cloudflare Pages:
As we can see there is almost a 10x improvement for the TTFB (Time to First Byte) and the fully site load time which is close to half a second whilst before it could be upto 4 seconds. This should help with the site overtime as search engine crawlers read the site again and maybe help it with ranking against other sites, but the main thins is the potential customers staying on the site and being interested should be more than before.
Also if we look at our cache stats we can see a clear difference, what we would want to see is the cache being "Hit" which shows the CDN cache is working efficiently, and even if there are some misses its fine here because the site is hosted on Cloudflare anyways so the delay will be negligible if missed.
Before:
After:
Why NuxtJS instead of VueJS?
-
You can use SSR (Server Side Rendering) which allows for better SEO than traditional SPAs (Single Page App) built using VueJS, the way SSR works is that it fetches AJAX data and renders VueJS components into HTML and this data is then sent to browser asynchronously, this is excellent for search engine crawlers.
-
On NuxtJS the routing is automatically done based on the folder structure of your pages, unlike VueJS where its manually done.
-
With NuxtJS you can do code-splitting with webpack (which is included by default) and lets you optimize the site by reducing the size of the site's build bundles.
-
Smart Prefetching is a feature that lets you prefetch code-splitted pages which improves the front-end performance for users, since this runs on idle it has almost no effect on loading the site.
Example of Smart Prefetch
<NuxtLink to="/">
<a>/index</a>
</NuxtLink>
<NuxtLink to="/agile">
<a>/agile</a>
</NuxtLink>
