Reducing CSS, Non-Redering Javascript and Other Factors To Site Speed

Happy Sunday To You All,

I hope you are having a great Sunday today.

We’re having some issues at present with our clients’ Shopify site, which currently has a score of 7, and now we have completed the site-building process, we now need to reduce some of the mitigating factors that are reducing the speed and score of the site.

The report from https://gtmetrix.com/reports/www.glassimages.co.uk/EmylKtGf/, highlighted quite concerning factors that mostly relate to Non-rendering Javascript, Reder blocking resources, CSS and, massive amounts of network payloads- (see links below)

We are looking to eliminate each factor one by one starting with the following:

Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.

STYLESHEETS WITH @IMPORT STATEMENTS AND THE STYLESHEETS THEY IMPORT

The following code relates to the widget above:

@import "https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700";@import "https://d19ayerf5ehaab.cloudfront.net/css/product-widget/style.css";body.reviews-popup,html.reviews-popup{overflow:hidden!important;height:100%!important}.ruk_rating_snippet{color:#67c116}.ruk_rating_snippet .ruk-rating-snippet-count{color:#333;font-size:12px;position:relative;bottom:2px;font-family:Verdana;line-height:22px}.ruk_rating_snippet i{letter-spacing:2px;font-size:16px;line-height:22px;cursor:pointer}#reviews_fade{background:rgba(0,0,0,.7);top:0;left:0;right:0;bottom:0;position:fixed;overflow:auto;padding:10px;z-index:5989!important}#reviews_fade.iphone iframe{max-height:90%!important;pointer-events:none!important}#reviews_container{margin-top:10px;position:absolute;margin:0 auto;max-width:700px;margin:20px auto;background:#fff;left:10px;right:10px;padding:10px 0;border-radius:2px}#reviews_container .close{background-color:#1b1b1b;border-radius:20px;color:#fff;cursor:pointer;font-size:20px;height:25px;left:-12px;line-height:25px;position:absolute;text-align:center;top:-13px;width:25px;z-index:100}#reviews_container .close:hover{background:#fff;color:#000}#reviews_containers .close span{font-size:12px}#reviews_widget{margin:0 15px}

With the following options available to solve the issue.

Option One;

<link rel="stylesheet" type="text/css" media="handheld" href="style2.css">

Option Two:

<link rel="import" href="style2.css" async>

We’re not sure if this will make any difference minutely to the speed score, however, we would be very grateful for any help your community can offer us with these site issues.

Thanking you in advance.

Kindest Regards,

Michelle

Hello, @brandpanelmedia

If you could move the style sheets into the asset folder and then embed them using source tags, it might be faster. → https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src

The sure way to tell what is slowing down the site during pageloads is to check an inspector which comes with most browsers while the page loads.

Another way is to use lazy loading of assets. All said, the inspector is your best friend as it shows how long each item of your page loads and the milliseconds it takes to load.

Hi @David_Weru

Thank you for your reply to our question earlier this evening.

We will have a look at the link you sent earlier, and take on board your suggestion to move the assets and install lazyloading to the theme.

Have a good Monday.

Kindest Regards,

Michelle

Hello, Ms. Michelle

You’re welcome. Also, thank you for marking my answer as the solution.