Improve performance

@cometto Thanks for creating this new thread.

Well done with getting the style sheet size down so much! I’ve written all of this to load a single style sheet for everyone to do any of the themes they wish, just by setting the parent class (or using either the theme or class parameters). It allows for easy changes in the design.

Loading compressed/minified versions of JavaScript and CSS:

• In the Options table (usually wp_options, look for the entry: google_business_reviews_rating_stylesheet and set this to compress.
• Similarly, you can do this for google_business_reviews_rating_javascript to compress.

You can view all the WordPress options in the database table using PHPMyAdmin or a database browsing plugin. This is an advanced setting and outside of the Dashboard interface. I will consider altering its position in a future version if there is a demand.

In your case, I would actually stick to your own CSS because this has just the styles you need and will be smaller when compressed. Please change all references of: .google-business-reviews-rating to just .gmbrr.

I am a little puzzled about how this plugin is still causing performance issues for you – particularly when you have your own limited CSS. If there are particular elements, CSS rules, issues that I can tackle – this can be incorporated into a future release. The HTML I’ve used is very well structured and not bloated with multiple levels of elements.

I’ll improve this FAQ entry because it is a little vague. I didn’t want to get too technical in this section, rather to show that it is possible and point in the general direction.

Thanks for the very positive comments and the ★★★★★ review, it’s always appreciated!

@designextreme

I opened phpMyAdmin and checked wp_options but there is nothing like google_business_reviews_rating_stylesheet. I browsed whole catalog and cant find anything like this… and anything with is similar to google or business

How to change references? ??

I uploaded content to header by shortcode + my custom css is set in Advanced -> custom styles.

• This reply was modified 3 years, 4 months ago by cometto.

@cometto If the option entry doesn’t exist, please add this. Note that the options table name may have a different prefix. You can perform a search of the option names using % as a wild card.

I’m busy for the next hour, I’ll be back to go in more detail a little later.

@cometto In PHPMyAdmin, in the wp_options table go to Search and specifically search for option_name %LIKE% google_business_reviews_rating. This will show you all the options associated with this plugin.

The CSS in Advanced | Custom Styles can also be placed in any location that’s used in your website. I recommend having a Child Theme and adding this to /wp-content/themes/your-theme/styles.css or the theme’s own custom styles. Naturally, just have this occur once.

@designextreme

OK, i found both:
google_business_reviews_rating_javascript
google_business_reviews_rating_stylesheet

current value is 1 for both. Should i put “compress” word?

I removed styles.css in flatsome options.
For applying css i use section: Customize -> styles -> Custom css and there are option for main custom css, tablets, mobile, etc.
– is there any difference between putting css here and in style.css?
– i tried to inject css from custom.css to Style -> but its very long – especially because of:
.star{display:inline-block;width:.8em;height:.7667em;background:url(data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0NiI+CiAgPHBhdGggZmlsbD0iI0U3NzExQiIgZD0iTTMzLjA2MSAyOC41MDlMNDcuNzIxIDE4SDI5LjYwM0wyNC4wMjguODIyIDE4LjQ1MyAxOEguMzM1bDE0LjY2IDEwLjUwOS01LjU3OCAxNy4xMTIgMTQuNjExLTEwLjY1NUwzOC42MzkgNDUuNjR6Ii8+Cjwvc3ZnPg==)
and similar lines to it…. I thought it is better to keep it in separate file.
What should I do?

Sorry for many questions ??

• This reply was modified 3 years, 4 months ago by cometto.
• This reply was modified 3 years, 4 months ago by cometto.
• This reply was modified 3 years, 4 months ago by cometto.
• This reply was modified 3 years, 4 months ago by cometto.
• This reply was modified 3 years, 4 months ago by cometto.

@cometto For everyone generally, change the: 0 or 1 value to the word: compress.

For you, I would keep the stylesheet off (0) using your own instead and only compress/minify the JavaScript.

@designextreme

OK, I set JS to “compress” and stylesheet to “0”.

How can I add css properly? In previous message I desribed differend methods and places. Code is very long…. What can you advise?

• This reply was modified 3 years, 4 months ago by cometto.

@cometto I spotted your reply after I wrote mine.

CSS/JavaScript optimisation: I can’t really comment on your theme, just offer advice for applying styles generally. I do recommend just setting this in one place that is easy for you to manage and edit as needed. The functionality in Advanced | Custom Styles is to offer customisations to people who may not know where to look in their theme or if they don’t use or understand how to edit styles in the Child theme or just to make it more approachable. So, for the styles associated with this plugin, add this to a file/Dashboard area/whatever that you feel comfortable using and that will be consolidated and compressed using the service of your choice (unless done manually).

All the styles for this plugin can be set for all devices. There are minor changes in layout for larger screen/windows.

I hope this helps!

@designextreme

Thank you for your time but i back to first version…
CSS injected to customize -> css increase blocking time on all pages…

@cometto It sounds like you’re getting there. Disabling the style sheet and add your own CSS to your theme’s Customize | CSS…

If you want to debug the performance issues and don’t have any specifics, disable both the style sheet and the Javascript (using the options mentioned). Test this for performance and then gradually add more ingredients until you identify the negative change.

Your optimisation process is difficult for me to comment on or offer specific suggestions because I lack the detailed information needed to make these conclusions.

@designextreme

1 more question:
– ok I will try to remove both css stylesheets
– I will put individual css styling to my theme by Customizer
– which shortcode should I use?

For now im using: [reviews_rating theme=”fonts tiny” name=no link=”write review” vicinity=no icon=no stars=on limit=0]

It gives me simple, small styling with google icon, rating, stars, and reviews count – I would like to maintain this styling.
Should i remove theme and base on [reviews_rating] + name=no link etc?

• This reply was modified 3 years, 4 months ago by cometto.

@cometto If you are using all your own CSS, you can simply apply the “fonts” and “tiny” theme alterations in your own CSS without needing to actually specify it here.

Perhaps this is all you need to get the desired effect:

[reviews_rating theme="tiny" summary="rating, stars, count" limit=0]

It will remove the icon, name, vicinity from the HTML, leaving just the rating, stars and count as shown. The limit to zero is important (if not set in the Setup tab) to show no reviews. If you keep the theme to tiny, it will handle the attribution differently.

This is all just a suggestion and requires the appropriate (not extensive) CSS to realise it.