Rendimiento

Optimizing CSS and JavaScript in WordPress

Por workalibur 16 min de lectura

Optimizing CSS in WordPress is important for improving the performance of your WordPress website and reducing page load time. Here are some tips for optimizing CSS on your WordPress site:

  • Minify CSS files: Minifying CSS files means removing whitespace, comments and unnecessary code from your CSS files. This can reduce their size and improve loading times. You can use a plugin such as Autoptimize to minify your CSS files automatically.
  • Combine CSS files: Merging several CSS files into one reduces the number of requests to the server and saves loading time. This is one of the CSS optimization techniques built into WordPress optimization plugins.
  • Defer or asynchronously load CSS: Deferring or asynchronously loading CSS can help speed up how your pages are rendered. When you defer or asynchronously load your CSS files, your website’s HTML loads first and the CSS loads afterwards, which reduces the time to first paint.
  • Inline critical CSS: Inlining critical CSS can improve the perceived speed of your website. By inserting critical CSS, you can make sure the styles needed to render the content at the top of the page load and display quickly.
  • Remove unused CSS: Unused CSS can slow down your website and affect its performance. You can use a plugin to automatically remove unused CSS from your website.
  • Measure with free tools: Use Google PageSpeed Insights or GTmetrix to get insights on how to optimize your CSS and improve the speed of your WordPress website.
  • Use a CDN: Use a content delivery network (CDN) service such as Cloudflare or MaxCDN to load your CSS files from a server closer to the user and reduce loading time.

By optimizing your CSS in WordPress, you can improve your website’s loading speed and performance and deliver a better experience to your visitors.

Pros and cons of using plugins to optimize WordPress CSS

Below, we outline some of the pros and cons of optimizing the CSS of your WordPress website using plugins compared with doing it manually or without plugins:

Pros of using plugins to optimize WordPress CSS:

  • Easy to use and configure: Plugins usually have a user-friendly interface that makes it easy to set up optimization options.
  • Saves time: Plugins can automate many optimization tasks, which can save you time and effort.
  • Accessibility: Many plugins are free or affordably priced, which makes them accessible to most users.

Cons of using plugins to optimize WordPress CSS:

  • Incompatibility: Some plugins may be incompatible with other plugins or WordPress themes, which can cause malfunctions on your WordPress website.
  • Performance: Some plugins can affect the performance of your WordPress website, especially if they have too many options enabled or are poorly coded.
  • Dependency: Using plugins can make your WordPress website dependent on them, which can be a problem if the plugin stops being updated or if you decide to uninstall it in the future.

Pros of optimizing WordPress CSS manually or without plugins:

  • Full control: When done manually, you have complete control over the optimization settings and can customize them to your specific needs.
  • Better performance: Optimizing CSS manually can be more efficient in terms of performance than using plugins.
  • Less dependency: When done manually, your WordPress website doesn’t depend on any plugin, which reduces the risk of compatibility or performance problems.

Cons of optimizing WordPress CSS manually or without plugins:

  • Requires technical knowledge: To optimize CSS manually, you need technical knowledge of HTML, CSS and WordPress.
  • Time-consuming: Manual optimization can be a very time-consuming process, especially if your WordPress website has a lot of content or if you are not familiar with optimization tools.
  • Risk of errors: When done manually, there is a higher risk of making mistakes or introducing problems into your WordPress website.

Overall, using plugins to optimize the CSS of your WordPress website is a good option if you lack technical knowledge and want to save time and effort. However, if you are an advanced user or prefer more control over optimization, doing it manually or without plugins may be the better choice.

Optimizing WordPress CSS without plugins: step by step

Below, we present a step-by-step guide to optimizing the CSS of your WordPress website without using plugins:

Step 1: Combine CSS files

Combining CSS files means merging all your CSS files into one to reduce the number of HTTP requests and speed up the loading time of your WordPress website. To do this without a plugin, follow these steps:

  • Open your header.php file in your WordPress theme folder.
  • Find the link tag that references your CSS file.
  • Copy the reference and paste it into a text editor.
  • Repeat this process for all the CSS files you want to combine.
  • Copy all the CSS code and paste it into a single CSS file.
  • Save the file under a different name, preferably in a new folder called «CSS».

Step 2: Minify the CSS file

