如何增加网站加载时间？及如何在WordPress主题中添加指定代码？

Hey there, let's break down your two questions step by step!

While most website owners are focused on speeding up their sites, if you specifically need to increase load time, here are some actionable methods:

• Add intentional delays to resource loading: Wrap critical resource loads (like scripts or styles) in a setTimeout function to hold off their execution. For example:

  setTimeout(() => {
    // Load your target script or style here
  }, 3000); // Adds a 3-second delay
  

• Include unnecessary large resources: Add uncompressed high-res images, bulky unused JavaScript libraries, or oversized CSS files with tons of unused styles. This forces the browser to download extra data, slowing down load times.
• Disable all caching: Turn off browser caching and server-side caching (like WordPress caching plugins). Without caching, every visit will require downloading all resources from scratch instead of using local cached copies.
• Use low-performance hosting/CDN: Switch to a budget hosting plan with limited resources, or a CDN that’s geographically far from your main audience. This increases latency and slows down resource delivery.
• Add server-side delays: If you have access to server-side code (like PHP in WordPress), insert a sleep() function before sending page responses. For example, in your theme’s functions.php:

  sleep(2); // Adds a 2-second delay before the page loads
  

First, a quick heads-up: Your code has a small typo—window.onLoad should be window.onload (lowercase 'l') for it to work correctly. Now, here are the best places to add this script:

• Theme’s footer.php file (Recommended):
  Open your theme’s footer.php and paste the script right before the closing </body> tag. This ensures the script loads after most page content, so it won’t block the page from rendering. Here’s how it would look:

  <script>
  window.onload = function() {
    $import('base.js');
  };
  function $import(src){
    var scriptElem = document.createElement('script');
    scriptElem.setAttribute('src',src);
    scriptElem.setAttribute('type','text/javascript');
    document.getElementsByTagName('head')[0].appendChild(scriptElem);
  }
  </script>
  </body>
  

• Using WordPress’ enqueue system (Best practice for maintainability):
  For cleaner, more maintainable code, add the script via your theme’s functions.php using WordPress’ official script enqueue method. This keeps your code organized and aligns with WordPress’ loading order rules. Here’s an example:

  function add_custom_import_script() {
    // Optional: Enqueue base.js properly if it's part of your theme
    // wp_enqueue_script('base-script', get_template_directory_uri() . '/base.js', array(), '1.0', true);
    
    // Define your inline script
    $inline_script = "
    window.onload = function() {
      $import('base.js');
    };
    function $import(src){
      var scriptElem = document.createElement('script');
      scriptElem.setAttribute('src',src);
      scriptElem.setAttribute('type','text/javascript');
      document.getElementsByTagName('head')[0].appendChild(scriptElem);
    }
    ";
    // Attach the inline script to jQuery (or replace with your own script handle)
    wp_add_inline_script('jquery', $inline_script);
  }
  add_action('wp_enqueue_scripts', 'add_custom_import_script');
  

  Note: If base.js is part of your theme, it’s better to enqueue it directly with wp_enqueue_script instead of dynamically importing it, but the above works for your existing code.

• Theme’s header.php file (Not recommended):
  You could add the script inside the <head> tags, but this isn’t ideal because it can block the page from rendering quickly. If you go this route, wrap the code in a <script> tag within the <head> section.

内容的提问来源于stack exchange，提问作者Ramya