Performance Archives - 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.

General Information

porto_admin — Mon, 15 Oct 2018 02:36:59 +0000

We recommend using the Fast Velocity Minify and WP Super Cache, W3 Total Cache plugins to boost your site performance.

Excluding pages from the cache

If using caching plugins, make sure you exclude the following pages from the cache through their respective settings panels:

Cart
My Account
Checkout
Wishlist

These pages need to stay dynamic since they display information specific to the current customer.

The post General Information appeared first on Porto Documentation.

Fast Velocity Minify

porto_admin — Mon, 15 Oct 2018 02:38:22 +0000

This plugin reduces HTTP requests by merging CSS & Javascript files into groups of files, while attempting to use the least amount of files as possible. It minifies CSS and JS files with PHP Minify (no extra requirements). Please check this for more details.

You can use this plugin with WP Super Cache plugin.

Please install and activate Fast Velocity Minify plugin.
Please check your site after complete the configuration.

The post Fast Velocity Minify appeared first on Porto Documentation.

WP Super Cache

porto_admin — Mon, 15 Oct 2018 02:40:38 +0000

This plugin is very fast caching plugin for WordPress.
Please reference here for more details.

You can use this plugin with Fast Velocity Minify plugin.

Please install and activate WP Super Cache plugin.
Please go Settings > WP Super Cache on admin sidebar.
Please configure the Easy, Advanced, CDN, Contents, Preload, Plugins, Debug sections.
Please check your site after complete the configuration.

Important!

You should exclude the my account, cart, checkout, wishlist pages if you are using woocommerce plugin.

Please check the recommended options in Advanced section.
Please add the following code in Accepted Filenames & Rejected URIs if you are using YITH Woocommerce Wishlist plugin.

The post WP Super Cache appeared first on Porto Documentation.

W3 Total Cache

porto_admin — Mon, 15 Oct 2018 02:42:18 +0000

This plugin is the most highly rated and most complete WordPress performance plugin. It dramatically improve the speed and user experience of your site. It adds browser, page, object and database caching as well as minifing and content delivery network (CDN) to WordPress.
Please reference here for more details.

Please install and activate W3 Total Cache plugin.
Please go Performance > General Settings on admin sidebar.
Please configure the General, Page Cache, Minify, Database Cache, Object Cache, Browser Cache and more sections.
Please configure the more options in the sub menus of Performance on admin sidebar
Please check your site after complete the configuration.

Important!

Please add mfunc to the Ignored comment stems option in the Minify settings.
Please add /wishlist* to the Never cache the following pages: option in the Page Cache settings if you are using YITH Woocommerce Wishlist plugin.

The post W3 Total Cache 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.

Merge stylesheets in a file

porto_admin — Fri, 06 May 2022 05:17:00 +0000

If you activate this option, it can increase the your site speed. Because it reduces the request count and it is able to cache files.

Merge javascripts and stylesheets

After compiling the dynamic CSS to files, separated files will be created for each page inside the uploads folder. And you can realize your site work at a better speed.

After Optimized: Reduced network requests to 40%

Before optimized

After merged stylesheets(css & js) into a single file, if you update pages or theme options and some various theme & plugin settings, you must recompile css and js.
Please see below image.

Finally, after optimized you can see top incredible performance. Please see Beauty and Dentist Demo

The post Merge stylesheets in a file appeared first on Porto Documentation.

Ongoing Feature – Full Site Editing (Soft Mode)

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

Full Site Editing (Soft Mode) – a New Feature that boosts to a huge development

We have proposed a new feature. Too delicate, complicated settings must have been disturbing your understanding but now this new feature has arrived to liberate you.

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.

Now it’s possible to edit anything. Say goodbye to word “static”. You can build any type the way you want or simply download it using studio.

The post Ongoing Feature – Full Site Editing (Soft Mode) appeared first on 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.