-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Load CSS and JS First, PRELOAD #1278
Comments
NOTES
|
At this time, we have been severely affected by the blocked CSS and JS, Google seems to be unable to render our platform correctly, and this seems to be affecting our SEO results. All other platforms and websites that I have tested, including our About page, do not have this rendering issue, nor do none of our competitors. The goal is to have the platform rendered the same way every other platform and website so that we can revert the downtrend of visits and indexed pages. From what I have verified, we need to preload the JS and CSS to guarantee that they are correctly loaded. Example:
=== To preload JS and CSS resources when they are created during the build process in SvelteKit, you can use the preload property in the SvelteKit configuration file (svelte.config.js). Here's how you can do it: Open the svelte.config.js file in the root directory of your SvelteKit project. Inside the configuration file, locate the kit property, which contains the SvelteKit configuration settings. Add a preload property under the kit configuration, specifying an array of JS and CSS files to preload. For example:
Replace /path/to/my-script.js and /path/to/my-styles.css with the actual paths to your JS and CSS files that you want to preload. Make sure to run the SvelteKit build command (npm run build or yarn build) to generate the optimized build files with the preloaded resources. Note that preloading all JS and CSS resources may not always be necessary or optimal for every website. Consider carefully which resources are critical for initial page load and preloading those to strike a balance between performance and resource utilization. |
Rendering seems ok, but the CSS seems to be having a few problems when accessing the platform: |
Working now. |
The latest solution of a single .js has resulted in getting the rendered working majority of the time. I will be closing this issue since the reported major problem is resolved and start opening other tasks to achieve the best results possible. |
* issue: #1278 * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; dynamic svg import; * issue: #1278; cont; dynamic home-page comp import; * issue: #1278; cont; dynamic home-page comp import; * chore: Makefile; package.json; update; * doc: vite.config.ts; * issue: #1478; Test Header; logic; mobile-first; * issue: #1478; Test CSS-Js variable communication; * issue: #1478; vite.config.ts update; * update: #1478; all-css-chunk.css; * Revert to e92886 -> home/Layout.svelte; * update: #1478; all-css-chunk.css; * update: #1278; empty preloadStrategy; * update: #1278; preloadStrategy -> preload-js; * update: #1278; preloadStrategy -> preload-js; * upd: #1278; preloadStrategy -> preload-js; cont; * upd: #1278; preloadStrategy -> preload-mjs; cont; * upd: #1278; build::manualChunks homepage single; * upd: #1278; build::manualChunks cont; * upd: #1278; preloadStrategy -> modulepreload; * upd: #1278; build::manualChunks cont; cssJsChunk; * upd: #1278; build::manualChunks cont; * upd: #1278; src/app.html hardcode all CSS; * revert to ab873 -> vite.config.ts; * doc: svelte.config.js; vite.config.js; * update: +layout.server.ts revamp; * update: +layout.svelte revamp; * del: +layout.ts in favour of .server.ts; * doc: [[lang=lang]]/+page.ts; * chore: remove firebase/common.ts; * feat: sessionStore add deviceType; * chore: app.html clean; * chore: utils/debug.ts clean; * chore: utils/dates.ts clean; * chore: utils/platform-functions.ts clean; * chore: utils/languages.ts clean; * chore: api/utils.ts clean; * chore: u/[view]/[lang=lang] page.server.ts; * update: all homepage widgets entry .svelte; * update: homepage main Layout.svelte; * chore: update debug logs on few components; * issue: #1478; vite.config.ts update; * update: src/hooks.server.ts; * update: Auth_Widget.svelte; * pkg: ua-parser-js; mansory-layout; device-dete-js; * chore: svelte.config.ts; * issue: #1478; vite.config.ts update; compression; * update: +layout.svelte add SplashScreen; * update: Makefile; * update: +layout.svelte revert SplashScreen; * update: +layout.server.ts add setHeaders(..); * update: svelte.config.ts; add pre-compress; * update: Makefile; * update: Makefile; * issue: #1478; vite.config.ts update; minfication; * issue: #1478; homepage widgets (some) dynamicload; * issue: #1478; homepage widgets (cont) dynamicload; * issue: #1478; single-chunk and in-head css; * chore: add analytics to app.html; * doc: svelte.config.ts; * issue: #1278; adjusting dynamic importing v6.5 * issue: #1278; home/Layout.svelte dynamic v6.5; * chore: Email-Sub; Offline-Alert; Plat-Alert v6.5; * chore: Makefile update; * chore: package.json update; * chore: translation.ts ; * chore: +layout.svelte v6.5; * chore: [[lang=lang]]/+page.svelte v6.5; * chore: [[lang=lang]]/+page.ts v6.5;
* chore: add vscode/snippets.code-snippets; * chore: Footer re-structure; * chore: app.css comments + clean; * update: +layout Footer re-structure; * chore: components/home/leagues-list -> v6; * chore: components/home/leagues-table -> v6; * chore: components/home/seo-block -> v6; * upd: +layout league-list; league-table; seo-block; * update: vscode/snippets.code-snippets; * update: Makefile; * update: Makefile; * update: package.json > scripts; * update: package.json > scripts; * update: package.json; * update: vscode/snippets.code-snippets; * Feature/1421/user-profile-withdraw (#1479) * feat: #1421; new Withdraw Widget-Main + Modal; * feat: #1421; new Withdraw assets; * feat: #1421; new Withdraw Widget ref +page.svelte; * chore: clean store/user-settings.ts; * doc: OpenApi adjust for Tx to DB action endpoint; * feat: #1421; new balance Firebase upd func; clean; * feat: #1421; endpoint /api/data/profile POST add; * update: app.css for global form > input; clean; * feat: #1421; add Withdraw-Widget Profile/Menu-Opt; * feat: #1421; endpoint /api/data/profile; cont; * pkg: @scores-lib ➤ 1.4.0; * issue: #1483; * pkg: ibantools 4.3.3; * pkg: @scores-lib ➤ 1.4.1; * issue: #1483; withdraw-fixes; cont; * issue: #1486; * issue: #1485; * issue: #1486; cont; * issue: #1488; * issue: #1491; * issue: #1497; #1489; #1495; * issue: #1497; cont; * issue: #1504; * issue: #1506; * issue: #1507; #1502; * issue: #1508; * issue: #1497; * issue: #1497; cont; * issue: #1497; cont; * pkg: @scores-lib ➤ 1.4.4; * issue: #1491; * pkg: @scores-lib ➤ 1.4.5; * issue: #1491; adjust show more action text; * issue: #1498; * pkg: @scores-lib ➤ 1.4.6; * issue: #1498; types update; * chore: firebase secrets; * chore: firebase secrets; * Issue/1278/pre load css js (#1510) * issue: #1278 * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; * issue: #1278; cont; dynamic svg import; * issue: #1278; cont; dynamic home-page comp import; * issue: #1278; cont; dynamic home-page comp import; * chore: Makefile; package.json; update; * doc: vite.config.ts; * issue: #1478; Test Header; logic; mobile-first; * issue: #1478; Test CSS-Js variable communication; * issue: #1478; vite.config.ts update; * update: #1478; all-css-chunk.css; * Revert to e92886 -> home/Layout.svelte; * update: #1478; all-css-chunk.css; * update: #1278; empty preloadStrategy; * update: #1278; preloadStrategy -> preload-js; * update: #1278; preloadStrategy -> preload-js; * upd: #1278; preloadStrategy -> preload-js; cont; * upd: #1278; preloadStrategy -> preload-mjs; cont; * upd: #1278; build::manualChunks homepage single; * upd: #1278; build::manualChunks cont; * upd: #1278; preloadStrategy -> modulepreload; * upd: #1278; build::manualChunks cont; cssJsChunk; * upd: #1278; build::manualChunks cont; * upd: #1278; src/app.html hardcode all CSS; * revert to ab873 -> vite.config.ts; * doc: svelte.config.js; vite.config.js; * update: +layout.server.ts revamp; * update: +layout.svelte revamp; * del: +layout.ts in favour of .server.ts; * doc: [[lang=lang]]/+page.ts; * chore: remove firebase/common.ts; * feat: sessionStore add deviceType; * chore: app.html clean; * chore: utils/debug.ts clean; * chore: utils/dates.ts clean; * chore: utils/platform-functions.ts clean; * chore: utils/languages.ts clean; * chore: api/utils.ts clean; * chore: u/[view]/[lang=lang] page.server.ts; * update: all homepage widgets entry .svelte; * update: homepage main Layout.svelte; * chore: update debug logs on few components; * issue: #1478; vite.config.ts update; * update: src/hooks.server.ts; * update: Auth_Widget.svelte; * pkg: ua-parser-js; mansory-layout; device-dete-js; * chore: svelte.config.ts; * issue: #1478; vite.config.ts update; compression; * update: +layout.svelte add SplashScreen; * update: Makefile; * update: +layout.svelte revert SplashScreen; * update: +layout.server.ts add setHeaders(..); * update: svelte.config.ts; add pre-compress; * update: Makefile; * update: Makefile; * issue: #1478; vite.config.ts update; minfication; * issue: #1478; homepage widgets (some) dynamicload; * issue: #1478; homepage widgets (cont) dynamicload; * issue: #1478; single-chunk and in-head css; * chore: add analytics to app.html; * doc: svelte.config.ts; * issue: #1278; adjusting dynamic importing v6.5 * issue: #1278; home/Layout.svelte dynamic v6.5; * chore: Email-Sub; Offline-Alert; Plat-Alert v6.5; * chore: Makefile update; * chore: package.json update; * chore: translation.ts ; * chore: +layout.svelte v6.5; * chore: [[lang=lang]]/+page.svelte v6.5; * chore: [[lang=lang]]/+page.ts v6.5; * chore: fix merge errors; * fix: adjust hardcoded CSS; * (empty commit); * fix: adjust vite.config.ts; * chore: firebase secrets; * github: workflow secrets; * github: workflow secrets;
Since we are having issues because of CSS not being loaded, we need to load it first to try to surpass the mobility issues:
By default, SvelteKit will prioritize loading the critical CSS necessary for rendering the initial view, then load additional CSS files as needed. However, if you want to ensure that all CSS files are loaded before the page is displayed to the user, you can try a few different approaches:
Use the preload attribute: You can add the preload attribute to your CSS link tags to indicate to the browser that the file should be loaded early. For example, you might add the following code to your head section:
Inline critical CSS: You can also consider inlining the critical CSS directly into the HTML document using the style tag. This will ensure that the critical CSS is loaded before any external CSS files. For example:
Combine CSS files: If you have multiple CSS files, you may want to consider combining them into a single file to reduce the number of requests made to the server. This can improve page load times and ensure that all CSS is loaded before the page is displayed. You can use a tool like PostCSS or Sass to combine your CSS files during the build process.
Keep in mind that loading all CSS files upfront can increase page load times, so it's important to test the performance impact of these changes and optimize your CSS accordingly.
The text was updated successfully, but these errors were encountered: