{"id":179205,"date":"2024-09-05T11:52:20","date_gmt":"2024-09-05T04:52:20","guid":{"rendered":"https:\/\/it.telkomuniversity.ac.id\/mengatasi-tampilan-rusak-pada-website-berbasis-wordpress\/"},"modified":"2025-11-06T09:00:33","modified_gmt":"2025-11-06T02:00:33","slug":"how-to-fix-broken-displays-on-wordpress-based-websites","status":"publish","type":"post","link":"https:\/\/it.telkomuniversity.ac.id\/en\/how-to-fix-broken-displays-on-wordpress-based-websites\/","title":{"rendered":"How to Fix Broken Displays on WordPress-Based Websites"},"content":{"rendered":"\n

Have you ever opened a faculty or unit website at Telkom University and found it looking messy? What should be a neat and structured page suddenly displays only unstyled blue text, and the background has changed to a strange color, as in the image below.<\/p>\n\n\n\n

If you’ve ever encountered this, don’t panic! This issue is quite common on WordPress-based websites that use caching to<\/em> speed up loading times. The good news is, the solution is very simple.<\/p>\n\n\n\n

This article will explain why this can happen and how to overcome it step by step which can be done by each website operator and\/or assisted by expert staff from the Directorate of Information Technology Center<\/a> (PuTI) Telkom University.<\/p>\n\n\n\n

Why Does a Website’s Appearance Become Broken? Understanding the Role of Cache<\/strong><\/h4>\n\n\n\n

To make our website fast, we use several layers of caching<\/em> technology . Think of a cache<\/em> as a website’s “short-term memory.” Instead of building a page from scratch each time a visitor arrives, the server stores a pre-built static version (HTML, CSS, JavaScript) and serves it instantly. This is much faster.<\/p>\n\n\n\n

In the Telkom University environment, we generally use three layers of cache<\/em> :<\/p>\n\n\n\n

    \n
  1. Cache Plugin (LiteSpeed \u200b\u200bCache \/ Hummingbird Pro):<\/strong>\u00a0This plugin runs directly on our WordPress website server. Its job is to optimize files, combine CSS and JavaScript code, and create static versions of our web pages.<\/li>\n\n\n\n
  2. Cloudflare Cache:<\/strong>\u00a0Cloudflare is a Content Delivery Network (CDN) that stores copies of our websites on multiple servers around the world. When you access a website, Cloudflare will serve content from the closest server location, significantly speeding up access times.<\/li>\n\n\n\n
  3. Browser Cache:<\/strong>\u00a0Your browser (such as Chrome, Firefox, or Safari) also stores files like images, CSS, and JavaScript from websites you’ve visited. This prevents the browser from having to re-download them when you return.<\/li>\n<\/ol>\n\n\n\n

    Broken display issues typically occur when there’s a mismatch between these <\/strong>cache<\/em> layers . For example, your browser might receive the latest version of the HTML file, but the CSS file (which controls styling and appearance) is an older version stored in Cloudflare or the browser’s cache<\/em> . As a result, the page doesn’t have instructions on how to display it, resulting in a messy display.<\/p>\n\n\n\n

    \"mengatasi<\/figure>
    \n

    The display comes out however, messy.<\/p>\n<\/div><\/div>\n\n\n\n

    \"mengatasi<\/figure>
    \n

    The display is only a little and empty<\/p>\n<\/div><\/div>\n\n\n\n

    Step-by-Step Solution to Fix a Broken Display<\/strong><\/h4>\n\n\n\n

    Here are three steps you can take, ranked from easiest for general users to those requiring admin access.<\/p>\n\n\n\n

    Step 1: Perform a \u201cHard Refresh\u201d on Your Browser (For General Users)<\/strong><\/p>\n\n\n\n

    This is the first step and the most frequently successful. A hard refresh<\/em> forces your browser to ignore its cache and re-download all assets (HTML, CSS, JS) from the server.<\/em><\/p>\n\n\n\n

    The method is very easy:<\/p>\n\n\n\n