CSS minification means removing all whitespace, comments and other unnecessary characters from the CSS file to reduce its size and speed up the loading time of your WordPress website. To do this without a plugin, follow these steps:

  • Open the CSS file you created in the previous step in a text editor.
  • Copy all the CSS code and paste it into an online CSS minification tool, such as CSS Minifier or CSS Compressor.
  • Click «Minify» or «Compress».
  • Copy the minified code and paste it into the original CSS file.
  • Save the file.

Adding the «defer» attribute to the link tag in your header.php file lets the CSS file load after all the page content has loaded, which can improve the performance of your WordPress website. To do this without a plugin, follow these steps:

  • Open your header.php file in your WordPress theme folder.
  • Find the link tag that references your CSS file.
  • Add the «defer» attribute after the «rel» property. For example: <link rel=»stylesheet» type=»text/CSS» href=»style.CSS» defer>
  • Save the file.

Following these steps, you should have successfully optimized the CSS of your WordPress website without using plugins. Remember to back up your files before making any major changes.

Below, we present a list of the most popular plugins for optimizing CSS in WordPress:

  • Autoptimize: This plugin optimizes and combines CSS and JavaScript files to speed up the loading time of your WordPress website. It also includes minification and file combination options.
  • WP Rocket: This caching and optimization plugin includes a CSS optimization feature that combines and minifies the CSS files of your WordPress website to improve its performance.
  • Fast Velocity Minify: This plugin combines, minifies and optimizes the CSS and JavaScript files of your WordPress website to improve its performance and reduce loading time.
  • W3 Total Cache: This caching and optimization plugin includes CSS minification and file combination features to reduce the number of HTTP requests and speed up the loading time of your WordPress website.
  • CSSHero: This plugin lets you customize the CSS of your WordPress website without editing code. It also includes a CSS optimization feature that combines and minifies the CSS files of your WordPress website to improve its performance.
  • Hummingbird: This plugin includes a CSS optimization feature that combines and minifies the CSS files of your WordPress website to improve its performance. It also includes tools to optimize caching and the overall performance of your WordPress website.
  • OptimizePress: This page builder plugin includes a CSS optimization feature that combines and minifies the CSS files of your WordPress website to improve its performance.

These are just some of the most popular plugins for optimizing CSS in WordPress. Remember to always back up your WordPress website before making any major changes.

Below, we present a list of some of the most popular CDNs you can use to optimize the CSS of your WordPress website:

  • Cloudflare: A free CDN that offers a wide range of optimization features, including CSS file minification and combination, as well as file compression and caching.
  • MaxCDN: A CDN focused on delivering multimedia content that offers a wide range of configuration options for CSS optimization.
  • Amazon CloudFront: An Amazon Web Services CDN that offers a wide range of optimization features, including file compression, file caching and optimized content delivery.
  • KeyCDN: a CDN focused on high-speed content delivery that offers a wide range of optimization features, including file compression and caching.
  • Akamai: an enterprise-level CDN focused on content delivery that offers a wide range of optimization features, including file compression and caching, as well as content delivery optimization for mobile devices.

These are just a few of the CDN options available to optimize the CSS of your WordPress website. It’s important to research and compare the different options to choose the one that best fits your needs and budget.

Optimizing JavaScript in WordPress

JavaScript has a bigger impact on page performance than CSS, because the browser not only has to download it, it has to run it, and while it does, the page doesn’t respond. In WordPress, every plugin and every theme adds its own scripts, many of them on every page even when they’re only needed on one. These are the five measures, in the order you should apply them.

Minifying JavaScript

Minifying means removing from the file everything the browser doesn’t need: spaces, line breaks, comments and long variable names. The script works the same way and weighs less. It’s the safest of the five measures, and WP Rocket and Autoptimize do it automatically, with a checkbox in their settings. If a script is already minified (its file name usually ends in .min.js), the plugin leaves it as it is.

Deferring loading with «defer»

By default, when the browser finds a script in the HTML, it stops, downloads it, runs it, and only then continues painting the page. With the defer attribute, the browser downloads the script while it keeps reading the HTML and runs it at the end, once the page has been built. The content appears sooner and the visitor can start reading while the JavaScript finishes loading. WP Rocket enables this with the «Load JavaScript deferred» option; Autoptimize, with «Don’t add JavaScript in the head». It’s the measure with the greatest effect on first paint and LCP.

Loading asynchronously with «async»

The async attribute also downloads the script without blocking, but it runs it as soon as it arrives, without waiting for the rest of the page and without respecting the order of other scripts. It works for scripts that are independent of everything else: analytics, a tracking pixel, a chat widget. It doesn’t work for scripts that depend on others, such as those that use jQuery, because they may run before the library they rely on and fail. The practical rule: defer for what is part of the page, async for what is external to it. The Async JavaScript plugin lets you decide, script by script, which of the two to apply.

