Brooklyn theme CSS loading slowly on mobile

Technical Q&A
1

I’m using the Brooklyn theme, and am testing the store for loading speed on mobile, getting a mediocre score at best:

https://pagespeed.web.dev/report?url=https%3A%2F%2Frenown.skin%2F

The main problems seem to be CSS and JS in the theme:

https://cdn.shopify.com/s/files/1/0503/3207/4153/t/3/assets/timber.scss.css?v=8698531388341138443

https://cdn.shopify.com/s/files/1/0503/3207/4153/t/3/assets/theme.scss.css?v=17134313834066854128

https://cdn.shopify.com/s/files/1/0503/3207/4153/t/3/assets/jquery-2.2.3.min.js?v=5821186314690718683

Those seem to be holding up the main thread inordinately long. Is there something that can be done about this?

2

Hi @dantobias ,

I have checked your site in the page speed tool. your website score is very low.

oscprofessional_0-1640758421146.png
oscprofessional_0-1640758421146.png1535×869 104 KB

3rd party apps & codes which take time to load and their size . They decrease the speed.

oscprofessional_1-1640758487990.png
oscprofessional_1-1640758487990.png1002×831 45.4 KB

https://cdn.shopify.com/s/files/1/0503/3207/4153/t/3/assets/timber.scss.css?v=8698531388341138443

https://cdn.shopify.com/s/files/1/0503/3207/4153/t/3/assets/theme.scss.css?v=17134313834066854128

https://cdn.shopify.com/s/files/1/0503/3207/4153/t/3/assets/jquery-2.2.3.min.js?v=582118631469071868…

Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. For CSS you need to use critical CSS.

Need to work on following points

  • Theme Upgrade if there is a scope and upgraded theme available
  • Reduce JS Payload.
  • Use Critical CSS .
  • Reduce Large Image Sizes
  • Compress Images
  • Limit Third Party JavaScript & Shopify Apps
  • Preload Web Fonts.
  • I would suggest limiting to one and using a standard web font.

See where exactly google speed index tools want you to target your code to optimize the site .

First Contentful Paint

  • Eliminate render-blocking resources

  • Reduce server response times (TTFB)

  • Avoid multiple page redirects

  • Preload key requests

  • Avoid enormous network payloads

  • Serve static assets with an efficient cache policy

  • Avoid an excessive DOM size

  • Minimize critical request depth#### Total Blocking Time:- Reduce Unnecessary JavaScript loading, parsing, or execution.

    • Reducing JavaScript payloads with code splitting, removing unused code, or efficiently loading third-party JavaScript.#### Speed Index- Minimize main thread work
    • Reduce JavaScript execution time
    • Ensure text remains visible during web font load

    Cumulative Layout Shift

    • Cumulative Layout Shift measures the movement of visible elements within the viewport

    By fixing these issues, your website speed score can definitely improve.

    And we will provide an assured guarantee plan for the website speed optimization.

    For more details please check the link below.

    https://www.oscprofessionals.com/shopify-performance-optimization/

    If anything is missed out or unclear then don’t hesitate to ask. Email us or Connect with us on Skype

    Have a nice day !

3

Brooklyn is one of, if not the most unopitmized shopify free theme.

You should 100% take a look at dawn, if performance is a priority.

If you want, I have a version of brooklyn I opitmized a bit as an exercise, I can send you the files, and rough instructions, but you’ll have to implement my changes yourself. You can DM if you want for them.