How to improve the performance of https://szinhaz.online/

🙋Get Help
1

Opening question:

Regarding the performance of the homepage I’ve been taking a quick look. These are my suggestions:

Improve how you work with fonts

I can see once you load the home it makes a lot of calls to fonts.googleapis.com, as you are loading a lot of fonts. You may want to select the formats you are using and self-host them in your project.

Reduce the number of fetches

I’ve also seen that you are doing a lot of fetches. You may want to give it a thought and try to reduce them.

For example, I can see that you are doing one fetch for each folder doing https://yoursite.com/wp-json/wp/v2/folder?slug=hir, https://yoursite.com/wp-json/wp/v2/folder?slug=interju… You could just fetch https://yoursite.com/wp-json/wp/v2/folder and populate state.source.folder with all of them (they are just 8 right now).

I can only see you are fetching many times your posts filtering by folder: https://yoursite.com/wp-json/wp/v2/posts?_embed=true&folder=23&order=asc&orderby=menu_order&page=1, https://yoursite.com/wp-json/wp/v2/posts?_embed=true&folder=24&order=asc&orderby=menu_order&page=1 … You could create a Custom Post Type to fetch all these posts, as we are doing with movies in our test. If you want to keep them inside posts, you could do all the fetchs again in the same call, doing something like this: https://yoursite.com/wp-json/wp/v2/posts?_embed=true&folder=23,24,25,26...,

Cache your API response

Not sure if you’re already doing this, but if not I’d recommend you to do so. We’re currently using this plugin and it works pretty well so far.

Use a CDN for your images

I think you’re already doing this, but if not you can use JetPack free CDN, which also converts them into webp format, that is the next gen format recommended by Google.

Use LightHouse perfomance report

Apart from the things mentioned before, you may want to run a test of your site at https://web.dev/measure/ and follow the suggestions it gives you, they are usually quite interesting.

1 Like
2

Thanks @SantosGuillamot!

  • I use AWS Bucket for Images at the moment, but it would be probably faster with Jetpack, I will migrate soon…
  • Thanks for the REST cahce tip, I activated the plugin!
  • I will do your first two tip (fonts, fetch) too soon.
3

I try to reduce the number of fetches, as you suggested, but I got stuck.
I created a handler, where I fetch all the folders (Custom Taxonomy for Posts) by their ID-s, and also all the posts in the folders:

const FoldersHandler = {
  pattern: "/folders/:ids",
  priority: 1,
  func: async ({ route, params, state, libraries }) => {
    const { ids } = params;

    const foldersResponse = await libraries.source.api.get({
      endpoint: "folder",
      params: {
        include: ids,
        per_page: 100,
        head_tags: false
      }
    });
    libraries.source.populate({ state, foldersResponse });

    const response = await libraries.source.api.get({
      endpoint: "posts",
      params: {
        folder: ids,
        per_page: 100,
        _embed: true
      }
    });
    await libraries.source.populate({ state, response });

    const pages = libraries.source.getTotalPages(response);
    if (pages > 1) {
      let requests = [];
      for (let page = 2; page <= pages; page++) {
        requests.push(
          libraries.source.api.get({
            enpoint: "posts",
            params: {
              per_page: 100,
              page
            }
          })
        );
      }
      const responses = await Promise.all(requests);
      await Promise.all(
        responses.map(response =>
          libraries.source.populate({ state, response })
        )
      );
    }
  }
};

Then in my home.js:

React.useEffect(() => {
  actions.source.fetch("/folders/" + folderIds);
}, []);

After this, in frontity.state.source I have all the posts and folders as I expected.
But I do not know, how to get the posts in a folder from state.source.
I tried it like:

const data = state.source.get("/folder/"+slug);

But that was not working. The console.log(data) looks like:

isFetching: false
isReady: false
link: "/folder/budapest/"
page: 1
query: Object {  }
route: "/folder/budapest/"

And I also get a TypeError: response is undefined error.
If I delete these lines from my handler, I still get all the folders and posts in frontity.state.sorce, but without the TypeError:

const foldersResponse = await libraries.source.api.get({
      endpoint: "folder",
      params: {
        include: ids,
        per_page: 100,
        head_tags: false
      }
    });
libraries.source.populate({ state, foldersResponse });

But still don’t know how to get the posts in a Folder.

4

I think the problem could be caused because you have to make sure to populate state.source.data in order to use state.source. get() later. You can check in your console if you can find the data at your /folder/slug/ urls and if not that could be the problem.

If that’s the case, you have to make sure to populate state.source.data.folder with each one of the items (/folder/slug) using something like Object.assign, including all the info you need:

Object.assign(state.source.data[folder-link], {
    id,
    total,
    totalPages,
    taxonomy: "folder",
    isArchive: true,
    isTaxonomy: true,
    isFolder: true,
    ...
});

You may want to add an items field with all the posts of the specific folder. You can take a look at the current handlers.

6

Which ones?

I reread and reread your answer, but I can not figure it out, how to solve this. I created a new post about it: Fetch multiple taxonomy with containing posts at once

7

I’ve splitted the discussion from the original one as it wasn’t related to the original question anymore :slightly_smiling_face:

Regarding the handlers, I was referring to the ones in the @frontity/wp-source package and the docs about them, but let’s keep the conversation in the new discussion you opened.