Menu Close

WordPress page loading image & animation how to make and consider

Loading WordPress Page How to create images and animations and titled 'Situation' is really important. I have to say this to the person who came to implement the loading page right now.

In the modern fast internet environment, if the loading time is delayed by more than 3 seconds on average, a large number of users will leave. This is a kind of trick that allows you to make an intuitive judgment that a user is 'soon to come up to the page' by making loading images & animations instead of the screen being loaded or loading, and not making a break.

So, the first thing to consider when creating a loading image or animation through this page loader plugin or coding is "Is my site slow enough to implement the loading image?" A page loading image is very effective (statistically, the bounce rate is reduced by about 30%) if the image is mainstream, is a high-volume page, or is slow or slow for a variety of reasons, such as many scripts or slow hosting servers. However, if the page loading speed is already fast enough to be around 1 to 2 seconds, and if you are using image loading for other reasons, such as design or kanji, you are strongly discouraged.

The reason is that you have to implement a loading image, cover the page and disappear again, and there will be additional loading and animation times, which will not be enough to apply. So check the following checklist before creating the loading image, and if you need to apply it, let's apply the plugins below.

  1. Page loading speed is slow> Recommendation
  2. Page loading speed is fast>
  3. There is an option to implement a specific page only loading page in the plugin.
  4. Page loading speed is fast, it is not too slow and ambiguous.> Do not hesitate for a while, but you can apply it directly and judge the speed and comfort of practical experience and use it.

    How to create loading image & animation

There are two ways to create a loading page: through direct coding and through a plugin. It is GKKmon which minimizes the number of plug-ins and minimizes the number of plug-ins by coding them directly, but it is more stable and faster to use plug-ins like page loader. Especially in case of coding, there is a bug that the loading image does not disappear in a certain environment. It is not troublesome to handle errors by environment. Therefore, stability is the most important factor in using page loader to prevent user deviation from page load time.

So, if you need to install some plugins, you should never install 'Preloader by SWS', which is the most popular one. If you search for a plugin by this keyword, it seems that the plugin named 'Preloader by WordPress Monsters' has been changed to be served. If you search for it in Google, it will be longer than 2 years Is not a plug-in.

GKKmon has tested and tested plugins 'Preloader' , 'Loading Page with Loading Screen' , 'LoftLoader' There were three.


  • Speed - Slow to Medium
  • Function - Normal
  • First of all, the features that the page loader plugin should have are basically somehow equipped. The plug-in vendor has its own Preloaders loading image creation site The advantage is that it is easy to create and customize various loading images directly through the advantage (because you can only create images here and use other plugins ...).

    The biggest disadvantage is the 'speed' problem. It takes a long time to download the loading image, to output the loading screen, to backup the contents after loading, and the processes are also not pleasant. So, unless you have a reason to use this plugin, it is a plugin that you do not recommend. Also, basically, it is said to have some functions, but it is really basic. You can not set specific page configurations to URLs, and there are no other effects or features. I can say that it is simple if it is simple (but it is simple but not fast?).

    Please note that installing and activating the plugin does not work immediately. After activation <div id="wptime-plugin-preloader"></div> The code named site 'header.php' of <body> It only works if you put it inside.

      Loading Page with Loading Screen

  • Speed - very fast
  • Features - novelty, variety
  • The best of the plugins that function as basic page loaders! The reason is because it is fast. It seems to be related to the reason why it is speeding up, although it is a bit unsatisfactory in content expression that seems to be bumping at the time of loading, but it is an attractive plug-in because it is overwhelmingly fast compared with 'Preloader'.

    It is used immediately after installing the plug-in, and the default loading icon is great, and the loading percentage bar showing the loading screen by percentage is also turned on by default. The loading image has a total of 10 basic images, which are usually the most intuitive and clean. Of course you can use the image you want as a link input. You can also turn off the loading percentage bar. Other key features are briefly described below.

  • Enable loading screen - Use loading screen
  • Display a close screen button - Whether to use the close button on the loading screen
  • Remove the loading screen in the window onload event - Use a loading screen while opening a new window such as the 'onload' event
  • Display the loading screen - Adjusts the size of the loading screen area, in pixels
  • Display the loading screen - Determines how many times the loading screen is displayed. 'always: always, once per session: once per session, once per page: once per page'
  • Display loading screen in - Determines from which screen the loading screen is displayed. 'homepage only: on the home screen only, all pages: on all screens, the specific pages: on specific pages (enter posts or page IDs separated by commas)
  • Exclude loading screen from - Removes the loading screen only on certain screens. Likewise, enter posts or page IDs separated by commas
  • Select the loading screen - Select whether you want to display the loading image, or only the loading percentage bar.
  • Select the logo image (or any other image) - Select the loading image. You can choose from the default images at the bottom or set yourself.
  • Select background color - Select background color. 'Apply transparency' on the right side indicates whether transparency is selected
  • Display image in fullscreen - Whether the image is displayed in full screen. (Not visible in certain environments)
  • Select foreground color - Select foreground color
  • Additional seconds - Set how many additional seconds to load after the page loads (default is 0 seconds)
  • Include an ad, or your own block of code. You can literally put the ad code or the code you want on the loading screen. A very useful and funny feature.
  • Apply the effect on page. There is a default 'none' and a 'rotatelnLeft' feature where the page appears from the left. It seems that you can use several effects in addition to the paid version.
  • Display loading percent. You can turn the loading percentage bar on and off.
  • The Lazy Loading feature at the bottom is a technique that speeds up images by bringing them up late, which is also available in the paid version.
  • It is fast, and although limited, there are many features available and novelty. One of the most interesting features is the "Include an ad, or your own block of code" feature, which makes it attractive to be able to launch ads and phrases freely on the loading screen. So it seems to be available for other purposes as well as for loading images.


  • Speed - Slow ~ Normal but so smooth animation
  • Features - Focus on animation effects
  • Lastly, 'LoftLoader' is the most dynamic loading animation plugin. The fact that the page loader is different from other page loaders is focused on the beautiful, smooth and natural loading animation. The setup screen can also be set like the WordPress 'custom' screen.

    The loading icon image is also very beautiful, smooth, dynamic and seamless, fade out, left and right, and up and down, and the screen opens and opens, making the site look luxurious with one loading screen. The loading time is not the boring time, but rather the eye candy, which is probably the best fit for Page Loader's purpose.

    But the obvious drawback is that it is also a bit slow. It is true that Am is a bit reluctant to use because LoftLoader is noticeably slower than when not using LoftLoader. In addition, mobile devices are not displayed in full screen on certain devices or browsers. Although the disadvantages are very clear, they are aesthetically superior, and it is expected that the users' favorability will be greatly reduced. Functions are omitted because they are quicker to press directly than to explain.


    In the modern fast internet environment, if the average time of loading more than 3 seconds is delayed, most users will leave. Because loading images & animations help users make intuitive judgments such as 'the screen will pop up' during the delay time, they do not create boredom and break-outs, and average truncation rate is reduced by 30% with one simple trick This is a great feature. But, as I said at the beginning, let's make it smart and efficient to use in mind that on average, sites that are good at speed can be rather poisoned.

    Leave a Reply

    Your email address will not be published.

    Posted in All, Wordpress

    이메일 구독 - Email Subs

    최선을 다해 직접 만든 콘텐츠만 공유합니다.
    We share the best content we have created.