How can I boost site speed by optimizing JavaScript and reducing server response time?

[ETNA]

Hello!

On the admin panel, I got a message that I can increase the speed of the site by optimizing some options. I got interested and started studying.
The main slowing down the speed I was shown 2 problems:
1. It is necessary to delete unused code JavaScript
2. It is necessary to reduce the time before receiving the 1st byte from the server

Can someone tell more about these options? Has anyone made such an optimization?

[Artzen_tech]

Hello @ETNA
Its Artzen Technologies! We will be happy to help you today.

Speed optimization is the process to enhance the site speed and make it load faster then ever.
I can definitely share some vital information regarding the speed optimization and process to be followed in the same.

The things that need to be kept in mind for the speed optimization are:-

1.) Minimal CSS and Javascript→ First and foremost task in speed optimization is to minimise the additional use of Javascript and CSS. Because too much CSS and Javascript make the code file heavy which leads to the slow loading of the page that eventually affects our website speed. So, while doing speed optimization or designing a webpage one must keep in mind not to add additional or garbage css or javascript.

2.) Optimised and compressed images→ Images are also the major factor which affects the speed of the website. If the size of the images used in the website is too large then it will take time to load and make the website heavy and hard to load. So the images must be optimised (i.e. reducing the file size of the image as much as possible, without sacrificing its quality) and compressed (i.e. a process applied to a graphics file to minimise its size in bytes without degrading image quality). If the image is uploaded in the proper manner then it will work without any hassle.

3.) Remove unnecessary code, comments and spacing→ When there is too much code or comments or spacing in the file, then the file or page will definitely become heavy. So, to overcome this issue, while doing speed optimisation the developer should remove and avoid writing unnecessary codes. He should also avoid the extra comments or the commenting codes. Instead of commenting codes which are not useful, he should delete them to maintain the speed of the website. The extra or the unnecessary spacing should be taken care of and dealt with. These spacings make the code file heavy which eventually lead to slower website speed.

4.) Remove unnecessary apps with their codes in theme→ Sometimes to reduce the work-load the developer install and add the additional apps. But sometimes the apps which are added to websites are unnecessary and with no work. The apps also take their space in the theme file of shopify which make the theme.liquid file heavy. As we all are aware that theme.liquid file is the building block of the website in shopify because it includes all the css files, JS files, Jquery and other important files. So, the theme.liquid file should be kept load-free. The unnecessary app date should be removed from the file to maintain the website speed.

5.) Using pre-load for css→  The preload attribute specifies if and how the author thinks that the media file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances. Basically, it gives you more control over how the resources on the web-page load. Below is the screenshot for how to use preload.

6.) Use defer and async for Javascript files→ Deffer is a boolean attribute which is set to indicate to a browser that the script is meant to be executed after the document has been parsed. Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating. So, while speed optimising, defer should be used for the javascript files.
Async programming is the technique that enables the program to start a potentially long-running task and still be able to be responsive to the other events while the task runs, rather than having to wait until the task has finished.
So, hereby for speed optimization defer and async functions are to be used compulsory for the javascript codes to enhance the speed of the website. 

7.) Use only rendered code and remove extra code→ While designing a website, the program or code files should be kept properly. Large or extra codes should be avoided and must be written if there is something important which can’t be avoided. Rendered code should be applied in place of large codes. Rendered code means that the code which is written in some other file and included in some other file. This type of code reduces the size of the file because in a file or template there is so much code that it becomes heavy and takes time to load.
Extra code in the file which is not required should be removed and kept in a snippet or in a different file, so whenever the requirement for that code arises, just simply render that snippet.

You can like and accept the solution if this helped you in any case.
 

Let me know if need further assistance
Regards,
Artzen Technologies

[Stacy_Zhuk]

Hello @ETNA,

Yes, our Whidegroup team has large experience optimizing website performance for our client's websites built on Shopify. One of the examples is described on our website in Case studies section. The case is called - GENERATE. Speed Optimization for Japanese Designer Furniture and Accessories Store. (I'm not sure if I can provide direct links here, Shopify can ban me)

If you need any assistance, please, let me know.

Best regards,
Anastasia