How to Optimize CSS and JS for Faster Sites

Website loading speed is crucial to the user experience, which is often overlooked by website owners. Raising website loading speed from 8 seconds to 2 seconds can increase conversion rate by 74%, meaning slow websites may lose nearly half of their potential customers.

Code compression, i.e. removing characters that are only used to improve readability, can reduce bandwidth usage and increase page loading speed. Tools like CSS Miniifier and JSCompress can help you through this process. Furthermore, it is also worthwhile to consider implementing asynchronous code loading to further optimize performance before compressing JavaScript.

Redundant or duplicate code can also slow down the website. Use the built-in developer tools in Google Chrome to help identify and delete these unnecessary code resources. It is important to regularly check and remove unused code to maintain optimal website performance.

This article is sponsored by Aussie Hosting. Thank you for supporting the partners who made SitePoint possible.

User experience is the most important factor in the success of your online business.

Whether you run a niche blog, a SaaS website, or an online store, if you have ruined the audience’s experience in some way, don’t expect to convert them into paid customers.

The good news is that any brand can systematically improve the user experience by narrowing down factors within a specific page.

For example, Loading speed is an issue that most website owners are prone to overlook.

Increase your website speed from 8 seconds to 2 seconds based on conversion rate data may result in a 74% increase in conversion rate.

This means that a slow website may cost you nearly half of your potential customers. Use PageSpeed ​​Insights to learn more about the situation

To determine the issue that affects the loading speed of your website, you can use Google PageSpeed ​​Insights. This is a free tool that automatically scans both desktop and mobile versions of your website.

In addition to the detected problems, PageSpeed ​​Insights also displays some actionable suggestions.

For website owners who have never considered page loading speed, you may encounter the following issues:

These indicate that your CSS and JavaScript code is slowing down your website. While this may sound like the job of a full web developer, they are fairly easy to optimize with the help of tools.

Without further ado, here are the steps you need to take to compress

your CSS and JavaScript resources.

Determine the code to compress

Code compression refers to the practice of removing characters that have no other functions than improving readability.

For example,

inline comments

can help developers understand the role of specific code segments. While this is useful for review or debugging, they may also increase the size of the code.

Compression removes these extra characters—and thus reduces bandwidth usage and improves page loading speed.

Using PageSpeed ​​Insights, you can easily identify the code that needs to be compressed. Simply click Show How to Fix and follow the path in your CMS (Content Management System) or FTP (File Transfer Protocol) client.

For example, if your website runs on WordPress, all the code should be integrated into the "Editor" section. This can be found through the Appearance tab in the main dashboard.

Optimize your code

Now that you have found the relevant code, it's time to learn how to compress them.

The easiest way to compress code is probably to use automation tools. For CSS and JavaScript, some of the best tools are CSS Miniifier and JSCompress.

Using CSS Miniifier

CSS Miniifier is a free and simple tool that automatically compresses CSS resources. You just paste the code into the input field, set the compression level, and click Compress.

It can take several seconds to one minute to compress the code depending on the size of the code. The new code can then be copied back to your CMS or FTP client interface.

Important Tips: As a precaution, don't forget to create a backup before making any changes to the website code. Creating offline or cloud-based replicas is an easy way to do it.

To test if your compression is valid, run another analysis on PageSpeed ​​Insights. Your recently compressed CSS file should no longer appear under the "Compressed CSS" details.

#### Using asynchronous loading on JavaScript

Correct compression of JavaScript is slightly trickier compared to CSS. Before running your code with JSCompress, consider implementing asynchronous code loading.

is also called "delayed loading" - but in the context of JavaScript, asynchronous loading works by dynamic loading functions.

To use asynchronous loading, just add the "async" tag when calling the .js file. This can be done in the HTML source code of your website.

The following is an example of how to do this:

<code> src=”yourscript.js” async> >
</code>

You can refer to this article for more information on how it works and how it is used. If you are completely unfamiliar with HTML, read this beginner's guide until you are satisfied with the basics.

Combining JavaScript files

Another point worth mentioning when optimizing JavaScript is to combine files into a single page. Doing so will reduce the number of HTTP requests made by the browser, which will inevitably speed up loading time.

For example, do not call multiple .js files in the source code:

<code> src=”yourscript.js” async> >
</code>

You can use the editor to combine them into a single JavaScript file and then call them at once:

<code> src=”http://www.yoursite.com/menu.js”> >
 src=”http://www.yoursite.com/tools.js”> >
 src=”http://www.yoursite.com/footer.js”> > 
</code>

To further improve the processing time of the script, you can also practice omitting the "http" and "type" tags. For example, do not use:

