gantry / gantry5

:rocket: Next Generation Template / Theme Framework
http://gantry.org
1.03k stars 203 forks source link

Errors when checking [JS]/[CSS] loading #3273

Open universewrld opened 6 days ago

universewrld commented 6 days ago

While testing a site with the @Gantry 5 template via @Google PageSpeed Insights, I found the following errors related to the js/css:

  1. Reduce JavaScript execution time Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to reduce Javascript execution time. изображение
  2. Eliminate render-blocking resources Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn how to eliminate render-blocking resources. изображение
  3. Reduce unused CSS Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS. изображение
  4. Minify CSS Minifying CSS files can reduce network payload sizes. Learn how to minify CSS. изображение
  5. Minify JavaScript Minifying JavaScript files can reduce payload sizes and script parse time. Learn how to minify JavaScript. изображение
  6. Missing source maps for large first-party JavaScript Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. Learn more about source maps. изображение

Joomla 5.1.4, Gantry 5.5.19

N8Solutions commented 17 hours ago

@universewrld This is going to be on you to optimize your website. I will provide some tips for you.

You need to make sure that you have enabled "Production" mode in Gantry 5 instead of "Development" mode. https://docs.gantry.org/gantry5/configure/extras.

You will want to use a CDN like Cloudflare. While not necessary, it will help.

You should use SEO tools to compress and minify the html, css, & js yourself. Here are some great extensions I use to accomplish this from Kubik-Rubik.de.

JCC - JS CSS Control allows you to disable JS or CSS files that aren't needed on specific pages instead of loading everything. With this plugin, the loading of JS and CSS files can be easily controlled. You may suppress loading those files on pages where they are not needed. This might be important for example at the frontpage for optimizing loading times. The plugin is able to exclude those files globally or just on selected pages.

DSC - Device Specific Content can help you to load text and modules, etc... based on the detected device type. Take control of the content displayed on your website. Go beyond merely hiding content with CSS breakpoints on your Joomla! website. With the Device Specific Content Pro (DSC) plugin you can render or not render content specifically for a desktop, tablet or mobile device.

PCE - Page Cache Extended not only caches the files and is a replacement for the Joomla cache, but it also works with the DSC extension I linked above and creates Device Specific files. Page Cache Extended generates copies of the rendered pages and loads the entire output on further requests from the previously generated cache files. By loading the content from static files, no database queries have to be processed. This improves the loading speed greatly!

EPB - Easy Performance Booster speeds up the loading time of your Joomla! website. This plugin improves the loading performance significantly by minifying, concatenating and caching static files (JavaScript and CSS) and minifying the main HTML output.

LLFJ - Lazy Load for Joomla With this plugin, images are only loaded when a visitor scrolls to the images.

I use more of his extensions than this but those are specific to your request.

I also use this Critical Path CSS Generator to speed up page load times.

What is this Critical Path you're talking about? The critical path is the path to render a web page - what's needed before that can happen. CSS Stylesheets block rendering. Until the browser has requested, received, downloaded and parsed your stylesheets, the page will remain blank. By reducing the amount of CSS the browser has to go through, and by inlining it on the page (removing the HTTP request), we can get the page to render much, much faster.

I hope this information helps you to speed up your site and get the results you are looking for.

universewrld commented 10 hours ago

@N8Solutions I did not ask for information about the chat bot with AI, I indicated in the screenshot links to specific Gantry files, and not to all the style and script files that are on my website.

This is a @Gantry problem, not the entire website, and here are the files that relate to Gantry, and not to all components of my website.

You didn't even try to look at the screenshots of what files I pointed to. what a superficial judgment on the issue.