{"id":9427,"date":"2022-03-14T16:28:40","date_gmt":"2022-03-14T14:28:40","guid":{"rendered":"https:\/\/zeni.cz\/blog\/speed-up-wordpress-websites-by-opzimizing-javascript-and-css\/"},"modified":"2024-07-10T10:55:56","modified_gmt":"2024-07-10T08:55:56","slug":"speed-up-wordpress-websites-by-opzimizing-javascript-and-css","status":"publish","type":"post","link":"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/web-optimization\/speed-up-wordpress-websites-by-opzimizing-javascript-and-css\/","title":{"rendered":"Speed Up WordPress Websites by Optimizing JavaScript and CSS"},"content":{"rendered":"
\n\n

JavaScript and CSS slow down the page loading because they have to be loaded and executed. Additionally, a lot of JavaScript can have a very negative impact on the performance and responsiveness of the website. Learn how we optimize CSS and JavaScript in WordPress to help speed up your websites. <\/strong><\/strong><\/strong><\/p>\n\n<\/div>\n\n

\n\n

Load Less JavaScript and CSS<\/h2>\n\n\n\n

Consider your choice of plugins and themes<\/strong><\/strong><\/h3>\n\n\n\n

Some plugins and themes <\/strong>in WordPress use a lot of JavaScript <\/strong>and load lots of CSS, so you should reconsider using them and try to find alternatives. Many of them load Javascript and CSS even on pages that are not affected by the plugin\/theme at all, and thus increase the loading time even where it is not necessary.<\/p>\n\n<\/div>\n\n

\n\n

Think About the Necessary Functionality<\/strong><\/strong><\/h3>\n\n\n\n

When working with WordPress, we always make sure to load<\/strong> only what is needed<\/strong> (CSS styles, JavaScript) to prepare the page for faster loading<\/strong>. For example, we remove unnecessary CSS and JS files.<\/p>\n\n<\/div>\n\n

\n\n

Use CSS Instead of JS for Interactive Features<\/strong><\/strong><\/h3>\n\n\n\n

If you’re programming content for WordPress, it’s a good idea to think about whether JavaScript is really necessary for everything you’re using JavaScript for. A lot of functionality that used to require JavaScript can now be achieved with<\/strong> modern CSS<\/strong> with much less impact on performance. We took advantage of this for example when creating a page for i4comfort<\/a> or when creating a Custom Menu For Engeto Without The Use Of JavaScript<\/a>. The website contains a lot of visual effects<\/strong>, which we included so that they don’t slow down<\/strong> the page. You can read more in the article Creating a Website for i4comfort<\/a>. <\/p>\n\n<\/div>\n\n

\n\n

Code Handling JS and CSS<\/strong><\/strong><\/h3>\n\n\n\n

Always think about where your CSS and JavaScript is needed. It’s a good idea to divide large CSS files into several smaller ones and load them as needed. We can do the same with JavaScript code.<\/p>\n\n\n\n

We mostly use Sage<\/a> to create themes, which makes such management easier and takes into consideration its importance. <\/p>\n\n\n\n

Read more about Why You Want a website created on Sage?<\/a><\/p>\n\n<\/div>\n\n

\n\n

Optimize CSS and JavaScript With Minification<\/h2>\n\n\n\n

Minification removes<\/strong> everything that is not necessary<\/strong> from the files (linebreaks, spaces, shortens variable names, etc…). Text files with CSS and JS are modified to take up less space and load faster<\/strong>.<\/p>\n\n\n

\n
\"Difference
Difference between original and minified code<\/figcaption><\/figure>\n<\/div>\n\n\n

There are many good WordPress plugins and themes<\/strong> that minify the code. In our<\/strong> plugins and themes, we minify<\/strong> the code while keeping the original<\/strong> files, which are easier to modify<\/strong>. <\/p>\n\n<\/div>\n\n

\n\n

How To Do It?<\/strong><\/strong><\/h3>\n\n\n\n

Your JavaScript and CSS can be minified using online tools<\/strong> such as Closure Compiler<\/a> or Minify Code<\/a>. JavaScript and CSS that you create for your plugins or insert in customizer can also be minified in this way.<\/p>\n\n\n\n

A better alternative for this is to configure the build of your plugin\/theme.  It is possible to use and set up Webpack<\/a> or tools like node-minify<\/a>. This allows you to automatically minify your files, but it requires quite a lot of time and energy, especially if you choose Webpack. That’s why it’s better to go for a pre-made solution for your plugin or theme in the form of a starter project, such as Roots Sage<\/a> for a theme. However, for large projects that you are already working on and it is not easy to migrate them, you need to get help from the tools mentioned above.<\/p>\n\n<\/div>\n\n

\n\n

How to Use Minification Without Developer Experience?<\/strong><\/strong><\/h3>\n\n\n\n

To optimize all the CSS and JS files that your site uses, you can use the Fast Velocity Minify<\/a> plugin<\/strong>. This plugin generates minified CSS and JS files on the first uncached loading of the page which are then loaded in place of the original files on upcoming requests. You can significantly speed up CSS and JavaScript loading this way for plugins and themes that don’t use minified JavaScript and CSS.<\/p>\n\n<\/div>\n\n

\n\n

Less is More<\/h2>\n\n\n\n

To speed up<\/strong> your website and thus increase<\/strong> your traffic<\/strong>, remember that less is really more in this case. If your site is overloaded with a lot of unnecessary functionality, it’s clear that this will have an impact on performance. <\/p>\n\n\n\n

There are many ways<\/strong> to speed up<\/strong> your website and increase traffic. You can divide longer pages<\/strong> into smaller<\/strong> ones, reduce<\/strong> the amount of unnecessary images<\/strong>, or aim for simpler code<\/strong>. We’ve also written about this in a more detailed article, 6 Ways to Improve the Speed and Performance of Your WordPress Website<\/a>.<\/p>\n\n\n\n

If you have any questions or need help with speeding up<\/strong> or optimizing your site, we’re here for you, don’t hesitate to get in touch<\/a>. <\/p>\n\n<\/div>","protected":false},"excerpt":{"rendered":"

JavaScript and CSS slow down the page loading because they have to be loaded and executed. Additionally, a lot of JavaScript can have a very negative impact on the performance and responsiveness of the website. Learn how we optimize CSS and JavaScript in WordPress to help speed up your websites.<\/p>\n","protected":false},"author":29,"featured_media":9428,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[310],"tags":[],"class_list":["post-9427","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-optimization","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"author_meta":{"display_name":"rjurinek","author_link":"https:\/\/zeni.cz\/en\/blog-o-wordpress-woocommerce\/author\/rjurinek\/"},"featured_img":"https:\/\/zeni.cz\/app\/uploads\/2023\/02\/Zrychlenie-webovych-stranok-vo-WordPress-vdaka-optimalizacii-JavaScriptu-a-CSS-5-300x200.jpeg","coauthors":[],"tax_additional":{"categories":{"linked":["Web Optimization<\/a>"],"unlinked":["Web Optimization<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on 14.3.2022","modified":"Updated on 10.7.2024"},"absolute_dates_time":{"created":"Posted on 14.3.2022 16:28","modified":"Updated on 10.7.2024 10:55"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/comments?post=9427"}],"version-history":[{"count":2,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9427\/revisions"}],"predecessor-version":[{"id":12411,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/posts\/9427\/revisions\/12411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/media\/9428"}],"wp:attachment":[{"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/media?parent=9427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/categories?post=9427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeni.cz\/en\/wp-json\/wp\/v2\/tags?post=9427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}