<code> src=”http://www.yoursite.com/all.js”> >
</code>

You can simply use:

<code> src=" http: //www.yoursite.com/all.js" type="text/javascript" > ></code>

Using JSCompress

Lastly, using JSCompress is as simple as using CSS Miniifier. Just paste the code into the input field and click the "Compress JavaScript" button.

Next, navigate to the Output tab to view compressed JavaScript:

Delete redundant code

Another performance issue that your website may have is the presence of redundant or duplicate code. These are usually caused by deleted page elements, causing the code to remain unused.

A good way to find redundant code is to use the built-in developer tools in Google Chrome. This can be enabled by opening the main menu, selecting "More Tools", and clicking "Developer Tools".

When doing this, make sure you are on the page you want to optimize.

When the developer tools are activated, look for "Coverage" in the "More Tools" subsection of the settings menu.

This will open the "Coverage" tab in the developer console. There, click the Detection Coverage button to start the test.

After the test is complete, you should see a list of code resources and their unused bytes. This is indicated by the red and green bars on the right.

If this is your first time checking for redundant code, you will notice that there is a mix of CSS and JavaScript resources in the list. Double-check these to find out what is not in use.

Deleting all unnecessary code resources one by one can be cumbersome. But if you want to provide a perfect user experience, then this is necessary.

Also, remember that unused code may accumulate over time, so schedule another time to revisit and clean your repository.

Conclusion

For non-developers, optimizing website CSS and JavaScript code sounds too technical on the surface. However, with the right tools and web hosting, you don't need to be an experienced web developer to achieve this.

FAQs on Optimizing CSS and JS to Speed ​​Up Websites

What are the benefits of optimizing CSS and JS for a website?

Optimizing the CSS and JS of a website can significantly improve its performance. It reduces the loading time of the website, thus providing a better user experience. Faster sites are more likely to retain visitors, thereby increasing engagement and conversion rates. Additionally, website speed is a ranking factor for search engines like Google, so optimizing your CSS and JS can also improve your SEO.

How to compress my CSS and JS files?

Compressing CSS and JS files includes removing unnecessary characters such as spaces, line breaks and comments without changing their functionality. You can use online tools like HTML Compressor or CSS Miniifier. Just paste the code into the tool and it returns a compressed version that you can replace into the website file.

What is the difference between asynchronous loading and lazy loading of JS?

Asynchronous loading and lazy loading are techniques that control how JS files are loaded on websites. Asynchronous loading allows the browser to continue rendering the page when loading a JS file. On the other hand, delaying loading delays loading of JS files until the HTML document is fully parsed. Both technologies can improve website performance, but the best choice depends on the specific needs of the website.

How to optimize my CSS delivery?

Optimizing CSS delivery involves reducing the number of CSS that needs to be loaded before the page is rendered. This can be achieved by inlining critical CSS, delaying non-critical CSS, and eliminating unused CSS. Tools like PurifyCSS can help you identify and delete unused CSS in files.

How does browser caching improve website performance?

Browser cache stores static files of the website in the visitor's browser. This means that during subsequent visits, the browser does not need to re-download these files, thereby speeding up loading time. You can enable browser caching by adding specific directives to the .htaccess file or using a cache plugin if your website is using CMS like WordPress.

What impact does image optimization have on website speed?

Images usually occupy the largest part of the web page size. By optimizing your images, you can significantly reduce the amount of data you need to load, thus speeding up page loading time. Image optimization techniques include compressing images, using appropriate image formats, and implementing lazy loading.

How to measure my website performance?

There are several tools available to measure website performance, including Google's PageSpeed ​​Insights, GTmetrix, and Pingdom. These tools provide performance scores and detailed information about the site area that can be optimized for speed.

What role does the Content Delivery Network (CDN) play in website speed?

CDN is a network of servers located around the world that store copies of static files on the website. When a user visits your website, the CDN delivers these files from the server closest to the user, reducing the time required for data transfer and thus improving website speed.

How does server response time affect website speed?

The server response time is the time it takes for the server to respond to a browser request. Slow server response times can delay web page loading, negatively affecting user experience and SEO. You can improve server response time by optimizing server configuration, upgrading hosting plans, or using CDN.

What is HTTP/2 and how does it increase website speed?

HTTP/2 is the latest version of the HTTP protocol, which contains performance improvements such as multiplexing, header compression and server push. These features allow faster and more efficient communication between the browser and the server, thereby increasing website speed. To take advantage of HTTP/2, both your server and user's browser must support it.

The above is the detailed content of How to Optimize CSS and JS for Faster Sites. For more information, please follow other related articles on the PHP Chinese website!