Optimizing JS and CSS site code online - a detailed guide

Listen to this article

Website JS and CSS code optimization, is one of the most significant aspects of technical website optimization. The reason for this is the release of more site resources, due to the reduction of database calls and improved readability of the code structure itself.

As a rule, JavaScript and CSS code optimization significantly increases the site response speed. Thus, the site works faster and loads the server part less seriously.

The content of the article:

• JS and CSS code - what is it?
• Optimizing JS and CSS code - why do you need to optimize scripts and styles?
• Gzip module for Apache, Nginx and Node.js
• Optimize Javascript with Minification
• CSS optimization for web font usage
• Using the appropriate font download option
• Code optimization online
• Minify JS and CSS with CMS Wordpress plugins

JS and CSS site code - what is it?

JavaScript and CSS are common programming languages, each of which brings certain functionality to the site. Thanks to the use of the main web programming languages HTML, JS, CSS, an ideal user interaction with the site is achieved.

JavaScript is a common programming language. Allows you to create various scripts. Most of these scripts are executed in the user's browser. JavaScript enhances the user's interaction with the site. Bringing out a certain set of information using mini-applications (scripts) on the site. Visualization and output of JS scripts occurs by connecting the latter in the HTML code of the page. Almost all sites use JS (JavaScript) in their composition.

css - refers to one of the main programming languages of the site. CSS (style file) - carries information about the appearance of almost any element of the site. From color and location to the notorious animation of a particular page element.

Optimization of JS and CSS code - why is it needed?

JS and CSS - by themselves, they have a fairly large weighty code that has a lot of superfluous. It is difficult for a browser to read a huge canvas of codes in a fraction of a second. Thus, the loading of the page and the entire site as a whole slows down. The optimization of these files is aimed at reducing the size of the code, cutting off everything superfluous. This applies to:

• Unused and extra characters;
• spaces;
• Unfinished and non-functional lines of code.

The process itself is similar to compressing a regular file. The weight and size of the latter becomes much smaller. But, nevertheless, the code becomes completely unreadable for humans. But search robots and browsers perfectly bypass and understand the entire structure of the file. The time spent on the round is reduced several times. Thanks to this compression, the download speed increases and the overall response improves.

Gzip module for Apache, Nginx and Node.js

Gzip is an amazing technology that was created at a time when the Internet was not as fast as it is today. Archivers were a popular technology (they have since declined in popularity as USB flash drives can provide up to 1TB of storage).

The idea was to use archivers for web traffic on the internet (similar to creating website files), so gzip was designed to compress files on web servers by compressing static (text) files to 99% of their original size. Because JavaScript is a text file, gzip can be used to compress JavaScript files as well as reduce page load times.

Optimize Javascript with Minification

Optimization is a special type of JavaScript minification. Such minimizers not only remove unnecessary spaces, commas, comments, etc., but also help to avoid "dead code":

• Google closure compiler
• UglifyJS
• Microsoft AJAX minifier

CSS optimization for web font usage

Google Fonts and similar font makers have revolutionized web fonts, but a few lines of font code can consume hundreds of kilobytes of bandwidth.

1. Download only the fonts you need: remove unused fonts and check if new fonts are needed.
2. Download only the weights and styles you need: Most font manufacturers may restrict downloads to certain character sets (for example, only latin), weights (thickness), and italics (slant). Browsers may automatically render missing styles, although the results may be poor.
3. Limit the number of characters you need: Rarely used fonts can be limited to certain characters. For example, the title "CSS Tutorial" in Open Sans can be defined by adding the & text= parameter to the Google Fonts query string: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Consider variable fonts: Variable fonts define a wide variety of styles, weights, and italics using vector interpolation. The font file is slightly larger, but you only need one, not multiple. The recursive font demonstrates the flexibility of variable fonts.
5. Download fonts from your local server. Self-hosting fonts is more efficient. Fewer DNS lookups are required and you can limit the loading of WOFF2, which all modern browsers support. Older browsers (IE) may revert to the OS font.
6. Consider OS fonts: This 500K web font might look great, but will anyone notice if you switch to the public domain Helvetica, Arial, Georgia, or Verdana? OS-safe or web-safe fonts are an easy way to improve productivity.

