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 medium, thumbnails etc. Using a custom size like 250×250 will have to resize images on the fly, which increase loading time.
  3. Install a image compressing plugin, like https://wordpress.org/plugins/tiny-compress-images/ you can firstly try to check how they are compressed at tinypng.com
  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 enabled on your server and how to enable it.
  5. Deactivate needless plugins.
  6. Decrease number of items (blogs, portfolios, albums, catalogs, photos) inside the shortcode and templates settings :

    Number of albums per page in the template settings

    Number of posts in the shortcode settings

  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
  8. Check your server TTFB performance with http://www.bytecheck.com/ Normal time is 100 – 500 ms.
  9. Use a content delivery network (CDN), such as Max CDN or Cloudflare (make sure you have disabled rocket loader feature )
  10. Go to The7 -> MyThe7 -> 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 – it will significantly improve page loading.
  11. Go to The7 -> MyThe7 and disable all Legacy Features if you don’t use outdated The7 features or old fontawesome v4 icons. This will decrease the number of additional styles.
  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 site, you absolutely do not need /wp-includes/css/dist/block-library/style.min.css and /wp-includes/css/dist/block-library/theme.min.css . 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.
  17. If you are using The7 Go Pricing plugin, you can disable Loading TweenMax library and loading Font icons (the Fontawesome icons already included by the theme so you should disable it). These options located in the The7 Go Pricing -> General settings -> Assets tab:
  18. If you are using The7 Slider revolution plugin, you can go to The slider revolution -> General settings and enable “Defer JavaScript Loading” option.
    Also, for mobile performance, we recommend deactivating revolution slider on the mobile devices. Depends on the slide complexity, the slides can take many browser resources, this is especially true for mobile browsers where the resources are very limited. This also can significantly increase the mobile score in Google insights tool.
    To disable slider on mobile:

    • Open the setting panel of the slider which you want
    • Open Layout & Visual from the “right-hand” sidebar
    • Open “mobile” tab
    • Choose to disable the entire slider on mobile devices. If disabled, you can replace the slider with a simple fallback image.
  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 href=”https://wordpress.org/plugins/autoptimize”>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. Or This can be done automatically with the help of the Autoptimize critical css extension.

1