WordPress Tips (Notes on changing login screen, optimization, etc.)

Things to do for now regarding changing the login screen, SEO, image optimization, and speed improvement


Here are some things to do for now regarding changing the login screen, SEO, image optimization, and speed improvement.

Changing the Login Screen

1// add to functions.php
2function custom_login()
3{
4  $style = '
5  <style>
6    .login > #login > h1 > a {
7      background-image: url(PATH/TO/IMAGE.webp);
8      background-size: 100%;
9      width: 100%;
10      height: 100px;
11    }
12    .login > #login > h1::after {
13      content: "LOGIN DESCRIPTION";
14      font-size: 1rem;
15    }
16  </style>
17  ';
18  echo $style;
19}
20add_action('login_enqueue_scripts', 'custom_login');

SEO

Insert meta tags with All in One SEO Pack, and optimize search with https://search.google.com/search-console.

  • Registering and pinging sitemap

Use XML Sitemap Generator for WordPress, but make sure to uncheck "Include sitemap in HTML format" (because an error will occur on search console if it's in a format other than xml).

Site Speed Improvement

Run a speed test at https://developers.google.com/speed/pagespeed/insights to improve speed on both SP/PC. Since there are multiple plugins for speed improvement in WordPress, here are the examples introduced this time.

imagify

When "Serve images in next-gen formats" comes up high in the pagespeed insights diagnostic results, a significant improvement can be expected by reducing the size of the images loaded on the site. The plugin called imagify is very effective because it automatically reduces the size of image files in the media library (including other sizes such as thumbnails).

If you don't mind the image quality, you can reduce them all in Ultra mode. Also, reduce the resolution (resize) of background images, etc. in the first place.

Asset CleanUp

When "Eliminate render-blocking resources" comes up high in the pagespeed insights diagnostic results, a significant improvement can be expected by reducing the loading time of external files. The following measures were taken using Asset CleanUp, and the speed improved, so I will show them.

  • Minify and combine css
  • Remove unused css
  • Unify and make async when there are multiple CDN requests for Google Fonts

(However, during front-end development, Sass maps and the like are also disabled, significantly reducing readability, so do this after development is complete.)