Using the appropriate font download option

Web fonts may take a few seconds to load and process. You need:

1. Show a flash of unstyled text (FOUT): The first available fallback font is used first, but it is replaced when the web font is ready.
2. Show flash of invisible text (FOIT): The text is not displayed until the web font is ready. This is the default process in modern browsers, which typically wait three seconds before reverting to a fallback font.
   Neither is perfect.

The font-display CSS property and the Google Font & display= setting can choose an alternative:

• auto: Default browser behavior (usually FOIT).
• block: Effectively FOIT. Text is invisible for up to three seconds. There is no font substitution, but the text may appear after a while.
• swap: Effectively FOUT. The first fallback is used until the web font is available. The text is immediately readable, but the font replacement effect can be annoying. The Font Style Matcher can be used to define a similarly sized fallback.
• fallback: a compromise between FOIT and FOUT. The text is invisible for a short period of time (usually 100ms), then the first fallback is used until the web font is available.
• optional: Similar to the fallback, except there is no font substitution. The web font will only be used if it is available during the initial period. The first page view will most likely display the fallback font, while subsequent page views will use the downloaded and cached web font.

Using swap, backup, or optional can provide a noticeable performance boost.

JS and CSS code optimization online

On the Internet, there is a fairly large number of online services. Which in a couple of minutes, are able to do all the routine work of compressing JavaScript and style files. All of them have their own algorithms for working with code. Against the background of such diversity, two most significant services can be distinguished. Their effective compression threshold is much higher than similar competing online tools. Let's take a closer look at these two web tools:

cssresizer.com
Compression efficiency of the 84% compared to close competitors. The validity of the code is preserved, even with significant compression. This way you can get great optimized code. Working with this tool is intuitive and there are several compression methods:

• Maximum;
• fast;
• Decompression;

You can compress by:

• URL - address;
• File upload;
• Direct code entry;

Refresh-sf.com

Another but equally powerful web interface for minifying JavaScript, CSS and HTML. The tool uses UglifyJS 2, Clean-CSS and HTML Minifier to work. The compression efficiency in this case reaches 85%, without visible violations of the code validity. Compression can be done by directly entering the code in the tool window.

Minify JS and CSS with CMS Wordpress plugins

As we all know, it has a significant distribution around the world. According to the data for 2018, this cms occupies a leading position. Consider a couple of popular optimization plugins specifically for WordPress:

Autoptimize Plugin

HTML, JS and CSS optimization plugin. It is one of the most popular plugins for speeding up sites on CMS Wordpress. It has a simple and functional configuration interface. The compression process happens on the fly.

• Optimization (HTML, JS, CSS) and CDN setup.
• Removing emojis, Google fonts, query strings from static resources.
• Ability to optimize images.

Webcraftic Clearfy Plugin

Not as old as the previous plugin. But it is also in demand and popular among similar competitors. Webcraftic Clearfy - has a rather intricate configuration interface. Consists of a combined combination of plugins, for the best result.

The settings pages are divided into menu sections. Thus, it is possible to optimize specific parts of the site, for example, HTML. What can this plugin do?

• Optimization (images, JS, CSS, HTML and scripts);
• Cyrillic transliteration and removal of duplicates. Working with alt attributes and creating proper robots.txt. Working with server headers and their responses.
• Removing Unclaimed WordPress Widgets.
• Hiding the WordPress version and removing query variables from static queries. Hiding the author's login and the admin login page.
• Global removal or cleaning of comments. Save control in the comments.
• Setting up WordPress pulse and top admin panel.
• Control over plugin components.

In conclusion, a certain conclusion can be drawn. Based on the above, compressing js and css is not such a difficult thing. Thanks to these actions, the response speed of your project will increase significantly.

Reading this article:

• Web page performance optimization
• Optimizing CSS for Site Speed - 9 Ways

Thanks for reading: SEO HELPER | NICOLA.TOP