I saw that Nuxt 2 stores data in json files called payload.js in SSG mode.
Instead to store these data in json files, is it possible to store the data directly in HTML files, after the generation ?
Thanks
After an offline discussion, I've concluded that OP's main issue was more of a heavy image usage (≈40MB of .png) + other basics Web Core Vitals to get fixed rather than some prefetched pages set by Nuxt.
I've also provided the following links to improve the overall performance of their SSG app:
https://web.dev/learn/
https://www.patterns.dev/posts/
https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/
The goal being to do 20% of the heavy work for 80% of no-comprise better metrics. The rest being more advanced/subject to internal discussions as of how to proceed regarding the respective drawbacks.
Related
Suppose I have a website and it has the option to choose a language, then all the content (text) changes, where is it better in terms of performance to store this content?
I would build a translation file on the client side, is that right? (Also for sites where the content is huge)
Storing on the client-side all huge content translation list would be fine as long as you get this context from API and only 2 languages allowed. The client browser can handle that.
Hoverwer if you were having more than 3 languages translated texts, I would advise you to get these translated contents for each language from API.
From personal experience, We recently developed an app with 2 language options, and all the texts are on the client-side, but we face some issues on pages where we have texts more than 25 pages long. For us, it's just one page where users hardly visit. So we don't care, but if this issue were mostly for all pages, I would be using the server-side.
In Shopify:-
When my for loop code run then this issue occurred:-
"There was a problem loading this website
Try refreshing the page.
If the site still doesn't load, please try again in a few minutes."
console error is
"Failed to load resource: the server responded with a status of 502 ()"
How to fix it.
Seems like your Shopify site has too many collections and products within them so it just fails to load all of them due exceeding memory limits.
I'm assuming that you're trying to replicate the page from the reference URL you provided in your comment. Consider one of the options below to implement the required functionality:
Create different automated collections for each price range using Product price is less than condition. This approach is good as it uses Shopify's engine to generate collections, but it still might be quiet tricky to implement grouping as on the ref site you provided in comments.
Load collections and its products using AJAX requests i.e. request the data only when a customer is scrolling the page down. It will increase page load speed and will slightly decrease the Shopify site load but still is not ideal as data still will be requested on every page load and scrolling down events. You can slightly improve the situation by caching results on the clients' side, but again, is not ideal still.
Create a custom Shopify application that syncs products with your database. Then you can create an URL on your server that will be used as a data provider for your page. It can be requested via AJAX and return JSON with all the products, grouped by collections and matching the request parameters e.g. price less than X.
You can go further and add a proxy extension to your app. Shopify proxy would allow you loading a custom page directly from your server with the data from your database and render it within Shopify site like a part of itself.
In general, this approach gives you more flexibility on data to output, which can also be cached on your side to increase page speed load drastically.
Personally, I would prefer the last option.
Our clients website load really slow on the first load (the TTFB on the page document can be 10-20s). If I reload the page, the site loads a lot faster.
This may be because of a lot of the files are cached?
Website is here: https://www.mortels.com.au/
This happens for a lot of the pages.
I have tried merging some of the .css files, and will try to attempt the .js files if I cannot find anything else (I never built the original theme, so finding it hard to figure out what is done where and do not have much experience with developing in Shopify.
I also tried adding a lazyloader however it doesn't look like it is working.
Would anyone have any solutions to make the website load quicker? Could it be just the apps we have running on the website causing the initial response to be so slow?
One of the things that can hinder your site's load speed is having too much logic happening through Liquid tags. Shopify has to parse all of the page's Liquid code before it can serve the page, and that has a direct effect on the TTFB
For the files that have unacceptable TTFB ratings, some things you can try to do to help make Shopify's servers serve your content faster include:
Reducing the number of lookups (eg: through all_products[handle] on the page
Avoiding nested for whenever possible
Replacing loops with map whenever you need to make an array of values
Rewriting logic-heavy sections to run in Javascript instead of Liquid (and using the | json filter to drop your liquid variables in a Javascript-friendly version)
Hope this helps!
I have a vue3-app that serves as the frontend of an asp.net core 2 api.
Much of the requested data gets used by multiple components. And in order not to make multiple identical requests, i want to store the response-data in my vuex-store if it's not in there already.
The problem is, that most of that data changes a lot, so i need to be able to tell vuex to refresh the data after some time.
But i don't want to refresh all of the requested data, since some of it doesn't need to be refreshed as often and some not at all (for example a list of countries).
So what I need is a way to tell vuex wheter i want to save the response of a specific axios request forever, or to re-request it after a set amount of time.
My questions are: Is there a plugin for this that I couldn't find? And if not, how could i implement the described functionality without rewriting it for every request?
There are some axios cache projects available:
axios-extensions (LRUCache)
axios-cache-adapter (localforage)
cachios (node-cache)
The 2 most popular currently are axios-extensions and axios-cache-adapter
Source of the chart
There is a library axios-cache-adapter that is a plugin for axios, to allow caching responses.
It is a great solution for implementing caching layer that takes care of validating cache outside of application's data storage logic and leverages it to requets library instead.
It can be used with both localstorage and indexedDB (via localforage library)
I am new to Shopify and Liquid. While reading I came up with an doubt that which of the two options are good:
If site is hosted on Shopify i.e. Shopify is a server:
Client request to server and server renders the HTML pages.
Client request to server and server converts liquid files to HTML pages and then renders.
clearly 2) will take time.
I have read the use of liquid is that we can use logic there. But still are we not taking extra time to render the page. So, why we are doing this?
When you let Shopify turn Liquid constructs into HTML, it takes the templates and data from the servers and securely turns them into strings of HTML. It then renders complete HTML in your browser.
You cannot screw up the data since you have no access to it except via correct and allowed controls built in to Shopify
they can render those strings faster than you ever could, so speed is not really an issue
They let you screw up your page load time in plenty of other ways, like non-optimized images, non-minimized CSS and JS... but for the most part, you should be very happy Shopify uses Liquid. It means you can focus on your job without worrying about petty things you should not be worried about. Plus you get global CDN for assets, making your shop fast in all corners of the wired globe, something you could not do on your own, cheaply.