Combine Your WordPress CSS, HTML And JavaScript Code

Themes and plugins made for WordPress generally have an optimized structure. In some exceptional cases, the HTML, CSS and JavaScript codes of the themes and plugins, which you used, cause your site to slow down. In this article, I will mention the Autoptimize plugin designed to increase your site speed. Compress your CSS, HTML and […]

Combine Your WordPress CSS, HTML And JavaScript Code

Themes and plugins made for WordPress generally have an optimized structure. In some exceptional cases, the HTML, CSS and JavaScript codes of the themes and plugins, which you used, cause your site to slow down. In this article, I will mention the Autoptimize plugin designed to increase your site speed. Compress your CSS, HTML and JS files, your site will open faster.

I will show you two different codes for you below. You will see an unoptimized CSS code in our first code and an optimized CSS code in the second code. The unnecessary gaps between the codes will be removed with the compression, so your site loading speed will increase significantly.

Non-optimized CSS code

.examplecode img {
width: 100%;
}
.examplecode {
font-size: 36px !important;
line-height: 1.2 !important;
}

An optimized CSS code

.examplecode img{width:100%}.examplecode{font-size:36px!important;line-height:1.2!important}

Normally, you can manually optimize CSS, HTML and JavaScript codes. However, it is very difficult to do manual action because your WordPress themes also have too many resource files. That’s why you can do this with a plugin in a few simple steps.

Autoptimize CSS, HTML and JS Compression Plugin

The Autoptimize WordPress plugin will make optimizing your site really easy. It can bundle scripts (JS) and styles (CSS) and get rid of unnecessary spaces. It shrinks and takes cache of all files, defer CSS at the top of the page by default, move and disable scripts in footers, and it shrinks HTML.

Extra options; Google optimizes fonts and your images, can sync non-consolidated JavaScript code, disable WordPress emoji’s.

Download Autoptimize Plugin

Download Link: https://tr.wordpress.org/plugins/autoptimize/

  1. If you can connect to the FTP tool, unzip the downloaded file and upload it to the / wp-content / plugins / folder in your public_html folder.
  2. Activate the plugin from the ‘Plugins’ menu in WordPress.
  3. Finally, visit the plugin’s settings page and make the necessary adjustments.

Clear Cookies

After configuring the plugin settings, a settings tab called Autoptimize will appear in the top menu of your WordPress admin panel. Click this setting to clear cookies every time you post a blog post or make a change on your site.

If you adjust the settings as in the screenshots above, there will be serious improvements on your site. In very exceptional cases, there may be distortions in the themes you use. In this case, do not worry, uncheck the CSS optimized area in the Autoptimize plugin and click the “Save Changes and Clear Cache” button then remove the plugin and contact an expert support. I hope this article will help you to increase your site.

Leave a Reply

Your email address will not be published. Required fields are marked *