How to make the theme load faster

  1. Install caching plugin.
  2. If possible, decrease the size of the images.
    If you are using a lot of single images or fancy media elements, use images in the same size as displayed in the site (or slightly larger than display size for better quality in responsive mode). Or select predefined size like “large”, “medium”, “thumbnails”, etc.:

    Fig. 1. Image size.

    Fig. 1. Image size.

    Using a custom size like 250×250 will turns into resizing images on the fly, which increases loading time.

  3. Install image compressing plugin, like https://wordpress.org/plugins/tiny-compress-images/. You may want to check the quality of compressed images at tinypng.com first.
  4. Enable Gzip compression. By using gzip compression, you can decrease the size of your page and improve loading speed. Here, you can read how to check if gzip is enabled on your server and how to enable it.
  5. Deactivate needless plugins. For example, if you have plugins like “The7 GoPricing Tables” or “The7 Layer Slider” active, please check its dashboard and make sure you really have any tables or sliders created there. If not, deactivate them.
  6. Decrease number of items (blogs, portfolios, albums, photos) inside the shortcode and templates settings :

    Fig. 2. Decrease number of posts.

    Fig. 2. Decrease number of posts.

  7. If you are using Wordfence Security plugin, deactivate Live Traffic – it extremely slows down sites.

    upload_6_16_2015_at_10_34_24_AM

    Fig. 3. Disable “Live Traffic” in Wordfence.

  8. Check your server TTFB performance with http://www.bytecheck.com/ Normal time is 100 – 500 ms.
  9. Use content delivery network (CDN), such as Max CDN or Cloudflare (make sure you have disabled rocket loader feature).
  10. Go to The7 -> My The7 -> Settings -> The7 Post Types and Elements and disable all custom post types you don’t use. If you don’t use custom post types at all, please deactivate The7 Elements plugin.
  11. Go to The7 -> My The7 and disable all Legacy Features if you don’t use outdated The7 features or old FontAwesome v.4 icons.
  12. Go to The7 -> Icon Fonts Manager and leave only required icon sets.
  13. If possible, upgrade your PHP. The most recent version of The7 is compatible with PHP 7.3
  14. If back-end works slow, please address try to disable elements you don’t use.
  15. If you are not going to use Gutenberg blocks on the website, you do not need /wp-includes/css/dist/block-library/style.min.css and /wp-includes/css/dist/block-library/theme.min.css absolutely. You can use the following snippet in the functions.php of the child theme to remove this extra stylesheet from your site
     //remove Gutenberg stylesheet
    function wp_dequeue_gutenberg_styles(){ 
     wp_dequeue_style( 'wp-block-library' );
     wp_dequeue_style( 'wp-block-library-theme' ); 
    } 
    add_action( 'wp_print_styles', 'wp_dequeue_gutenberg_styles', 100 ); 
    
  16. Fill in excerpts in the posts and display excerpts instead of the page content in the blog shortcodes and templates.

    Fig. 4. Display Excerpt.

  17. If you are using The7 Go Pricing plugin, you can disable Loading TweenMax library and loading Font icons (since FontAwesome icons are already included by the theme). These options located in the The7 Go Pricing -> General settings -> Assets tab:

    Fig. 5. Disable useless libraries.

  18. If you are using The7 Slider revolution plugin, you can go to The7 Slider Revolution -> General settings and enable “Defer JavaScript Loading” option.
    Also, for mobile performance, we recommend deactivating Revolution Slider on the mobile devices. Depending on slide complexity, the slideshow can take many browser resources. Especially, on mobiles.
  19. If you are using The7 Layer slider plugin, you can go to The Layer slider -> Options -> Advanced and activate options:
    • Use slider markup caching
    • Include scripts in the footer
    • Conditional script loading
    • Defer JavaScript loading
  20. To improve the first meaningful “paint” (user interface rendering), you can Generate critical CSS and deffer Combined CSS. This can be done with help of the Autoptimize plugin.
    More details can be found on the plugin FAQ page . Please note you should regenerate critical CSS every time you change something on the site. Alternatively, it can be done automatically with the help of the Autoptimize critical css extension.

1