ವಿಷಯ ಮಾರ್ಕೆಟಿಂಗ್

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಅಡೋಬ್ ಫಾಂಟ್‌ಗಳನ್ನು (ಟೈಪ್‌ಕಿಟ್) ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡುವುದು ಹೇಗೆ

ನನ್ನ ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ನಾನು ನೋಡುತ್ತಿರುವಂತೆ, ಕಾಳಜಿಯ ಒಂದು ಕ್ಷೇತ್ರವೆಂದರೆ ನಾನು ಅಡೋಬ್ ಫಾಂಟ್‌ಗಳ ಮೂಲಕ ಬಳಸುತ್ತಿರುವ ಕಸ್ಟಮ್ ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದು ಅಡೋಬ್ ಕ್ರಿಯೇಟಿವ್ ಮೇಘ (ಟೈಪ್ಕಿಟ್ ಎಂದೂ ಕರೆಯಲಾಗುತ್ತದೆ). ನೀವು ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಬಯಸಿದರೆ, ಕೆಲವು ಮಾರ್ಗಗಳಿವೆ:

  • ಬ್ರೌಸರ್-ಸುರಕ್ಷಿತ ಫಾಂಟ್‌ಗಳು: ಯಾವುದೇ ಕಸ್ಟಮ್ ಫಾಂಟ್‌ಗಳ ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸುವ ಮೂಲಕ ಮತ್ತು ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್-ಬೆಂಬಲಿತ ಫಾಂಟ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ನೀವು ಸೈಟ್‌ನ ವೇಗವನ್ನು ನಾಟಕೀಯವಾಗಿ ಹೆಚ್ಚಿಸಬಹುದು. ಇದು ಒಂದು ಆಯ್ಕೆಯಾಗಿ ಕಂಡುಬಂದರೂ, ಒಟ್ಟಾರೆ ಸೌಂದರ್ಯಶಾಸ್ತ್ರವು ಭಯಾನಕವಾಗಿರುತ್ತದೆ. ನೀವು ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಟೈಮ್ಸ್ ನ್ಯೂ ರೋಮನ್, ಜಾರ್ಜಿಯಾ ಮತ್ತು ಕೊರಿಯರ್ ನ್ಯೂಗೆ ಸೀಮಿತವಾಗಿರುವುದರಿಂದ ಹೆಚ್ಚಿನ ಕಂಪನಿಗಳಿಗೆ ಇದು ವಾಸ್ತವಿಕ ಆಯ್ಕೆಯಾಗಿಲ್ಲ.
  • ಸ್ವಯಂ ಹೋಸ್ಟಿಂಗ್ ಫಾಂಟ್‌ಗಳು: ನೀವು ಫಾಂಟ್‌ಗಳಿಗೆ ಪರವಾನಗಿಯನ್ನು ಖರೀದಿಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮ ಸರ್ವರ್‌ನಲ್ಲಿ ಲೋಡ್ ಮಾಡಬಹುದು. ಮಾಡಬಹುದಾದ ಹೆಚ್ಚುವರಿ ಅಭಿವೃದ್ಧಿಯೂ ಇದೆ ಆದ್ದರಿಂದ ಅವುಗಳು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತವೆ ... ಆದರೆ ಇದು ಸ್ವಲ್ಪ ಕೆಲಸದಂತೆ ತೋರುತ್ತದೆ.
  • ಹೋಸ್ಟ್ ಮಾಡಿದ ಫಾಂಟ್‌ಗಳು: ಹೆಚ್ಚಿನ ವೆಬ್ ವಿನ್ಯಾಸಕರು ಹೋಸ್ಟ್ ಮಾಡಿದ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುತ್ತಾರೆ, ಅಲ್ಲಿ ನೀವು ಫಾಂಟ್‌ಗಳ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ನಿರ್ಮಿಸಬಹುದು ಮತ್ತು ತ್ವರಿತ ಕೋಡ್ ತುಣುಕಿನೊಂದಿಗೆ ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ಅವುಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು ಮತ್ತು ಪ್ರದರ್ಶಿಸಲು ಕೋಡ್ ಅನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಈ ಮಾರುಕಟ್ಟೆಯಲ್ಲಿ ಎರಡು ಪ್ರಮುಖ ಆಟಗಾರರು ಅಡೋಬ್ ಮತ್ತು ಗೂಗಲ್ ಫಾಂಟ್ಗಳು. ಅನೇಕ ಸೆಂ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ಇವುಗಳನ್ನು ಸೇರಿಸಲು ಕಾರ್ಯವನ್ನು ಸಂಯೋಜಿಸುತ್ತವೆ.

ಅಡೋಬ್ ಫಾಂಟ್‌ಗಳು

