You searched for Critical CSS - Porto Documentation

How to improve site speed

porto_admin — Wed, 15 Jun 2022 01:33:13 +0000

Porto provides Speed Optimize Wizard to improve the site speed. You can make Google Lighthouse general indexes higher as you like but the performance is not. After compiling Speed Optimize Wizard, how can you increase the poor Google Lighthouse Performance on desktop and mobile also. Describe this Faq with insurance Demo. As a direct metric of site performance, not a lot – FCP & LCP

1. How To reduce FCP time.

FCP stands for First Contentful Paint. This metric reflects the time at which the first text or image is painted.
FCP happens when the first text and image elements are rendered. Resources are blocking the first paint of your page. So you should deliver critical JS/CSS inline in head tag and defer all non-critical JS/styles. For this, you should generate Merge js & css in a file & Critical CSS.

Before

After

2. How To reduce LCP time.

LCP stands for Largest Contentful Paint. This metric reflects the time at which the largest text or image is painted. The reason of low LCP is that largest content is not preloaded or is not shown by javascript execution. You can confirm this factor in the Original Trace. If you find, it’s ok to load unnecessary js in the footer or preload image. When you generate Critical CSS, Porto gathers preload images and fonts. But sometimes Critical CSS engine doesn’t preload some of them. in this case, you have to input image or font in the Speed Optimize Wizard/Performance for preload.

Preload custom image

Before

After

3. How To improve the performanc on Mobile.

Porto provides Conditional Rendering. On mobile unlike desktop, site doesn’t request the high quality image and complex animations. So that you can rebuild the other section of first screen more easily. Renewable Energy Demo increase the mobile performance over the 90 too.

The post How to improve site speed appeared first on Porto Documentation.

Critical CSS

porto_admin — Fri, 06 May 2022 05:03:54 +0000

Critical css helps you reduce the rendering time.

Probably, your site has too many style codes and not all of them are used at first time. Because of that, they make to only serve the CSS that’s being used on that page and that’s commonly referred to as critical css. After making critical css, the download amount is certainly lower than before and it will improve performance too.

Enable Critical Css

There are many features to improve the performance and First Contentful Paint is one of the most important feature. So Generate critical css to reduce the rendering time and get a better speed.

The post Critical CSS appeared first on Porto Documentation.

Porto Speed Optimize Wizard

porto_admin — Mon, 15 Oct 2018 02:35:47 +0000

Porto comes with it’s own amazing speed optimization tools, you can use these speed optimization tools at Porto > Speed Optimize Wizard. By using this optimizer you can reduce web page resources like js/css files about 500~800 KB for each page compared to other themes.

1. WPBakery & Shortcodes

This tool might help you to optimize WPBakery and Porto shortcodes css files by removing unused shortcode styles.

2. Revolution Slider

This tool might help you avoid loading Revolution Slider js/css resources for the pages which don’t use Revolution Slider.

3. Performance

This tool includes several kinds of optimization possibilities.

WordPress JPG Quality – This option might optimize your site by controlling the quality of images.
WordPress Max Image Size (width or height) – This option might optimize your site by setting the threshold for image size.
Lazy Load Images – This option might optimize your site by loading your page resources lazily( In other words, loading your page resources only when really need them ).
Lazy Load Sub Menus – This option might optimize your site by loading your sub menus lazily.
Preload Icon Fonts – This improves page load time since the browser caches preloaded icon fonts.

4. Other Minify

This will help you to set up general optimization settings.

Minify CSS/JS – This will minify all css files which Porto theme generates such as skin, dynamic_style, shortcodes, etc. Also if you check this option, it uses minified javascript files.
Enable Web Font Loader for Google Fonts – By using this option, you can increase page speed about 4 percent in Google PageSpeed Insights for both of mobile and desktop.
Optimize Bootstrap – By using this option, you can use bootstrap features only what Porto theme used. This will reduce around 150KB of page resources.
Optimize FontAwesome – By using this option, you can use fontawesome icons only what Porto theme used. This will reduce around 40KB of page size.
Dequeue Gutenberg block style – By using this option, Gutenberg block styles will not be enqueued if they were not used in the site. This will reduce around 150KB ~ 200KB of page size.
Dequeue Emojis Script – By using this option, you can remove WordPress’ emojis script.
Dequeue jQuery Migrate Script – By using this option, you can disable jQuery migrate script. Please use this option if you are not using any deprecated jQuery code.
Disable Unused Content Types – By disabling unused content types, you can reduce server response time and free up server space by deleting thumbnail files for these content types.
Disable Unused Templates Builders – By disabling unused template builders, you could optimize your websites perfectly.

5. Advanced Optimize

Porto will help you to increase the speed of your site and it offers a poweful yet simple mode of builders only, which means we eliminated all unnecessary and duplicated options.

Disable Mobile Sliders – Disable slider feature for elements in mobile.
Merge javascripts and stylesheets – Compile the dynamic CSS to files (a separate file will be created for each page inside of the uploads folder).
Enable Critical CSS – If you check this option, you can see it in the admin menu. It helps your site to reduce the rendering time and increase the google page speed.
Activate Soft Mode – If you active this mode, most of options are removed. In this mode, you can use only template builders to full-site edit. Theme options and metaboxes that are unnecessary and overridden are removed. You will be no longer disturbed from complicated relationships of options.

The post Porto Speed Optimize Wizard appeared first on Porto Documentation.