Dawn theme Page Speed optimization checklist

Technical Q&A
1

Hi everyone,

I Dawn theme I need a checklist for page speed optimization.

1 Like
2

@ErSanjay ,

Please share the store URL.

3

Hi @ErSanjay ,

Here below are the two websites that you can use to know your website speed issues:-

  1. https://gtmetrix.com/
  2. https://pagespeed.web.dev/ (for both mobile & desktop)

All the best,
CedCommerce

1 Like
4

Thanks lot all here more details

@oscprofessional here is link https://docs.google.com/document/d/10m1riwZdxM3eYF0m1U7yVtsW7RSWMi2z7bYfCBc0Gvg/edit?usp=sharing
@Ecom_Swift please check
@Cedcommerce thanks for the answer

I am using https://pagespeed.web.dev/ I am using the dawn theme.

ErSanjay_0-1664951127403.png
ErSanjay_0-1664951127403.png994×463 38.5 KB

one more was image size but I can see the dawn has proper set image size !!

ErSanjay_1-1664951184249.png
ErSanjay_1-1664951184249.png994×356 50 KB

5

Please share the store URL. You can also use Google Page Speed to see your speed issues, which need to be optimzied

6

@ErSanjay ,

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

oscprofessional_0-1673432948156.png
oscprofessional_0-1673432948156.png1194×715 105 KB

Properly sized images

The Opportunities section of your Lighthouse report lists all images in your page that aren’t appropriately sized, along with the potential savings in kibibytes (KiB). Resize these images to save data and improve page load time

For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.

Specify multiple image versions and the browser will choose the best one to use:

For Example:



Before





After



The tag’s src, srcset, and sizes attributes all interact to achieve this end result.

You need to work on following points :

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

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

For more details please check the link below.

https://www.oscprofessionals.com/blog/shopify-speed-optimization-guide/

If anything is missed out or unclear then don’t hesitate to ask. We will surely help you.

Have a nice day !