ಅಡೋಬ್ ಫಾಂಟ್‌ಗಳೊಂದಿಗೆ, ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ನೀವು ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ಫಾಂಟ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ ಮತ್ತು ನಂತರ ಅವುಗಳೊಂದಿಗೆ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿ. ಇಲ್ಲಿ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ನಿಮ್ಮ ಸೈಟ್‌ನಾದ್ಯಂತ ನೀವು ಬಳಸಲು ಬಯಸುವ ಫಾಂಟ್‌ಗಳನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡುವುದು ಮತ್ತು ಇನ್ನು ಮುಂದೆ ಇಲ್ಲ... ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಹೆಚ್ಚಿನ ಫಾಂಟ್‌ಗಳು ಮತ್ತು ಶೈಲಿಗಳು, ನಿಮ್ಮ ಸೈಟ್ ನಿಧಾನವಾಗಿರುತ್ತದೆ.

ಅಡೋಬ್ ಫಾಂಟ್ ಯೋಜನೆ martech zone

ಪ್ರಾಜೆಕ್ಟ್ ಐಡಿ ಹೇಗೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ (xxxxxx) ಅನ್ನು ಪ್ರತಿಯೊಂದು ಕೋಡ್ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ನೀವು ಈ ಕೋಡ್ ಅನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ, ಪ್ರಾಜೆಕ್ಟ್ ಐಡಿಯನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಐಡಿಯೊಂದಿಗೆ ಬದಲಾಯಿಸಲು ಮರೆಯದಿರಿ ಅಥವಾ ಅದು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ನೀವು ನೋಡುವಂತೆ, ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಡೀಫಾಲ್ಟ್ ಸ್ಕ್ರಿಪ್ಟ್ ಒದಗಿಸಲಾಗಿದೆ:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

ದುರದೃಷ್ಟವಶಾತ್, ಅಡೋಬ್ ಫಾಂಟ್‌ಗಳು ನಿಮ್ಮ ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಉತ್ತಮ ಆಯ್ಕೆಯನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ... ಅದು ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೂ ಸಹ. ಕೆಳಗಿನ ಲೆಗಸಿ JavaScript ಕೋಡ್ ಒದಗಿಸಿದ Adobe ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದಕ್ಕಿಂತ ವೇಗವಾಗಿರುತ್ತದೆ ಸಿಎಸ್ಎಸ್ ಕೆಲವು ಕಾರಣಗಳಿಗಾಗಿ:

  1. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಬಳಸುತ್ತದೆ ಅಸಮಕಾಲಿಕ ಲೋಡ್ ಆಗುತ್ತಿದೆ, ಅಂದರೆ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತಿರುವಾಗ ಬ್ರೌಸರ್ ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸಬಹುದು. ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ, ನೀವು CSS ಮೂಲಕ ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ, ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು CSS ಫೈಲ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಪಾರ್ಸ್ ಮಾಡಲು ಬ್ರೌಸರ್ ಕಾಯಬೇಕು. ಇದು ಫಾಂಟ್ ಲೋಡಿಂಗ್‌ನಲ್ಲಿ ವಿಳಂಬ ಮತ್ತು ನಿಧಾನವಾದ ಪುಟ ಲೋಡ್ ಸಮಯಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು.
  2. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಬಳಸುತ್ತದೆ ಟೈಪ್‌ಕಿಟ್ ವೆಬ್ ಫಾಂಟ್ ಲೋಡರ್, ಇದು ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಹೆಚ್ಚುವರಿ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ವೆಬ್ ಫಾಂಟ್ ಲೋಡರ್ ಬ್ರೌಸರ್ ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂಬುದನ್ನು ಪತ್ತೆ ಮಾಡುತ್ತದೆ @font-face ನಿಯಮ ಮತ್ತು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಫಾಂಟ್‌ಗಳನ್ನು ಅನಗತ್ಯವಾಗಿ ಲೋಡ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಬಹುದು
    @font-face. ಇದು ಉತ್ತಮ ಫಾಂಟ್ ಲೋಡಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸುಧಾರಿತ ಫಾಂಟ್ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಸಹ ಒದಗಿಸುತ್ತದೆ.
  3. CSS ವಿಧಾನಕ್ಕೆ ಹೆಚ್ಚುವರಿ ಅಗತ್ಯವಿದೆ HTTP CSS ಫೈಲ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳಲು ವಿನಂತಿಸಿ, ಆದರೆ JavaScript ಕೋಡ್ ಸ್ವಯಂ-ಒಳಗೊಂಡಿರುತ್ತದೆ ಮತ್ತು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಫೈಲ್‌ಗಳ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ ತರಬೇಕು. ಇದು JavaScript ಕೋಡ್‌ಗಾಗಿ ಸ್ವಲ್ಪ ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುವ ಸಮಯವನ್ನು ಉಂಟುಮಾಡಬಹುದು.

