How to reduce the number of dom elements in wordpress

Question

How do I reduce the number of DOM elements on the wordpress website to improve performance?

Answer 1

If you are are looking to improve your website loading speed you can do few things and optimise it. First of all, visit Pingdom It is a free online tool that allows you to test your website's speed from different locations.

Now once you are done with analysing your website speed, you can now follow the process of website speed optimisation. There are some things that make your website slow such as your web hosting, WordPress Configuration, page size, External scripts and plugins. Use Good Hosting: Always use good quality managed WordPress hosting such as WP Engine or Namecheap. Use a Cache Plugin: Caching can make your WordPress site anywhere from 2x to 5x faster. Read the guide from here to use a cache plugin. Optimize Images: You should always optimize your website images that will help to reduce the image size and thus the page size that helps to load your website faster. Use a Content Delivery Network (CDN): Always use a content delivery network to optimize your WordPress website speed. You can use Maxcdn or Cloudflare for good CDN.

Reduce External HTTP Requests : You can reduce all these external HTTP requests by disabling scripts and styles or merging them into one file.

Optimize WordPress Database : After using WordPress for a while, your database will have lots of information that you probably don't need anymore. For improved performance, you can optimize your database to get rid of all that unnecessary information. Use Any WordPress Database Optimizer plugin such as wp sweep to optimize your WordPress Database.

Enable GZIP Compression : Add this code in your hta access file.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts

  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml



# Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Follow these tips and I'm sure that you'll be able to speed up your wordpress website.

Reference: https://wordpress.org/support/topic/page-loading-5/

Answer 2

Personally, I don't see the DOM affecting the performance that much. For one thing, I suggest you minify your js, css, and html code. Also, try to combine your js and css file to a common folder to reduce http request.

Here is a few minifier I suggest

css => https://cssminifier.com/

js => https://javascript-minifier.com/

or if you want to do all => https://refresh-sf.com/

Answer 3

There was a question about this. If you want to work on the.html: Best ways to reduce number of DOM elements

Reducing the requests actually have a similar result.