Improve performance

  • Resolved cometto

    (@cometto)


    4 years, 4 months ago

    Referring to our conversation from the previous topic – I am opening a new thread regarding optimization and reducing the impact on website performance while loading the plugin.

    You wrote:
    /@cometto Did you see the new addition in the latest version? I’ve added a compressed version of the style sheet and JavaScript files. Please check the second to last FAQ entry for details. One big improvement you can apply is using the parent class: .gmbrr instead of the longer one.’
    For the inline SVG data, I recommend using your own style sheet to either point to an external image (if that’s the issue) or you can use the HTML entities instead (see my previous reply). It sounds as though you’re not reliant on any inline images or otherwise, so you’ll be able to load everything very quickly in your website./

    Unfortunately, it is not clear to me. I checked the FAQ and it says that you can edit the appropriate options. What exactly should I do?

    At the moment, the steps I have taken:
    1. The plugin loads 1x js (js.js) and 2x css (css.css and custom.css). With the AssetCleanupPro plugin, I disabled css.css (it was large) and only loads custom.css (in which I manually entered the styles that interest me). The file then weighs 11kb instead of 119kb of the main css style.
    2. I don’t know completely what I should do as the next step you described. Could you describe more precisely what needs to be done? I am convinced that it will be useful to many people – the plugin is amazing and it should be in everyone’s interest to display it in an interesting place (in my case at the top of the page, which just affects the performance)

    Thank you in advance

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

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Noah Hearle

    (@designextreme)

    4 years, 4 months ago

    @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!

    Thread Starter cometto

    (@cometto)

    4 years, 4 months ago

    @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 4 years, 4 months ago by cometto.
    Plugin Author Noah Hearle

    (@designextreme)

    4 years, 4 months ago

    @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.

    Plugin Author Noah Hearle

    (@designextreme)

    4 years, 4 months ago

    @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.

    Thread Starter cometto

    (@cometto)

    4 years, 4 months ago

    @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 4 years, 4 months ago by cometto.
    • This reply was modified 4 years, 4 months ago by cometto.
    • This reply was modified 4 years, 4 months ago by cometto.
    • This reply was modified 4 years, 4 months ago by cometto.
    • This reply was modified 4 years, 4 months ago by cometto.
    Plugin Author Noah Hearle

    (@designextreme)

    4 years, 4 months ago

    @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.

    Thread Starter cometto

    (@cometto)

    4 years, 4 months ago

    @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 4 years, 4 months ago by cometto.
    Plugin Author Noah Hearle

    (@designextreme)

    4 years, 4 months ago

    @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!

    Thread Starter cometto

    (@cometto)

    4 years, 4 months ago

    @designextreme

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

    Plugin Author Noah Hearle

    (@designextreme)

    4 years, 4 months ago

    @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.

    Thread Starter cometto

    (@cometto)

    4 years, 4 months ago

    @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 4 years, 4 months ago by cometto.
    Plugin Author Noah Hearle

    (@designextreme)

    4 years, 4 months ago

    @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.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Improve performance’ is closed to new replies.