ಒಟ್ಟಾರೆಯಾಗಿ, Typekit ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಈ ಪರಂಪರೆಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಧಾನವನ್ನು ಬಳಸುವುದರಿಂದ CSS ವಿಧಾನವನ್ನು ಬಳಸುವುದಕ್ಕಿಂತ ವೇಗವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹವಾದ ಫಾಂಟ್ ಲೋಡ್ ಆಗಬಹುದು.

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

ನೀವು WordPress ಸೈಟ್ ಅನ್ನು ಚಲಾಯಿಸುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ನಿಮ್ಮ functions.php ಫೈಲ್ ಅನ್ನು ಸಹ ನೀವು ನವೀಕರಿಸಬಹುದು:

add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
	wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <?php }
}

ನಿಮ್ಮ ಸೈಟ್‌ನ ವೇಗವನ್ನು ಸುಧಾರಿಸಲು ನೀವು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವಾಗ ಪ್ರತಿ ಸ್ವಲ್ಪವೂ ಎಣಿಕೆಯಾಗುತ್ತದೆ. ಅಡೋಬ್ ಫಾಂಟ್‌ಗಳು ತುಂಬಾ ವೇಗದ ಸೇವೆಯಲ್ಲ, ಆದ್ದರಿಂದ ಪ್ರತಿ ಪುಟದ ಲೋಡ್‌ನೊಂದಿಗೆ ಸ್ವಲ್ಪ ಸಮಯವನ್ನು ಕ್ಷೌರ ಮಾಡಲು ಸಹಾಯ ಮಾಡುವುದರಿಂದ ವ್ಯತ್ಯಾಸವನ್ನು ಮಾಡಬಹುದು!

Douglas Karr

Douglas Karr ನ ಸಿಎಂಒ ಆಗಿದೆ ಓಪನ್‌ಇನ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಸ್ಥಾಪಕ Martech Zone. ಡಗ್ಲಾಸ್ ಹಲವಾರು ಯಶಸ್ವಿ ಮಾರ್ಟೆಕ್ ಸ್ಟಾರ್ಟ್‌ಅಪ್‌ಗಳಿಗೆ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ, ಮಾರ್ಟೆಕ್ ಸ್ವಾಧೀನಗಳು ಮತ್ತು ಹೂಡಿಕೆಗಳಲ್ಲಿ $5 ಬಿಲಿಯನ್‌ಗಿಂತ ಹೆಚ್ಚಿನ ಪರಿಶ್ರಮದಲ್ಲಿ ಸಹಾಯ ಮಾಡಿದ್ದಾರೆ ಮತ್ತು ಕಂಪನಿಗಳು ತಮ್ಮ ಮಾರಾಟ ಮತ್ತು ಮಾರುಕಟ್ಟೆ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮತ್ತು ಸ್ವಯಂಚಾಲಿತಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುವುದನ್ನು ಮುಂದುವರೆಸಿದ್ದಾರೆ. ಡೌಗ್ಲಾಸ್ ಅಂತರಾಷ್ಟ್ರೀಯವಾಗಿ ಗುರುತಿಸಲ್ಪಟ್ಟ ಡಿಜಿಟಲ್ ರೂಪಾಂತರ ಮತ್ತು ಮಾರ್ಟೆಕ್ ತಜ್ಞ ಮತ್ತು ಸ್ಪೀಕರ್. ಡೌಗ್ಲಾಸ್ ಅವರು ಡಮ್ಮೀಸ್ ಗೈಡ್ ಮತ್ತು ವ್ಯಾಪಾರ ನಾಯಕತ್ವ ಪುಸ್ತಕದ ಪ್ರಕಟಿತ ಲೇಖಕರೂ ಆಗಿದ್ದಾರೆ.

ಸಂಬಂಧಿತ ಲೇಖನಗಳು

ಮೇಲಿನ ಬಟನ್ಗೆ ಹಿಂತಿರುಗಿ
ಮುಚ್ಚಿ

ಆಡ್‌ಬ್ಲಾಕ್ ಪತ್ತೆಯಾಗಿದೆ

Martech Zone ಜಾಹೀರಾತು ಆದಾಯ, ಅಂಗಸಂಸ್ಥೆ ಲಿಂಕ್‌ಗಳು ಮತ್ತು ಪ್ರಾಯೋಜಕತ್ವಗಳ ಮೂಲಕ ನಾವು ನಮ್ಮ ಸೈಟ್‌ನಿಂದ ಹಣಗಳಿಸುವುದರಿಂದ ಯಾವುದೇ ವೆಚ್ಚವಿಲ್ಲದೆ ಈ ವಿಷಯವನ್ನು ನಿಮಗೆ ಒದಗಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ನೀವು ನಮ್ಮ ಸೈಟ್ ಅನ್ನು ವೀಕ್ಷಿಸಿದಾಗ ನಿಮ್ಮ ಜಾಹೀರಾತು ಬ್ಲಾಕರ್ ಅನ್ನು ನೀವು ತೆಗೆದುಹಾಕಿದರೆ ನಾವು ಪ್ರಶಂಸಿಸುತ್ತೇವೆ.