Removing unused JavaScript

This is the measure with the biggest impact and the one that takes the most effort. A slider that only appears on the homepage loads its script on every page; a forms plugin loads its script where there is no form; a theme loads its entire icon library to use five icons. PageSpeed Insights flags it as «Reduce unused JavaScript» and tells you which files are involved. The solution has two levels: deactivating plugins that add nothing, which is free, and disabling scripts that aren’t needed on each page, which plugins like Asset CleanUp or Perfmatters do. This second part requires testing each page afterwards, because removing a script that another one depends on breaks things silently.

Combining files, with care

Combining several scripts into one reduces the number of requests. With HTTP/1.1 it was one of the most cost-effective measures; with HTTP/2 and HTTP/3, which serve many files over the same connection, it matters much less, and a single large file has a drawback: every time one of the scripts changes, the browser has to download the whole file again. WP Rocket and Autoptimize can combine them if you ask. Our recommendation is not to do it by default on a server running HTTP/2, and to test it, measuring before and after, only if the page loads dozens of small scripts.

Applied one at a time and measured after each change, these five measures together usually produce a noticeable improvement in the mobile PageSpeed score. How to measure and the overall order of optimization are covered in our complete guide to speeding up WordPress.

Optimizing WordPress CSS when using HTTP/2

HTTP/2 is a communication protocol used for transferring data on the web, known for its speed and efficiency. When using HTTP/2, there are certain considerations to keep in mind when optimizing the CSS of your WordPress website. Below, we present some recommendations for optimizing the CSS of your WordPress website when using HTTP/2:

    Minimize the number of CSS files

    Although HTTP/2 allows multiple HTTP requests in parallel, it’s still more efficient to minimize the number of CSS files loaded on a page. To do this, combine all the CSS files into one or into a few large files.

    Use the lazy loading technique

    Lazy loading is a technique that loads a page’s CSS only when it’s required, instead of loading everything at once. This can significantly improve the performance of your WordPress website on HTTP/2.

    Prioritize loading critical CSS

    Critical CSS is the CSS needed to render the page properly. To optimize the loading of critical CSS, you can use lazy loading for the non-critical CSS and load the critical CSS immediately and inline.

    Use browser caching

    HTTP/2 supports browser caching, which means you can store CSS files in the user’s browser for faster loading on subsequent visits. Make sure to configure browser caching properly to get the most out of this feature.

    Use a server optimized for HTTP/2

    To get the maximum performance from HTTP/2, it’s important to use a web server optimized for this protocol. Make sure to choose a web hosting provider that supports HTTP/2 and is optimized for it.

With these recommendations, you should be able to successfully optimize the CSS of your WordPress website when using HTTP/2. Remember to always back up your WordPress website before making any major changes.

PageSpeed Insights recommendations for optimizing  WordPress CSS

Google PageSpeed Insights is a website performance analysis tool that provides recommendations for improving the speed and efficiency of your WordPress website. Below are some PageSpeed Insights recommendations specific to optimizing CSS in WordPress:

  • Reduce the size of the CSS file: PageSpeed Insights suggests reducing the size of your CSS file to improve your WordPress website’s loading time. You can do this by removing unnecessary CSS code or by minifying the CSS.
  • Use a CSS minification tool: PageSpeed Insights suggests using CSS minification tools to reduce the size of the CSS file, such as WP Minify, W3 Total Cache, or any other CSS optimization tool available.
  • Remove unused CSS: PageSpeed Insights suggests removing CSS code that isn’t used on your WordPress website to reduce the size of the CSS file and improve page loading speed.
  • Leverage browser caching: PageSpeed Insights suggests leveraging browser caching to reduce the number of CSS file requests and speed up your WordPress website’s loading time.
  • Use asynchronous CSS loading: PageSpeed Insights suggests using asynchronous CSS loading to improve your WordPress website’s loading time, meaning the CSS file loads in the background while the page content is shown to the user.
  • Optimize CSS delivery: PageSpeed Insights suggests optimizing the delivery of the CSS file by using a CDN, file compression, and efficient file transfer protocols.

By following these PageSpeed Insights recommendations, you can optimize the CSS of your WordPress website.

Is your website slow or does nobody look after it?

We host it, keep it up to date and make backups. You take care of your business. Check out PF Hosting or get in touch.