ਸਾਈਟ ਦੀ ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਘਟਾਉਣ ਲਈ ਫੌਂਟਾਂ ਨੂੰ ਸਥਾਨਕ ਰੂਪ ਵਿੱਚ ਹੋਸਟ ਕਰਨਾ

ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰਨਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੀ ਵੈੱਬਸਾਈਟ 'ਤੇ ਵਰਤੇ ਜਾ ਰਹੇ ਫੋਂਟ ਫਾਇਲਾਂ ਨੂੰ ਕਿਸੇ ਤੀਜੇ ਪੱਖ ਦੇ ਸਰਵਿਸ ਦੀ ਥਾਂ ਆਪਣੇ ਹੋਸਟਿੰਗ ਖਾਤੇ, ਸਰਵਰ ਜਾਂ ਆਪਣੀ CDN ਰਾਹੀਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ। ਜੇ ਠੀਕ ਤਰੀਕੇ ਨਾਲ ਕੀਤਾ ਜਾਵੇ ਤਾਂ ਇਹ DNS ਖੋਜ, TLS ਹੈਂਡਸ਼ੇਕ ਅਤੇ ਬਾਹਰੀ ਬੇਨਤੀਆਂ ਦੀ ਦੇਰੀ ਨੂੰ ਘਟਾ ਕੇ ਤੁਹਾਡੇ ਸਾਈਟ ਦੇ ਲੋਡ ਹੋਣ ਦਾ ਸਮਾਂ ਘਟਾ ਸਕਦਾ ਹੈ; ਖਾਸ ਕਰਕੇ Core Web Vitals, ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ SEO ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਇਹ ਮਾਪਣਯੋਗ ਫਾਇਦਾ ਦਿੰਦਾ ਹੈ। ਸਭ ਤੋਂ ਵਧੀਆ ਨਤੀਜੇ ਲਈ ਸਿਰਫ਼ ਜਰੂਰੀ ਫੋਂਟ ਵਜ਼ਨ ਵਰਤੋਂ, WOFF2 ਫਾਰਮੈਟ ਨੂੰ ਤਰਜੀਹ ਦਿਓ, ਅਹਿਮ ਫੋਂਟਾਂ ਨੂੰ preload ਕਰੋ ਅਤੇ CSS ਵਿੱਚ font-display: swap ਸੈੱਟ ਕਰੋ।

ਕਈ ਵੈੱਬਸਾਈਟਾਂ ਡਿਜ਼ਾਈਨ ਦੌਰਾਨ ਬਿਨਾ ਧਿਆਨ ਦਿੱਤੇ Google Fonts, Adobe Fonts ਜਾਂ ਥੀਮ ਨਾਲ ਆਉਣ ਵਾਲੇ ਦੂਰੇ ਫੋਂਟ ਲਿੰਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ। ਪਹਿਲੀ ਨਜ਼ਰ ਵਿੱਚ ਇਹ ਤਰੀਕਾ ਆਸਾਨ ਲੱਗਦਾ ਹੈ, ਪਰ ਹਰ ਵਿਜ਼ਟਰ ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਲਈ ਵਾਧੂ ਡੋਮੇਨ ਨਾਂ ਹੱਲ ਕਰਨ, ਕਨੈਕਸ਼ਨ ਬਣਾਉਣ ਅਤੇ ਫਾਇਲ ਡਾਊਨਲੋਡ ਕਰਨ ਵਾਲੀਆਂ ਸਟੈਪਸ ਸ਼ਾਮਲ ਕਰ ਦਿੰਦਾ ਹੈ। ਮੋਬਾਈਲ ਨੈਟਵਰਕਾਂ ਵਿੱਚ 100-300 ਮਿਲੀਸੈਕਿੰਡ ਦੀ ਛੋਟੀ ਲੱਗਣ ਵਾਲੀ ਦੇਰੀ ਕਈ ਫੋਂਟ ਪਰਿਵਾਰਾਂ ਅਤੇ ਵੱਖ-ਵੱਖ ਵਜ਼ਨਾਂ ਨਾਲ ਮਿਲ ਕੇ ਕੁੱਲ ਪੇਜ਼ ਲੋਡਿੰਗ ਸਮੇਂ ਨੂੰ ਕਾਫੀ ਵਧਾ ਸਕਦੀ ਹੈ। ਇਸ ਲਈ self-host fonts ਦਾ ਤਰੀਕਾ ਸਿਰਫ਼ ਤਕਨੀਕੀ ਗੱਲ ਨਹੀਂ; ਇਹ ਤੇਜ਼, ਵਧੇਰੇ ਕੰਟਰੋਲ ਵਾਲਾ ਅਤੇ ਲੰਮੀ ਮਿਆਦ ਲਈ ਸਥਿਰ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਕৌশਲ ਹੈ।

ਇਸ ਗਾਈਡ ਵਿੱਚ ਅਸੀਂ ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰਨ ਦੇ ਫਾਇਦੇ, ਕਦੋਂ ਇਹ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ, WordPress ਜਾਂ ਕਸਟਮ ਸਾਫਟਵੇਅਰ ਵਾਲੀਆਂ ਵੈੱਬਸਾਈਟਾਂ 'ਤੇ ਇਹ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ ਅਤੇ 2026 ਦੇ SEO ਮਿਆਰਾਂ ਮੁਤਾਬਕ ਕਿਹੜੀਆਂ ਗਲਤੀਆਂ ਤੋਂ ਬਚਣਾ ਚਾਹੀਦਾ ਹੈ, ਇਹ ਸਾਰੇ ਪੌੜੀਆਂ ਵਾਰ ਸਮਝਾਵਾਂਗੇ। ਨਾਲ ਹੀ, ਤੁਸੀਂ Hostragons ਉੱਤੇ ਤੇਜ਼ ਅਤੇ ਸੁਰੱਖਿਅਤ ਹੋਸਟਿੰਗ ਇੰਫਰਾਸਟਰੱਕਚਰ ਵਰਤਦਿਆਂ ਫੋਂਟ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਦੀ ਯੋਜਨਾ ਕਿਵੇਂ ਬਣਾਈ ਜਾ ਸਕਦੀ ਹੈ, ਇਸ ਬਾਰੇ ਵੀ ਪ੍ਰੈਕਟੀਕਲ ਸੁਝਾਅ ਮਿਲਣਗੇ। ਹੋਸਟਿੰਗ ਚੋਣ ਤੁਹਾਡੇ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਬੁਨਿਆਦ ਹੈ; ਫੋਂਟ ਓਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਉਸ ਬੁਨਿਆਦ 'ਤੇ ਬਣਾਈ ਗਈ ਨਰਮ ਸੈਟਿੰਗ ਹੈ। ਸੰਬੰਧਤ ਇੰਫਰਾਸਟਰੱਕਚਰ ਵਿਕਲਪਾਂ ਲਈ Hostragons ਵੈੱਬ ਹੋਸਟਿੰਗ ਪੈਕੇਜ ਲਿੰਕ ਜ਼ਰੂਰ ਵੇਖੋ।

ਫੌਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰਨਾ ਕੀ ਹੈ?

ਫੌਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰਨਾ ਮਤਲਬ ਹੈ ਕਿ ਕਿਸੇ ਲਿਪੀ ਦੇ ਫਾਇਲਾਂ ਨੂੰ ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟ ਦੇ ਫਾਇਲ ਸਿਸਟਮ ਵਿੱਚ ਸਟੋਰ ਕਰਕੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਉਥੋਂ ਹੀ ਪ੍ਰਦਾਨ ਕਰਨਾ। ਉਦਾਹਰਨ ਵਜੋਂ, Google Fonts ਤੋਂ Inter, Roboto ਜਾਂ Montserrat ਨੂੰ ਸਿੱਧਾ ਕਾਲ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਸੰਬੰਧਿਤ WOFF2 ਫਾਇਲਾਂ ਡਾਊਨਲੋਡ ਕਰਕੇ ਆਪਣੀ ਸਾਈਟ ਦੇ /fonts ਜਾਂ /assets/fonts ਫੋਲਡਰ ਵਿੱਚ ਅਪਲੋਡ ਕਰ ਸਕਦੇ ਹੋ। ਫਿਰ CSS ਫਾਇਲ ਵਿੱਚ @font-face ਰੂਲ ਨਾਲ ਇਨ੍ਹਾਂ ਫਾਇਲਾਂ ਦਾ ਰਸਤਾ ਦਰਜ ਕਰਦੇ ਹੋ। ਬ੍ਰਾਉਜ਼ਰ, ਪੇਜ ਲੋਡ ਹੋਣ 'ਤੇ ਬਾਹਰੀ ਫੌਂਟ ਸਰਵਿਸਾਂ 'ਤੇ ਜਾਣ ਦੀ ਜਗ੍ਹਾ ਸਿੱਧਾ ਤੁਹਾਡੇ ਡੋਮੇਨ ਤੋਂ ਫੌਂਟ ਫਾਇਲ ਲੈ ਲੈਂਦਾ ਹੈ।

ਇਹ ਤਰੀਕਾ ਖਾਸ ਕਰਕੇ ਪ੍ਰਦਰਸ਼ਨ, ਪ੍ਰਾਈਵੇਸੀ ਅਤੇ ਕੰਟਰੋਲ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਤੁਸੀਂ ਫੌਂਟ ਫਾਇਲਾਂ ਕਿਸ ਫਾਰਮੈਟ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰਨੀਆਂ ਹਨ, ਕਿੰਨੀ ਦੇਰ ਲਈ ਕੈਸ਼ ਕਰਨੀ ਹੈ, ਕਿਹੜੇ ਵਜ਼ਨ ਲੋਡ ਕਰਨੇ ਹਨ ਅਤੇ ਕਿਹੜੇ ਪੰਨੇ 'ਤੇ ਵਰਤਣੇ ਹਨ ਇਹ ਸਾਰੇ ਫੈਸਲੇ ਖुद ਕਰਦੇ ਹੋ। ਉਦਾਹਰਨ ਵਜੋਂ ਜੇ ਤੁਹਾਡੇ ਸਾਈਟ 'ਤੇ ਸਿਰਫ 400 ਅਤੇ 700 ਵਜ਼ਨ ਵਰਤੇ ਜਾ ਰਹੇ ਹਨ ਤਾਂ 300, 500, 600, 800 ਵਰਗੀਆਂ ਬੇਕਾਰ ਫਾਇਲਾਂ ਨੂੰ ਸਟੋਰ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ। ਇਸ ਤਰ੍ਹਾਂ ਕੁੱਲ ਫਾਇਲ ਸਾਈਜ਼ ਘਟਦੀ ਹੈ ਅਤੇ CSS ਦੀ ਜਟਿਲਤਾ ਘਟਦੀ ਹੈ।

ਅਮਲੀ ਤੌਰ 'ਤੇ ਸੈਲਫ-ਹੋਸਟ ਫੌਂਟ ਦੀ ਤਿੰਨ ਮੁੱਖ ਚੀਜ਼ਾਂ ਹੁੰਦੀਆਂ ਹਨ: ਓਪਟੀਮਾਈਜ਼ਡ ਫੌਂਟ ਫਾਇਲ, ਸਹੀ CSS ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਸਰਵਰ ਕੈਸ਼ਿੰਗ। ਜੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਇੱਕ ਘੱਟ ਹੋਵੇ ਤਾਂ ਉਮੀਦ ਕੀਤੀ ਗਈ ਤੇਜ਼ੀ ਨਹੀਂ ਮਿਲਦੀ। ਉਦਾਹਰਨ ਵਜੋਂ WOFF2 ਦੀ ਥਾਂ ਪੁਰਾਣਾ TTF ਫਾਇਲ ਵਰਤੀ ਜਾਵੇ ਤਾਂ ਫਾਇਲ ਦਾ ਸਾਈਜ਼ ਵੱਧ ਜਾਂਦਾ ਹੈ। ਜੇ ਕੈਸ਼ ਹੈਡਰ ਗਲਤ ਹਨ ਤਾਂ ਯੂਜ਼ਰ ਨੂੰ ਹਰ ਪੇਜ ਤੇ ਫੌਂਟ ਨੂੰ ਦੁਬਾਰਾ ਡਾਊਨਲੋਡ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਜੇ ਪ੍ਰੀਲੋਡ ਗਲਤ ਵਰਤੀ ਜਾਵੇ ਤਾਂ ਬ੍ਰਾਉਜ਼ਰ ਬੇਕਾਰ ਤਰਜੀਹ ਦੇ ਸਕਦਾ ਹੈ।

ਫੋਂਟ ਅਪਟੀਮਾਈਜੇਸ਼ਨ SEO ਲਈ ਕਿਉਂ ਜਰੂਰੀ ਹੈ?

ਗੂਗਲ, ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਆਪਣੀ ਰੈਂਕਿੰਗ ਸਿਸਟਮਾਂ ਵਿੱਚ ਸਿੱਧੇ ਅਤੇ ਅੜਿੱਕੇ ਸੰਕੇਤਾਂ ਰਾਹੀਂ ਮਾਪਦਾ ਹੈ। ਸਾਈਟ ਦੀ ਰਫ਼ਤਾਰ, ਮੋਬਾਈਲ ਉਪਲਬਧਤਾ, ਇੰਟਰਐਕਸ਼ਨ ਦੇਰੀ ਅਤੇ ਵਿਜ਼ੂਅਲ ਸਥਿਰਤਾ ਇਸ ਮਾਪਣ ਵਿੱਚ ਅਹਿਮ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੇ ਹਨ। ਫੋਂਟ, Largest Contentful Paint, Cumulative Layout Shift ਅਤੇ ਲੋਡ ਹੋਣ ਦੀ ਮਹਿਸੂਸ ਕੀਤੀ ਸਮਾਂ ਉੱਤੇ ਪ੍ਰਭਾਵ ਪਾ ਸਕਦੇ ਹਨ। ਜੇ ਸਿਰਲੇਖ ਜਾਂ ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਟੈਕਸਟ ਕਿਸੇ ਖ਼ਾਸ ਫੋਂਟ ਨਾਲ ਰੇਂਡਰ ਹੋ ਰਿਹਾ ਹੈ, ਤਾਂ ਫੋਂਟ ਫਾਇਲ ਦੇ ਦੇਰੀ ਨਾਲ ਲੋਡ ਹੋਣ ਨਾਲ LCP ਮੁੱਲ ਵਿੱਚ ਦੇਰੀ ਹੋ ਸਕਦੀ ਹੈ।

2026 ਦੇ SEO ਰੁਝਾਨ ਵਿੱਚ ਸਮੱਗਰੀ ਦੀ ਗੁਣਵੱਤਾ ਦੇ ਨਾਲ-ਨਾਲ ਤਕਨੀਕੀ ਪਹੁੰਚਯੋਗਤਾ ਵੀ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਗੂਗਲਬੋਟ ਤੁਹਾਡੇ ਪੰਨੇ ਨੂੰ ਸਕੈਨ ਕਰਦਿਆਂ ਤੁਹਾਡੇ ਸਰੋਤ ਫਾਇਲਾਂ ਤੱਕ ਪਹੁੰਚ ਸਕਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਯੂਜ਼ਰ ਤੇਜ਼ ਤੇ ਸਥਿਰ ਢੰਗ ਨਾਲ ਪੰਨਾ ਵੇਖ ਸਕਣ। ਬਾਹਰੀ ਫੋਂਟ ਪ੍ਰਦਾਤਾ ਵੱਲੋਂ ਹੋਣ ਵਾਲੀਆਂ ਕਨੈਕਸ਼ਨ ਦੀ ਦੇਰੀ, ਦੇਸ਼ ਅਨੁਸਾਰ ਪਹੁੰਚ ਸਮੱਸਿਆਵਾਂ ਜਾਂ ਕਈ ਵਾਰੀ ਹੋਣ ਵਾਲੀਆਂ DNS ਸਮੱਸਿਆਵਾਂ ਤੁਹਾਡੇ ਸਾਈਟ ਦੇ ਕੰਟਰੋਲ ਤੋਂ ਬਾਹਰ ਹੁੰਦੀਆਂ ਹਨ। ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰਕੇ ਇਹ ਅਣਿਸ਼ਚਿਤਤਾ ਘਟਾਈ ਜਾ ਸਕਦੀ ਹੈ।

ਆਓ ਇੱਕ ਅਨੁਭਵ-ਕੇਂਦਰਿਤ ਉਦਾਹਰਨ ਦੇਈਏ: 1.8 MB ਕੁੱਲ ਪੰਨਾ ਸਾਈਜ਼ ਵਾਲੀ ਇੱਕ ਕਾਰਪੋਰੇਟ ਸਾਈਟ ਵਿੱਚ ਜਦੋਂ ਚਾਰ ਵੱਖ-ਵੱਖ Google Fonts ਪਰਿਵਾਰ, ਅੱਠ ਵਜ਼ਨ ਅਤੇ ਦੋ ਵੈਰੀਏਸ਼ਨ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਸਿਰਫ਼ ਫੋਂਟ ਦੀਆਂ ਬੇਨਤੀਆਂ 450-700 KB ਦੇ ਦਰਮਿਆਨ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਨ੍ਹਾਂ ਫਾਇਲਾਂ ਵਿੱਚੋਂ ਕੁਝ ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਵਰਤੀਆਂ ਨਹੀਂ ਜਾ ਰਹੀਆਂ ਹੋਣ ਦੇ ਬਾਵਜੂਦ ਬ੍ਰਾਊਜ਼ਰ CSS ਦੀ ਵਜ੍ਹਾ ਨਾਲ ਉਹਨਾਂ ਨੂੰ ਮੰਗ ਸਕਦਾ ਹੈ। ਜੇਕਰ ਉਹੀ ਡਿਜ਼ਾਈਨ ਦੋ ਫੋਂਟ ਪਰਿਵਾਰਾਂ, ਤਿੰਨ ਵਜ਼ਨਾਂ ਅਤੇ WOFF2 ਸਬਸੈੱਟ ਨਾਲ ਤਿਆਰ ਕੀਤੀ ਜਾਵੇ, ਤਾਂ ਫੋਂਟ ਦਾ ਆਕਾਰ 90-180 KB ਦੇ ਦਰਮਿਆਨ ਆ ਸਕਦਾ ਹੈ। ਇਹ ਫਰਕ ਖ਼ਾਸ ਕਰਕੇ 4G ਕਨੈਕਸ਼ਨ ਅਤੇ ਘੱਟ ਤਾਕਤ ਵਾਲੇ ਜੰਤਰਾਂ 'ਤੇ ਮਹਿਸੂਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਬਾਹਰੀ ਫੋਂਟ ਸਰਵਿਸ ਅਤੇ ਲੋਕਲ ਫੋਂਟ ਹੋਸਟਿੰਗ ਦੀ ਤੁਲਨਾ

ਹਰ ਵੈੱਬਸਾਈਟ ਲਈ ਇੱਕੋ ਜਿਹਾ ਹੱਲ ਨਹੀਂ ਹੁੰਦਾ। ਕੁਝ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਬਾਹਰੀ ਫੋਂਟ ਸਰਵਿਸ ਕਾਫ਼ੀ ਹੋ ਸਕਦੀ ਹੈ; ਜਦਕਿ ਕੁਝ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਲੋਕਲ ਹੋਸਟਿੰਗ ਬਹੁਤ ਵਧੀਆ ਨਤੀਜੇ ਦਿੰਦੀ ਹੈ। ਹੇਠਾਂ ਦਿੱਤਾ ਗਿਆ ਟੇਬਲ ਤੁਹਾਨੂੰ ਫੈਸਲਾ ਕਰਨ ਵਿੱਚ ਮੁੱਖ ਫਰਕਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।

ਸਾਰ ਵਿੱਚ, ਜੇ ਤੁਸੀਂ ਕੰਟਰੋਲ ਅਤੇ ਪਰਫਾਰਮੈਂਸ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਲੋਕਲ ਹੋਸਟਿੰਗ ਇੱਕ ਮਜ਼ਬੂਤ ਵਿਕਲਪ ਹੈ। ਪਰ ਇਹ ਢੰਗ ਸਿਰਫ "ਫੋਂਟਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਕੇ ਸਰਵਰ 'ਤੇ ਰੱਖਣਾ" ਵਰਗਾ ਸਧਾਰਨ ਨਹੀਂ ਹੈ। ਗਲਤ ਫਾਈਲ ਫਾਰਮੈਟ, ਬੇਕਾਰ ਭਾਰ ਜਾਂ ਗਲਤ CSS ਨਾਲ ਪਰਫਾਰਮੈਂਸ ਨੂੰ ਸੁਧਾਰਨ ਦੀ ਬਜਾਏ ਖਰਾਬ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰਨ ਦਾ ਸਾਈਟ ਦੀ ਗਤੀ 'ਤੇ ਪ੍ਰਭਾਵ

ਫੋਂਟ ਫਾਈਲਾਂ ਛੋਟੀਆਂ ਲੱਗਦੀਆਂ ਹਨ, ਪਰ ਪੇਜ ਲੋਡਿੰਗ ਚੇਨ ਵਿੱਚ ਇਹ ਮਹੱਤਵਪੂਰਨ ਸਰੋਤ ਬਣ ਸਕਦੀਆਂ ਹਨ। ਬ੍ਰਾਉਜ਼ਰ ਪਹਿਲਾਂ HTML ਲੈਂਦਾ ਹੈ, ਫਿਰ CSS ਫਾਈਲਾਂ ਡਾਊਨਲੋਡ ਕਰਦਾ ਹੈ ਅਤੇ CSS ਵਿੱਚ ਦਿੱਤੇ ਫੋਂਟਾਂ ਨੂੰ ਲੱਭਦਾ ਹੈ। ਜੇ ਤੁਹਾਡੇ ਸਿਰਲੇਖ, ਮੇਨੂ ਜਾਂ ਮੁੱਖ ਟੈਕਸਟ ਕਿਸੇ ਖਾਸ ਫੋਂਟ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ, ਤਾਂ ਬ੍ਰਾਉਜ਼ਰ ਟੈਕਸਟ ਦਿਖਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਫੋਂਟ ਫਾਈਲ ਦੀ ਉਡੀਕ ਕਰ ਸਕਦਾ ਹੈ। ਇਸ ਨਾਲ ਯੂਜ਼ਰ ਨੂੰ ਸਫੈਦ ਖਾਲੀ ਜਗ੍ਹਾ, ਅਦਿੱਖੀ ਟੈਕਸਟ ਜਾਂ ਅਚਾਨਕ ਫੋਂਟ ਬਦਲਾਅ ਵੇਖਣ ਨੂੰ ਮਿਲ ਸਕਦਾ ਹੈ।

ਪੈਰਫਾਰਮੈਂਸ ਪ੍ਰਭਾਵ ਨੂੰ ਸਮਝਣ ਲਈ ਤਿੰਨ ਮੈਟਰਿਕਸ ਮਹੱਤਵਪੂਰਨ ਹਨ। ਪਹਿਲਾ LCP ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਯੂਜ਼ਰ ਕਦੋਂ ਸਕ੍ਰੀਨ ਤੇ ਸਭ ਤੋਂ ਵੱਡਾ ਸਮੱਗਰੀ ਦਾ ਹਿੱਸਾ ਵੇਖਦਾ ਹੈ। ਦੂਜਾ CLS ਹੈ, ਜੋ ਫੋਂਟ ਬਦਲਾਅ ਕਾਰਨ ਟੈਕਸਟ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਿੱਚ ਹੋਣ ਵਾਲੇ ਬਦਲਾਅ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਸਰਕਾਉਣ ਹਨ। ਤੀਜਾ INP ਹੈ, ਜੋ ਇੰਟਰਐਕਸ਼ਨ ਸੈਂਸਿਟਿਵਿਟੀ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ; ਫੋਂਟ ਸਿੱਧਾ INP ਦਾ ਮੁੱਖ ਕਾਰਨ ਨਹੀਂ ਹੁੰਦੇ ਪਰ ਭਾਰੀ CSS ਅਤੇ ਲੋੜ ਤੋਂ ਵੱਧ ਸਰੋਤ ਮੁੱਖ ਕੰਮ ਵਾਲੇ ਧਾਗੇ ਨੂੰ ਬਿਜੀ ਕਰਕੇ ਪਰੋਕਸੀ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰ ਸਕਦੇ ਹਨ।

ਇੱਕ ਵਧੀਆ ਢੰਗ ਨਾਲ ਓਪਟੀਮਾਈਜ਼ ਕੀਤੀ ਫੋਂਟ ਰਣਨੀਤੀ ਵਿੱਚ ਟੀਚੇ ਇਹ ਹਨ: ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਫੋਂਟ 100 KB ਤੋਂ ਘੱਟ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਲੋੜ ਤੋਂ ਵੱਧ ਵੈਰੀਏਸ਼ਨ ਨਾ ਲੋਡ ਕੀਤੇ ਜਾਣ, ਫੋਂਟ ਫਾਈਲਾਂ ਨੂੰ ਲੰਬੇ ਸਮੇਂ ਲਈ ਕੈਸ਼ ਨਾਲ ਸਪਲਾਈ ਕੀਤਾ ਜਾਣ ਅਤੇ ਜਰੂਰਤ ਪੈਣ 'ਤੇ ਮਹੱਤਵਪੂਰਨ ਫੋਂਟ ਪਹਿਲਾਂ ਹੀ ਲੋਡ ਕੀਤੇ ਜਾਣ। ਜੇ ਕਿਸੇ ਈ-ਕਾਮਰਸ ਉਤਪਾਦ ਸਫ਼ੇ 'ਤੇ ਸਿਰਲੇਖ, ਕੀਮਤ ਅਤੇ CTA ਟੈਕਸਟ ਲਈ ਇੱਕੋ ਫੋਂਟ ਪਰਿਵਾਰ ਦੇ ਸਿਰਫ 400 ਅਤੇ 700 ਵਜ਼ਨ ਕਾਫੀ ਹਨ, ਤਾਂ 9 ਵੱਖ-ਵੱਖ ਵਜ਼ਨ ਲੋਡ ਕਰਨਾ ਫਜ਼ੂਲ ਖਰਚ ਹੈ। ਆਪਣੀ ਈ-ਕਾਮਰਸ ਇਨਫ੍ਰਾਸਟਰੱਕਚਰ ਦੀ ਗਤੀ ਨੂੰ ਵਧਾਉਣ ਲਈ ਤੁਸੀਂ ਉੱਚ ਪਰਫਾਰਮੈਂਸ ਵਾਲੀ ਹੋਸਟਿੰਗ ਹੱਲ ਸਫ਼ੇ ਨੂੰ ਵੇਖ ਸਕਦੇ ਹੋ।

ਸਵੈ-ਹੋਸਟ ਫੋਂਟਸ ਲਈ ਸਹੀ ਫੋਂਟ ਫਾਰਮੈਟ

WOFF2 ਸਭ ਤੋਂ ਵਧੀਆ ਕਿਉਂ ਹੈ?

ਆਧੁਨਿਕ ਵੈੱਬ ਲਈ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਫੋਂਟ ਫਾਰਮੈਟ ਬਹੁਤ ਸਾਰੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ WOFF2 ਹੈ। WOFF2 ਵਧੀਆ ਕੰਪ੍ਰੈਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਅਧਿਕਤਰ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰਾਂ ਦੁਆਰਾ ਸਮਰਥਿਤ ਹੈ। TTF ਜਾਂ OTF ਫਾਇਲਾਂ ਡਿਜ਼ਾਇਨ ਅਤੇ ਡੈਸਕਟਾਪ ਲਈ ਠੀਕ ਹੁੰਦੀਆਂ ਹਨ, ਪਰ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਵੱਡੀਆਂ ਹੁੰਦੀਆਂ ਹਨ। EOT ਵਰਗੇ ਪੁਰਾਣੇ ਫਾਰਮੈਟ ਹੁਣ ਸਿਰਫ ਬਹੁਤ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰਾਂ ਲਈ ਹੀ ਲਾਗੂ ਹੁੰਦੇ ਹਨ।

ਉਦਾਹਰਨ ਵਜੋਂ, ਇੱਕੋ ਫੋਂਟ ਦੀ TTF ਫਾਇਲ 300 KB ਹੋ ਸਕਦੀ ਹੈ ਜਦੋਂ ਕਿ WOFF2 ਵਰਜਨ 80-120 KB ਦੇ ਵਿਚਕਾਰ ਹੁੰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਕਈ ਵਜ਼ਨ ਵਰਤਦੇ ਹੋ ਤਾਂ ਇਹ ਫਰਕ ਵਧ ਜਾਂਦਾ ਹੈ। ਇਸ ਲਈ, ਲੋਕਲ ਹੋਸਟਿੰਗ ਕਰਦੇ ਸਮੇਂ ਫੋਂਟ ਫਾਇਲ ਨੂੰ ਸਿੱਧਾ ਲੋਡ ਕਰਨ ਦੀ ਬਜਾਏ, ਵੈੱਬ ਲਈ ਅਪਟਿਮਾਈਜ਼ਡ WOFF2 ਫਾਇਲ ਵਰਤਣੀ ਚਾਹੀਦੀ ਹੈ।

ਕੀ ਤੁਹਾਨੂੰ ਵੈਰੀਏਬਲ ਫੋਂਟ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ?

ਵੈਰੀਏਬਲ ਫੋਂਟ ਇੱਕ ਹੀ ਫਾਇਲ ਵਿੱਚ ਕਈ ਵਜ਼ਨ ਜਾਂ ਸਟਾਈਲ ਵੈਰੀਏਸ਼ਨ ਰੱਖ ਸਕਦਾ ਹੈ। ਜੇ ਤੁਹਾਡਾ ਡਿਜ਼ਾਇਨ 300 ਤੋਂ 800 ਤੱਕ ਕਈ ਵਜ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਵੈਰੀਏਬਲ ਫੋਂਟ ਸਮਝਦਾਰੀ ਵਾਲਾ ਵਿਕਲਪ ਹੈ। ਪਰ ਜੇ ਤੁਸੀਂ ਸਿਰਫ 400 ਅਤੇ 700 ਵਰਤ ਰਹੇ ਹੋ ਤਾਂ ਕਈ ਵਾਰੀ ਦੋ ਅਲੱਗ ਸਟੈਟਿਕ WOFF2 ਫਾਇਲਾਂ ਕੁੱਲ ਵੱਧ ਛੋਟੇ ਸਾਈਜ਼ ਦੇ ਹੁੰਦੀਆਂ ਹਨ। ਫੈਸਲਾ ਕਰਨ ਵੇਲੇ ਫਾਇਲ ਦਾ ਆਕਾਰ, ਵਰਤੇ ਗਏ ਵੈਰੀਏਸ਼ਨ ਦੀ ਗਿਣਤੀ ਅਤੇ ਬ੍ਰਾਉਜ਼ਰ ਸਹਾਇਤਾ ਦੀ ਜਾਂਚ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

ਇੱਕ ਤਜਰਬੇਕਾਰ ਪ੍ਰਦਰਸ਼ਨ ਤਰੀਕਾ ਇਹ ਹੈ: ਪਹਿਲਾਂ ਆਪਣੇ ਡਿਜ਼ਾਇਨ ਸਿਸਟਮ ਵਿੱਚ ਜਿਨ੍ਹਾਂ ਫੋਂਟ ਵਜ਼ਨਾਂ ਦੀ ਅਸਲ ਵਿੱਚ ਵਰਤੋਂ ਹੁੰਦੀ ਹੈ, ਉਹਨਾਂ ਦੀ ਸੂਚੀ ਬਣਾਓ। ਫਿਰ ਸਟੈਟਿਕ ਅਤੇ ਵੈਰੀਏਬਲ ਵਿਕਲਪਾਂ ਦੇ ਕੁੱਲ KB ਮੁੱਲਾਂ ਦੀ ਤੁਲਨਾ ਕਰੋ। ਜੋ ਛੋਟਾ, ਸਧਾਰਣ ਅਤੇ ਜ਼ਿਆਦਾ ਮਜ਼ਬੂਤ ਹੋਵੇ, ਉਹ ਚੁਣੋ। ਸੁੰਦਰਤਾ ਦੇ ਫੈਸਲੇ ਦੇ ਨਾਲ-ਨਾਲ ਮਾਪਦੰਡ ਵੀ ਡਿਜ਼ਾਇਨ ਪ੍ਰਕਿਰਿਆ ਦਾ ਹਿੱਸਾ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ।

ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟਿੰਗ ਕਿਵੇਂ ਕਰੀਏ?

ਹੇਠਾਂ ਦਿੱਤੇ ਕਦਮ WordPress, ਖ਼ਾਸ PHP ਐਪਲੀਕੇਸ਼ਨਾਂ, Laravel, Node.js ਅਧਾਰਤ ਪ੍ਰਾਜੈਕਟਾਂ ਅਤੇ ਸਟੈਟਿਕ ਸਾਈਟਾਂ ਲਈ ਅਨੁਕੂਲਿਤ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ। ਤਰਕ ਇਹੋ ਜਿਹਾ ਹੈ: ਫੁਜੂਲ ਫੋਂਟ ਹਟਾਓ, ਲੋੜੀਂਦੇ ਫਾਇਲਾਂ ਨੂੰ ਢੰਗ ਨਾਲ ਬਹਿਤਰ ਬਣਾਓ, ਆਪਣੀ ਸਰਵਰ ਤੋਂ ਸਰਵ ਕਰੋ ਅਤੇ ਨਤੀਜਾ ਟੈਸਟ ਕਰੋ।

1. ਮੌਜੂਦਾ ਫੋਂਟ ਇਸਤੇਮਾਲ ਦੀ ਜਾਂਚ ਕਰੋ

ਸਭ ਤੋਂ ਪਹਿਲਾ ਕਦਮ ਇਹ ਦੇਖਣਾ ਹੈ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ ਕਿਹੜੇ ਫੋਂਟ ਕਿੱਥੋਂ ਲੋਡ ਕਰ ਰਹੀ ਹੈ। Chrome DevTools ਦੇ Network ਟੈਬ ਵਿੱਚ “font” ਫਿਲਟਰ ਵਰਤ ਕੇ ਸਾਰੇ ਫੋਂਟ ਅਨੁਰੋਧਾਂ ਦੀ ਸੂਚੀ ਬਣਾਈ ਜਾ ਸਕਦੀ ਹੈ। ਇਸਦੇ ਨਾਲ-ਨਾਲ PageSpeed Insights, WebPageTest ਜਾਂ Lighthouse ਰਿਪੋਰਟਾਂ ਵਿੱਚ render-blocking ਸਰੋਤਾਂ ਅਤੇ ਤੀਜੀ ਪੱਖੀ ਅਨੁਰੋਧਾਂ ਦੀ ਜਾਂਚ ਕਰੋ। ਇੱਥੇ ਇਹ ਸਵਾਲ ਪੁੱਛੋ: ਕਿੰਨੇ ਫੋਂਟ ਪਰਿਵਾਰ ਵਰਤੇ ਜਾ ਰਹੇ ਹਨ? ਕਿੰਨੇ ਵਜ਼ਨ ਲੋਡ ਹੋ ਰਹੇ ਹਨ? ਫੋਂਟ ਕਿਹੜੇ ਡੋਮੇਨ ਤੋਂ ਆ ਰਹੇ ਹਨ? ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਕਿੰਨੇ ਲੋੜੀਂਦੇ ਹਨ?

ਕਈ ਸਾਈਟਾਂ 'ਤੇ ਥੀਮ, ਪੇਜ ਬਿਲਡਰ ਅਤੇ ਪਲੱਗਇਨ ਵੱਖ-ਵੱਖ ਫੋਂਟ ਲੋਡ ਕਰਦੇ ਹਨ। ਉਦਾਹਰਨ ਵਜੋਂ, ਥੀਮ Roboto ਨੂੰ ਕਾਲ ਕਰ ਸਕਦੀ ਹੈ, ਪੇਜ ਬਿਲਡਰ Montserrat ਅਤੇ ਫਾਰਮ ਪਲੱਗਇਨ Open Sans। ਇਹ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਫਰਕ ਨਹੀਂ ਪੈਂਦਾ ਪਰ ਪ੍ਰਦਰਸ਼ਨ 'ਤੇ ਅਸਰ ਪੈਂਦਾ ਹੈ। ਇੱਕ ਸਿੰਗਲ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਚੁਣ ਕੇ ਫੋਂਟ ਪਰਿਵਾਰ ਦੀ ਗਿਣਤੀ ਘਟਾਉਣਾ ਆਮ ਤੌਰ 'ਤੇ ਵੱਡਾ ਫਾਇਦਾ ਦਿੰਦਾ ਹੈ।

2. ਲੋੜੀਂਦੇ ਫੋਂਟ ਫਾਇਲਾਂ ਡਾਊਨਲੋਡ ਕਰੋ ਅਤੇ ਸਧਾਰੋ

ਜਿਸ ਫੋਂਟ ਨੂੰ ਤੁਸੀਂ ਚੁਣਿਆ ਹੈ ਉਸ ਦੀ ਲਾਇਸੈਂਸ ਸ਼ਰਤਾਂ ਦੀ ਜਾਂਚ ਕਰੋ। ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਵਾਲੇ ਫੋਂਟ ਆਮ ਤੌਰ 'ਤੇ ਲੋਕਲ ਹੋਸਟਿੰਗ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ; ਪਰ ਵਪਾਰਕ ਫੋਂਟਾਂ ਵਿੱਚ ਫਾਇਲ ਹੋਸਟਿੰਗ, ਡੋਮੇਨ ਸੀਮਾ ਜਾਂ ਪੇਜ਼ ਵਿਊ ਲਾਇਸੈਂਸ ਵਰਗੇ ਨਿਯਮ ਹੋ ਸਕਦੇ ਹਨ। ਲਾਇਸੈਂਸ ਮਨਜ਼ੂਰ ਹੋਣ ਤੋਂ ਬਾਅਦ ਸਿਰਫ਼ ਲੋੜੀਂਦੇ ਵਜ਼ਨ ਅਤੇ ਸਟਾਈਲਜ਼ ਡਾਊਨਲੋਡ ਕਰੋ। Latin Extended ਕੈਰੈਕਟਰ ਸਹਾਇਤਾ ਪੰਜਾਬੀ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ; “ğ, ü, ş, ı, ö, ç” ਜਿਹੇ ਕੈਰੈਕਟਰ ਮੌਜੂਦ ਹੋਣ ਦੀ ਪੱਕੀ ਯਕੀਨ ਕਰੋ।

ਹੋਰ ਵਧੀਆ ਬਹਿਤਰੀ ਲਈ ਤੁਸੀਂ subset ਤਿਆਰ ਕਰ ਸਕਦੇ ਹੋ। Subset ਦਾ ਮਤਲਬ ਹੈ ਫੋਂਟ ਫਾਇਲ ਵਿੱਚੋਂ ਨਾ ਵਰਤੇ ਗਏ ਕੈਰੈਕਟਰ ਗਰੁੱਪ ਹਟਾਉਣਾ। ਪੰਜਾਬੀ ਅਤੇ ਅੰਗਰੇਜ਼ੀ ਵਾਲੀ ਸਾਈਟ ਲਈ ਆਮ ਤੌਰ 'ਤੇ Latin ਅਤੇ Latin Extended ਕਾਫ਼ੀ ਹੁੰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਕਿਰਿਲਿਕ, ਅਰਬੀ ਜਾਂ ਯੂਨਾਨੀ ਕੈਰੈਕਟਰ ਵਰਤਦੇ ਨਹੀਂ ਤਾਂ ਇਹ ਗਰੁੱਪ ਫਾਇਲ ਤੋਂ ਹਟਾਉਣ ਨਾਲ ਫਾਇਲ ਦਾ ਆਕਾਰ ਘਟੇਗਾ। ਪਰ ਬਹੁ-ਭਾਸ਼ਾਈ ਸਾਈਟਾਂ ਵਿੱਚ ਬਿਨਾਂ ਸੋਚੇ subset ਬਣਾਉਣਾ ਟੈਕਸਟ ਨੂੰ ਖਰਾਬ ਕਰ ਸਕਦਾ ਹੈ। ਬਹੁ-ਭਾਸ਼ਾਈ ਪ੍ਰਾਜੈਕਟਾਂ ਵਿੱਚ ਡੋਮੇਨ ਅਤੇ ਭਾਸ਼ਾ ਰਣਨੀਤੀ ਬਣਾਉਂਦੇ ਸਮੇਂ ਡੋਮੇਨ ਚੋਣ ਅਤੇ ਬਹੁਭਾਸ਼ੀ ਸਾਈਟ ਗਾਈਡ ਸਮੱਗਰੀ ਨਾਲ ਮਿਲ ਕੇ ਵਿਚਾਰ ਕਰੋ।

3. ਫੋਂਟਾਂ ਨੂੰ ਸਹੀ ਫੋਲਡਰ ਵਿੱਚ ਅੱਪਲੋਡ ਕਰੋ

ਫੋਂਟ ਫਾਇਲਾਂ ਨੂੰ ਢੰਗ ਨਾਲ ਫੋਲਡਰ ਸਟਰੱਕਚਰ ਵਿੱਚ ਸੰਗ੍ਰਹਿਤ ਕਰੋ। ਉਦਾਹਰਨ ਲਈ /assets/fonts/inter/inter-400.woff2 ਅਤੇ /assets/fonts/inter/inter-700.woff2 ਵਰਗੇ ਪਾਠਯੋਗ ਨਾਮ ਵਰਤੋ। ਫਾਇਲ ਨਾਂ ਵਿੱਚ ਵਰਜ਼ਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਿਲ ਕਰਨਾ cache ਪ੍ਰਬੰਧਨ ਨੂੰ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ: ਜਿਵੇਂ inter-400-v2.woff2। ਇਸ ਤਰ੍ਹਾਂ ਜਦੋਂ ਤੂੰ ਫੋਂਟ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈਂ ਤਾਂ ਪੁਰਾਣਾ cache ਸਮੱਸਿਆ ਨਹੀਂ ਆਉਂਦੀ।

ਤੁਹਾਡਾ ਹੋਸਟਿੰਗ ਪੈਨਲ ਫਾਇਲ ਮੈਨੇਜਰ, FTP ਜਾਂ Git ਅਧਾਰਤ ਡਿਪਲੋਇਮੈਂਟ ਵਰਤ ਸਕਦਾ ਹੈ।ਫਾਇਲ ਪਰਵਾਨਗੀਆਂ ਆਮ ਤੌਰ 'ਤੇ 644 ਅਤੇ ਫੋਲਡਰ ਲਈ 755 ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ।ਫੋਂਟ ਫਾਇਲਾਂ ਨੂੰ ਸਾਰਿਆਂ ਲਈ ਪੜ੍ਹਨ ਯੋਗ ਬਣਾਉਣਾ ਜ਼ਰੂਰੀ ਹੈ; ਨਹੀਂ ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ 403 ਗਲਤੀ ਦੇ ਕੇ ਸਿਸਟਮ ਫੋਂਟ 'ਤੇ ਜਾ ਸਕਦਾ ਹੈ।ਸਰਵਰ ਪਾਸੇ MIME type ਵੀ ਸਹੀ ਕਨਫਿਗਰ ਕਰੋ। WOFF2 ਲਈ ਸਹੀ ਕੰਟੈਂਟ ਟਾਈਪ font/woff2 ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

4. CSS ਵਿੱਚ @font-face ਡਿਫਾਈਨ ਕਰੋ

ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਹੋਸਟ ਕਰਨ ਦੀ ਮੁੱਖ ਚੀਜ਼ @font-face ਨਿਯਮ ਹੈ। ਸਧਾਰਨ ਡਿਫਿਨੀਸ਼ਨ ਇਸ ਤਰ੍ਹਾਂ ਹੁੰਦੀ ਹੈ: @font-face { font-family: Inter; src: url('/assets/fonts/inter/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }. ਇਕੋ ਫੋਂਟ ਪਰਿਵਾਰ ਦੀ ਮੋਟੀ ਵਰਜ਼ਨ ਲਈ font-weight: 700 ਨਾਲ ਵੱਖਰਾ ਨਿਯਮ ਜੋੜੋ।

ਇੱਥੇ ਸਭ ਤੋਂ ਜਰੂਰੀ ਲਾਈਨਾਂ ਵਿੱਚੋਂ ਇੱਕ font-display: swap ਹੈ। ਇਹ ਵੈਲਯੂ ਇਸ ਗੱਲ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਕਿ ਖ਼ਾਸ ਫੋਂਟ ਲੋਡ ਹੋਣ ਤੱਕ ਬ੍ਰਾਊਜ਼ਰ ਸਿਸਟਮ ਫੋਂਟ ਨਾਲ ਟੈਕਸਟ ਦਿਖਾਏ। ਇਸ ਨਾਲ ਅਦਿੱਖੇ ਟੈਕਸਟ ਦੀ ਸਮੱਸਿਆ ਘਟਦੀ ਹੈ।ਪਰ swap ਵਰਤਣ ਨਾਲ ਫੋਂਟ ਬਦਲਦੇ ਸਮੇਂ ਥੋੜ੍ਹੀ ਜਿਹੀ ਹਿੱਲ ਚੱਲ ਹੋ ਸਕਦੀ ਹੈ।ਇਸ ਨੂੰ ਘਟਾਉਣ ਲਈ ਆਪਣਾ fallback ਸਿਸਟਮ ਫੋਂਟ ਖ਼ਾਸ ਫੋਂਟ ਦੇ ਨੇੜੇ ਚੁਣੋ। ਉਦਾਹਰਨ ਵਜੋਂ Inter ਲਈ Arial ਜਾਂ system-ui ਜ਼ਿਆਦਾਤਰ ਹਾਲਾਤ ਵਿੱਚ ਵਧੀਆ ਵਿਕਲਪ ਹਨ।

5. ਮਹੱਤਵਪੂਰਨ ਫੋਂਟਾਂ ਨੂੰ preload ਕਰੋ

Preload ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਇਹ ਦੱਸਣ ਦਾ ਮਜ਼ਬੂਤ ਸਿਗਨਲ ਹੈ ਕਿ ਕਿਸੇ ਸਰੋਤ ਨੂੰ ਜਲਦੀ ਡਾਊਨਲੋਡ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਸਿਰਲੇਖ ਅਤੇ ਮੁੱਖ ਟੈਕਸਟ ਲਈ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਮੁੱਖ ਫੋਂਟ ਫਾਇਲ ਨੂੰ preload ਕਰਨਾ LCP ਨੂੰ ਸੁਧਾਰ ਸਕਦਾ ਹੈ।ਪਰ ਹਰ ਫੋਂਟ ਨੂੰ preload ਕਰਨਾ ਗਲਤ ਹੈ।ਇਸ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਬੈਂਡਵਿਡਥ ਬੇਕਾਰ ਸਰੋਤਾਂ 'ਤੇ ਖਰਚ ਕਰਦਾ ਹੈ ਅਤੇ ਤਸਵੀਰਾਂ ਜਾਂ ਮਹੱਤਵਪੂਰਨ CSS ਦੀ ਡਾਊਨਲੋਡਿੰਗ ਵਿੱਚ ਦੇਰੀ ਹੋ ਸਕਦੀ ਹੈ।

ਆਮ ਨਿਯਮ ਇਹ ਹੈ ਕਿ ਸਿਰਫ ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਯਕੀਨੀ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ 1 ਜਾਂ ਵੱਧ ਤੋਂ ਵੱਧ 2 ਫੋਂਟ ਫਾਇਲਾਂ ਨੂੰ preload ਕਰੋ।ਉਦਾਹਰਨ ਵਜੋਂ ਜੇ ਮੁੱਖ ਬਾਡੀ ਫੋਂਟ 400 ਅਤੇ ਸਿਰਲੇਖ ਫੋਂਟ 700 ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਵਰਤੇ ਜਾ ਰਹੇ ਹਨ ਤਾਂ ਇਹ ਦੋ ਫਾਇਲਾਂ preload ਲਈ ਚੰਗੀਆਂ ਉਮੀਦਵਾਰ ਹਨ।ਜਦੋਂਕਿ ਬਲੌਗ ਦੀ ਵਿਸ਼ੇਸ਼ ਪੇਜ਼ 'ਤੇ italics ਫੋਂਟ ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਨਹੀਂ ਆਉਂਦਾ ਤਾਂ ਉਹ preload ਨਾ ਕਰੋ।Preload ਤੋਂ ਬਾਅਦ Network ਟੈਬ ਵਿੱਚ ਜਾਂਚ ਕਰੋ ਕਿ ਫੋਂਟ ਵਾਕਈ ਜਲਦੀ ਡਾਊਨਲੋਡ ਹੋ ਰਿਹਾ ਹੈ ਅਤੇ ਡਬਲ ਡਾਊਨਲੋਡ ਨਹੀਂ ਹੋ ਰਿਹਾ।

6. Cache ਅਤੇ ਕੰਪ੍ਰੈਸ਼ਨ ਸੈਟਿੰਗਾਂ ਸੈੱਟ ਕਰੋ

ਫੋਂਟ ਫਾਇਲਾਂ ਅਕਸਰ ਬਦਲਦੀਆਂ ਨਹੀਂ ਹਨ, ਇਸ ਲਈ ਇਹਨਾਂ ਨੂੰ ਲੰਮੇ ਸਮੇਂ ਲਈ ਬ੍ਰਾਊਜ਼ਰ cache ਸੈਟਿੰਗਾਂ ਨਾਲ ਸੇਵਾ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।Cache-Control ਹੈਡਰ ਵਿੱਚ public, max-age=31536000, immutable ਦਾ ਇਸਤੇਮਾਲ ਆਮ ਹੈ।ਜਦੋਂ ਤੁਸੀਂ ਫਾਇਲ ਨਾਂ ਵਿੱਚ ਵਰਜ਼ਨ ਸ਼ਾਮਿਲ ਕਰਦੇ ਹੋ ਤਾਂ ਇੱਕ ਸਾਲ ਦਾ cache ਸੁਰੱਖਿਅਤ ਬਣ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਜਦੋਂ ਅਪਡੇਟ ਕਰਨਾ ਹੋਵੇ ਤਾਂ ਫਾਇਲ ਦਾ ਨਾਮ ਬਦਲ ਦਿੰਦੇ ਹੋ।

WOFF2 ਪਹਿਲਾਂ ਹੀ ਇੱਕ ਕੰਪ੍ਰੈਸ਼ਡ ਫਾਰਮੈਟ ਹੈ; ਇਸ ਲਈ Brotli ਜਾਂ Gzip ਨਾਲ ਵੱਡਾ ਫਾਇਦਾ ਨਹੀਂ ਹੁੰਦਾ।ਫਿਰ ਵੀ ਤੁਹਾਡੇ ਸਰਵਰ ਦੀ ਸਟੈਟਿਕ ਫਾਇਲ ਸਰਵਿੰਗ ਪ੍ਰਦਰਸ਼ਨ ਜ਼ਰੂਰੀ ਹੈ।ਜੇ ਤੁਸੀਂ Hostragons ਉੱਤੇ LiteSpeed, NVMe ਡਿਸਕ ਅਤੇ ਠੀਕ cache ਕਨਫਿਗਰੇਸ਼ਨ ਵਰਤ ਰਹੇ ਹੋ ਤਾਂ ਫੋਂਟ ਫਾਇਲਾਂ ਜ਼ਿਆਦਾ ਤੇਜ਼ੀ ਨਾਲ ਜਵਾਬ ਦੇ ਸਕਦੀਆਂ ਹਨ।ਇੰਫਰਾਸਟਰੱਕਚਰ ਪਾਸੇ SSL ਦੀ ਸਹੀ ਸੈਟਅਪ HTTP/2 ਅਤੇ HTTP/3 ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ; ਇਸ ਵਿਸ਼ੇ ਵਿੱਚ SSL ਸਰਟੀਫਿਕੇਟ ਸਥਾਪਨਾ ਅਤੇ HTTPS ਮਾਰਗਦਰਸ਼ਕ ਸਮੱਗਰੀ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦੀ ਹੈ।

WordPress ਸਾਈਟਾਂ 'ਤੇ ਲੋਕਲ ਫੌਂਟ ਸਟੋਰ ਕਰਨਾ

WordPress ਵਿੱਚ ਫੌਂਟ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਥੀਮ, ਪਲੱਗਇਨ ਅਤੇ ਪੰਨਾ ਬਣਾਉਣ ਵਾਲੇ ਅਨੁਸਾਰ ਵੱਖ-ਵੱਖ ਹੁੰਦੀ ਹੈ। ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਆਪਣੀ ਥੀਮ ਵਿੱਚ Google Fonts ਦੀਆਂ ਕਾਲਾਂ ਬੰਦ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ ਜਾਂ ਨਹੀਂ, ਇਹ ਚੈੱਕ ਕਰੋ। ਕਈ ਆਧੁਨਿਕ ਥੀਮਾਂ ਟਾਈਪੋਗ੍ਰਾਫੀ ਸੈਟਿੰਗਾਂ ਵਿੱਚ Google Fonts ਨੂੰ ਡਿਸੇਬਲ ਕਰਨ ਦਾ ਵਿਕਲਪ ਦਿੰਦੀਆਂ ਹਨ। Elementor, Gutenberg ਬਲੌਕ ਪਲੱਗਇਨ ਜਾਂ ਸਲਾਈਡਰ ਪਲੱਗਇਨ ਵੀ ਆਪਣੇ ਫੌਂਟ ਸੈਟਿੰਗਾਂ ਰੱਖ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਫੌਂਟ ਦੇ ਵੱਖ-ਵੱਖ ਸਰੋਤਾਂ ਤੋਂ ਵਾਰ-ਵਾਰ ਲੋਡ ਹੋਣ ਤੋਂ ਬਚਾਉਣ ਲਈ ਸਾਰੇ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਧਿਆਨ ਨਾਲ ਚੈੱਕ ਕਰੋ।

ਸਭ ਤੋਂ ਸਾਫ਼ ਤਕਨੀਕੀ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਚਾਇਲਡ ਥੀਮ ਵਿੱਚ ਫੌਂਟ ਫਾਇਲਾਂ ਸਟੋਰ ਕੀਤੀਆਂ ਜਾਣ ਅਤੇ CSS ਡਿਫਿਨੀਸ਼ਨਜ਼ ਨੂੰ ਥੀਮ ਦੇ ਸਟਾਈਲ ਫਾਇਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਵੇ। ਤੁਸੀਂ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵੀ ਲੋਕਲ ਫੌਂਟ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ; ਪਰ ਜ਼ਰੂਰਤ ਤੋਂ ਵੱਧ ਪਲੱਗਇਨ ਸ਼ਾਮਲ ਕਰਨਾ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਮਕਸਦ ਨਾਲ ਟਕਰਾਅ ਕਰ ਸਕਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ ਪਲੱਗਇਨ ਵਰਤ ਰਹੇ ਹੋ, ਤਾਂ ਉਸਦੀ ਆਖਰੀ ਅੱਪਡੇਟ ਦੀ ਤਾਰੀਖ, PHP ਅਨੁਕੂਲਤਾ ਅਤੇ ਕੈਸ਼ ਪਲੱਗਇਨ ਨਾਲ ਮੇਲ ਖਾਣ ਦਾ ਵਿਸਥਾਰ ਨਾਲ ਜਾਇਜ਼ਾ ਲਵੋ।

WordPress ਸਾਈਟ ਵਿੱਚ ਕੋਈ ਵੀ ਬਦਲਾਅ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਬੈਕਅੱਪ ਲੈਣਾ ਜਰੂਰੀ ਹੈ। ਫੌਂਟ ਕਾਲਾਂ ਨੂੰ ਹਟਾਉਂਦੇ ਸਮੇਂ ਗਲਤੀ ਨਾਲ ਆਈਕਨ ਫੌਂਟ ਜਾਂ ਐਡਮਿਨ ਪੈਨਲ ਦੇ ਸਟਾਈਲਜ਼ ਖਰਾਬ ਹੋ ਸਕਦੇ ਹਨ। ਖਾਸ ਕਰਕੇ WooCommerce ਸਾਈਟਾਂ 'ਤੇ ਕਾਰਟ, ਭੁਗਤਾਨ ਅਤੇ ਖਾਤਾ ਪੰਨਿਆਂ ਦੀ ਟੈਸਟਿੰਗ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਕਾਰਪੋਰੇਟ WordPress ਸਾਈਟ ਲਈ ਪ੍ਰਦਰਸ਼ਨ-ਕੇਂਦਰਤ ਇੰਫਰਾਸਟਰੱਕਚਰ ਲੱਭ ਰਹੇ ਹੋ, ਤਾਂ WordPress ਹੋਸਟਿੰਗ ਪੈਕੇਜ ਲਿੰਕ ਨੂੰ ਆਪਣੇ ਸਮੱਗਰੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਬਾਰੇ ਸੋਚੋ।

ਟੈਕਨੀਕਲ SEO ਅਤੇ ਕੋਰ ਵੈੱਬ ਵਾਇਟਲਜ਼ ਦੇ ਨਜ਼ਰੀਏ ਤੋਂ ਚੈੱਕਲਿਸਟ

ਫੋਂਟ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਕਰਨ ਤੋਂ ਬਾਅਦ ਸਿਰਫ਼ “ਸਾਈਟ ਖੁਲ ਰਹੀ ਹੈ?” ਦੇਖਣਾ ਕਾਫ਼ੀ ਨਹੀਂ ਹੁੰਦਾ। ਮਾਪਣ ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ, ਪਿਛਲੇ ਅਤੇ ਅਗਲੇ ਵੈਲਿਊਜ਼ ਨੂੰ ਤੁਲਨਾ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ, ਅਤੇ ਅਸਲੀ ਯੂਜ਼ਰ ਅਨੁਭਵ ਦੇ ਨੇੜੇ ਟੈਸਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀ ਚੈੱਕਲਿਸਟ ਇੱਕ ਪ੍ਰੈਕਟਿਕਲ ਸ਼ੁਰੂਆਤ ਮੁਹੱਈਆ ਕਰਵਾਉਂਦੀ ਹੈ।

• Network ਟੈਬ ਵਿੱਚ ਯਕੀਨੀ ਬਣਾਓ ਕਿ Google Fonts, fonts.gstatic ਜਾਂ ਇਸੇ ਤਰ੍ਹਾਂ ਦੇ ਬਾਹਰੀ ਫੋਂਟ ਦੀਆਂ ਬੇਨਤੀਆਂ ਹਟਾਈਆਂ ਗਈਆਂ ਹਨ।
• ਕੁੱਲ ਫੋਂਟ ਫਾਈਲਾਂ ਦੀ ਗਿਣਤੀ ਜੇ ਸੰਭਵ ਹੋਵੇ ਤਾਂ 2-4 ਦੇ ਦਰਮਿਆਨ ਰੱਖੋ।
• ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ WOFF2 ਫਾਰਮੈਟ ਵਰਤ ਰਹੇ ਹੋ ਅਤੇ ਫਾਈਲਾਂ ਦਾ ਆਕਾਰ ਵਾਜਬ ਹੈ।
• font-display: swap ਜਾਂ ਜਿੱਥੇ ਲਾਗੂ ਹੋਵੇ optional ਵੈਲਿਊ ਨੂੰ ਟੈਸਟ ਕਰੋ।
• ਪਹਿਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਸਭ ਤੋਂ ਜਰੂਰੀ ਫੋਂਟ ਤੋਂ ਇਲਾਵਾ ਬੇਕਾਰ preload ਨਾ ਕਰੋ।
• Cache-Control ਹੈਡਰਾਂ ਦੀ ਲੰਬੇ ਸਮੇਂ ਤੱਕ ਕੈਸ਼ਿੰਗ ਲਈ ਯੋਗਤਾ ਦੀ ਜਾਂਚ ਕਰੋ।
• ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਪੰਜਾਬੀ ਅੱਖਰ ਸਹੀ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇ ਰਹੇ ਹਨ ਇਹ ਟੈਸਟ ਕਰੋ।
• Mobile PageSpeed Insights, Lighthouse ਅਤੇ WebPageTest ਦੇ ਨਤੀਜੇ ਬਦਲਾਅ ਤੋਂ ਪਹਿਲਾਂ ਨਾਲ ਤੁਲਨਾ ਕਰੋ।

ਟੈਸਟ ਦੇ ਇੱਕ ਨਤੀਜੇ 'ਤੇ ਹੀ ਭਰੋਸਾ ਨਾ ਕਰੋ। ਨੈੱਟਵਰਕ ਹਾਲਾਤ, ਸਰਵਰ ਦਾ ਬੋਝ ਅਤੇ ਟੈਸਟ ਦੀ ਥਾਂ ਨਤੀਜਿਆਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ। ਘੱਟੋ-ਘੱਟ ਤਿੰਨ ਟੈਸਟ ਕਰਕੇ ਔਸਤ ਰੁਝਾਨ ਤੇ ਧਿਆਨ ਦੇਣਾ ਵਧੀਆ ਹੈ। ਜੇ LCP 2.8 ਸਕਿੰਟ ਤੋਂ 2.3 ਸਕਿੰਟ ਤੇ ਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਇੱਕ ਵੱਡਾ ਸੁਧਾਰ ਹੈ। ਜੇ ਫੋਂਟ ਅਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਤੋਂ ਬਾਅਦ CLS ਵੱਧਦਾ ਹੈ ਤਾਂ fallback ਫੋਂਟ ਦੀ ਚੋਣ ਅਤੇ ਫੋਂਟ ਮੈਟ੍ਰਿਕਸ ਨੂੰ ਮੁੜ ਵੇਖੋ।

ਅਕਸਰ ਹੋਣ ਵਾਲੀਆਂ ਗਲਤੀਆਂ

ਜ਼ਿਆਦਾ ਫੋਂਟ ਪਰਿਵਾਰ ਵਰਤਣਾ

ਸਬ ਤੋਂ ਆਮ ਗਲਤੀ ਡਿਜ਼ਾਇਨ ਵਿੱਚ ਬੇਕਾਰ ਵੱਖ-ਵੱਖ ਫੋਂਟ ਲਿਆਉਣਾ ਹੈ। ਸਿਰਲੇਖ ਲਈ ਇੱਕ ਫੋਂਟ, ਪੈਰੇਗ੍ਰਾਫ ਲਈ ਦੂਜਾ, ਬਟਨ ਲਈ ਤੀਜਾ, ਅਤੇ ਕੋਟ ਲਈ ਚੌਥਾ ਫੋਂਟ ਵਰਤਣ ਨਾਲ ਪ੍ਰਦਰਸ਼ਨ 'ਤੇ ਨਕਾਰਾਤਮਕ ਅਸਰ ਪੈਂਦਾ ਹੈ। ਬਹੁਤ ਸਾਰੇ ਪ੍ਰੋਫੈਸ਼ਨਲ ਵੈੱਬਸਾਈਟ ਇੱਕ ਜਾਂ ਦੋ ਫੋਂਟ ਪਰਿਵਾਰਾਂ ਨਾਲ ਮਜ਼ਬੂਤ ਵਿਜ਼ੂਅਲ ਪਹਚਾਣ ਬਣਾਉਂਦੇ ਹਨ। ਟਾਈਪੋਗ੍ਰਾਫੀ ਵਿੱਚ ਸਥਿਰਤਾ ਨਾਂ ਸਿਰਫ ਤੇਜ਼ੀ ਲਈ, ਬਲਕਿ ਬ੍ਰਾਂਡ ਦੀ ਸਮਝ ਲਈ ਵੀ ਮਹੱਤਵਪੂਰਨ ਹੈ।

ਗਲਤ fallback ਫੋਂਟ ਚੁਣਨਾ

ਜਦੋਂ ਖ਼ਾਸ ਫੋਂਟ ਲੋਡ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਸਿਸਟਮ ਫੋਂਟ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਉਹ ਆਖਰੀ ਫੋਂਟ ਤੋਂ ਬਹੁਤ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਲਿਖਤ ਖਿਸਕਦੀ ਹੈ। ਇਸ ਨਾਲ CLS ਮੁੱਲ ਵਧ ਸਕਦਾ ਹੈ। fallback ਫੋਂਟ ਚੁਣਦਿਆਂ x-height, ਅੱਖਰ ਦੀ ਚੌੜਾਈ ਅਤੇ ਲਾਈਨ ਹਾਈਟ ਵਿੱਚ ਮਿਲਾਪ ਦਾ ਧਿਆਨ ਰੱਖੋ। system-ui, Arial, Helvetica, Georgia ਵਰਗੇ ਵਿਕਲਪਾਂ ਨੂੰ ਆਪਣੇ ਡਿਜ਼ਾਇਨ ਅਨੁਸਾਰ ਟੈਸਟ ਕਰੋ।

ਸਭ ਕੁਝ preload ਕਰਨਾ

Preload ਇਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਹੈ ਪਰ ਗਲਤ ਵਰਤੋਂ ਨਾਲ ਇਹ ਨੁਕਸਾਨਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ। ਸਾਰੇ ਫੋਂਟ ਭਾਰਾਂ ਨੂੰ preload ਕਰਨ ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਤਰਜੀਹੀ ਕ੍ਰਮਵਾਰਤਾ ਖਰਾਬ ਹੋ ਜਾਂਦੀ ਹੈ। ਖਾਸ ਕਰਕੇ ਉਹਨਾਂ ਪੰਨਿਆਂ ਤੇ ਜਿੱਥੇ hero ਚਿੱਤਰ ਹੁੰਦਾ ਹੈ, ਇਹ LCP ਨੂੰ ਸੁਧਾਰਨ ਦੀ ਬਜਾਇ ਬਰਬਾਦ ਕਰ ਸਕਦਾ ਹੈ। Preload ਦਾ ਫੈਸਲਾ ਪਹਿਲੀ ਸਕ੍ਰੀਨ ਤੇ ਅਸਲੀ ਵਰਤੋਂ ਅਤੇ ਟੈਸਟ ਨਤੀਜਿਆਂ ਦੇ ਆਧਾਰ 'ਤੇ ਕਰੋ।

ਲਾਇਸੰਸ ਸ਼ਰਤਾਂ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਨਾ

ਹਰ ਫੋਂਟ ਮੁਫ਼ਤ ਜਾਂ ਬੇਹੱਦ ਨਹੀਂ ਹੁੰਦਾ। ਵਪਾਰਕ ਫੋਂਟਾਂ ਦੀਆਂ ਵੈੱਬ ਲਾਇਸੰਸਾਂ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸ਼ਰਤਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਜੇ ਕੋਈ ਫੋਂਟ ਲੋਕਲ ਹੋਸਟਿੰਗ ਲਈ ਮਨਜ਼ੂਰ ਨਹੀਂ ਹੈ ਫਿਰ ਉਸਨੂੰ ਆਪਣੇ ਸਰਵਰ 'ਤੇ ਰੱਖਣਾ ਕਾਨੂੰਨੀ ਜੋਖਮ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ। ਫੋਂਟ ਨੂੰ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲਾਇਸੰਸ ਲਿਖਤ ਨੂੰ ਸੰਭਾਲ ਕੇ ਰੱਖੋ ਅਤੇ ਪ੍ਰੋਜੈਕਟ ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।

ਸੁਰੱਖਿਆ, ਪਰਦੇਦਾਰੀ ਅਤੇ ਢਾਂਚਾ ਪਹਲੂ

ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਹੋਸਟ ਕਰਨਾ ਸਿਰਫ਼ ਗਤੀ ਲਈ ਨਹੀਂ, ਸਗੋਂ ਪਰਦੇਦਾਰੀ ਅਤੇ ਸੁਰੱਖਿਆ ਲਈ ਵੀ ਫਾਇਦੇਮੰਦ ਹੈ। ਜਦੋਂ ਬਾਹਰੀ ਫੋਂਟ ਸਰਵਿਸ ਵਰਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਵਿਜ਼ਟਰ ਦਾ ਬ੍ਰਾਊਜ਼ਰ ਤੀਜੀ ਪੱਖ ਦੇ ਡੋਮੇਨਾਂ ਨੂੰ ਬੇਨਤੀ ਭੇਜ ਸਕਦਾ ਹੈ। ਕੁਝ ਸੈਕਟਰਾਂ ਵਿੱਚ ਇਹ KVKK ਅਤੇ ਡੇਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਪ੍ਰਕਿਰਿਆਵਾਂ ਦੇ ਸੰਦਰਭ ਵਿੱਚ ਵੇਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਲੋਕਲ ਹੋਸਟਿੰਗ ਵਿੱਚ ਫੋਂਟ ਬੇਨਤੀਆਂ ਤੁਹਾਡੇ ਆਪਣੇ ਡੋਮੇਨ ਰਾਹੀਂ ਹੁੰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਡੇਟਾ ਦਾ ਪ੍ਰਵਾਹ ਜ਼ਿਆਦਾ ਪੇਸ਼ਗੋਈਯੋਗ ਹੁੰਦਾ ਹੈ।

ਢਾਂਚਾ ਪੱਖੋਂ HTTPS ਜ਼ਰੂਰੀ ਹੈ। ਜੇ ਫੋਂਟ ਫਾਈਲਾਂ HTTP ਰਾਹੀਂ ਲੋਡ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਤਾਂ ਮਿਕਸਟ ਕੰਟੈਂਟ ਸਮੱਸਿਆਵਾਂ ਜਾਂ ਬ੍ਰਾਊਜ਼ਰ ਰੋਕਾਵਟਾਂ ਆ ਸਕਦੀਆਂ ਹਨ। ਤੁਹਾਡੇ ਡੋਮੇਨ ਦੀ ਸਹੀ DNS ਸੰਰਚਨਾ, SSL ਸਰਟੀਫਿਕੇਟ ਅਤੇ ਹੋਸਟਿੰਗ ਪ੍ਰਦਰਸ਼ਨ ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਮੁੱਖ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਨਵਾਂ ਪ੍ਰੋਜੈਕਟ ਸ਼ੁਰੂ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਡੋਮੇਨ ਚੋਣ ਲਈ ਡੋਮੇਨ ਪੁੱਛਤਾਛ ਅਤੇ ਰਜਿਸਟਰੇਸ਼ਨ ਪੰਨਾ, ਸੁਰੱਖਿਅਤ ਪ੍ਰਸਾਰਣ ਲਈ SSL ਸਰਟੀਫਿਕੇਟ ਪੰਨਾ ਅਤੇ ਮਜ਼ਬੂਤ ਹੋਸਟਿੰਗ ਲਈ Hostragons ਹੋਸਟਿੰਗ ਹੱਲ ਪੰਨਾ ਦੇਖ ਸਕਦੇ ਹੋ।

ਜੇ ਤੁਸੀਂ CDN ਵਰਤ ਰਹੇ ਹੋ ਤਾਂ ਫੋਂਟ ਫਾਈਲਾਂ ਦੇ CORS ਸੈਟਿੰਗਜ਼ ਦੀ ਜਾਂਚ ਕਰੋ। ਜੇ ਫੋਂਟ ਵੱਖਰੇ ਸਬਡੋਮੇਨ ਤੋਂ ਸਰਵ ਕੀਤੇ ਜਾ ਰਹੇ ਹਨ ਤਾਂ Access-Control-Allow-Origin ਹੈਡਰ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਨਹੀਂ ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਫੋਂਟ ਫਾਈਲ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਕੇ ਵਰਤ ਨਹੀਂ ਸਕਦਾ। ਇੱਕੋ ਡੋਮੇਨ ਤੋਂ ਸਰਵ ਕਰਨਾ ਛੋਟੇ ਅਤੇ ਦਰਮਿਆਨੇ ਪੱਧਰ ਦੀਆਂ ਵੈਬਸਾਈਟਾਂ ਲਈ ਆਮ ਤੌਰ 'ਤੇ ਸਧਾਰਣ ਅਤੇ ਬਿਨਾਂ ਸਮੱਸਿਆ ਵਾਲਾ ਹੁੰਦਾ ਹੈ।

ਪ੍ਰਦਰਸ਼ਨ ਸੁਧਾਰ ਨੂੰ ਤੁਸੀਂ ਕਿਵੇਂ ਮਾਪਦੇ ਹੋ?

ਸਫਲ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਦਾ ਸਬੂਤ ਮਾਪਣ ਹੈ। ਸਬ ਤੋਂ ਪਹਿਲਾਂ ਮੌਜੂਦਾ ਹਾਲਤ ਨੂੰ ਦਰਜ ਕਰੋ: ਕੁੱਲ ਫੋਂਟ ਬੇਨਤੀਆਂ ਦੀ ਗਿਣਤੀ, ਕੁੱਲ ਫੋਂਟ ਦਾ ਆਕਾਰ, LCP, CLS ਅਤੇ ਕੁੱਲ ਲੋਡਿੰਗ ਸਮਾਂ। ਫਿਰ ਲੋਕਲ ਹੋਸਟਿੰਗ ਲਾਗੂ ਕਰੋ ਅਤੇ ਇੱਕੋ ਪੰਨੇ ਨੂੰ ਇੱਕੋ ਟੂਲ ਨਾਲ ਟੈਸਟ ਕਰੋ। ਮੁੱਖ ਪੰਨਾ, ਬਲੌਗ ਲੇਖ, ਸ਼੍ਰੇਣੀ ਪੰਨਾ ਅਤੇ ਜੇ ਉਤਪਾਦ ਪੰਨਾ ਹੈ ਤਾਂ ਵੱਖ-ਵੱਖ ਟੈਮਪਲੇਟ ਨੂੰ ਅਲੱਗ-ਅਲੱਗ ਮਾਪੋ।

ਇੱਕ ਉਦਾਹਰਨ ਵਿੱਚ, ਇੱਕ ਬਲੌਗ ਸਾਈਟ ਜਿਸ ਵਿੱਚ ਸ਼ੁਰੂ ਵਿੱਚ 6 ਫੋਂਟ ਬੇਨਤੀਆਂ ਅਤੇ 420 KB ਫੋਂਟ ਡੇਟਾ ਹੁੰਦਾ ਹੈ, ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਤੋਂ ਬਾਅਦ 2 ਫੋਂਟ ਬੇਨਤੀਆਂ ਅਤੇ 96 KB ਡੇਟਾ ਤੱਕ ਘਟਾਇਆ ਜਾ ਸਕਦਾ ਹੈ। ਮੋਬਾਈਲ Lighthouse ਪ੍ਰਦਰਸ਼ਨ ਸਕੋਰ 72 ਤੋਂ 86 ਤੱਕ ਵਧ ਸਕਦਾ ਹੈ; LCP 3.1 ਸੈਕਿੰਡ ਤੋਂ 2.4 ਸੈਕਿੰਡ ਹੋ ਸਕਦਾ ਹੈ। ਇਹ ਅੰਕ ਗਾਰੰਟੀ ਨਹੀਂ ਹਨ ਕਿਉਂਕਿ ਤਸਵੀਰਾਂ, JavaScript ਅਤੇ ਸਰਵਰ ਦੀ ਪ੍ਰਤੀਕਿਰਿਆ ਸਮਾਂ ਵੀ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ। ਫਿਰ ਵੀ ਫੋਂਟ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਅਕਸਰ ਤੇਜ਼ੀ ਨਾਲ ਲਾਗੂ ਹੋਣ ਵਾਲੀਆਂ ਅਤੇ ਪ੍ਰਭਾਵ ਦਾ ਅਸਾਨੀ ਨਾਲ ਮਾਪਿਆ ਜਾਣ ਵਾਲੀਆਂ ਸੁਧਾਰਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

ਅਸਲੀ ਯੂਜ਼ਰ ਡੇਟਾ ਲਈ Chrome User Experience Report, Search Console Core Web Vitals ਰਿਪੋਰਟ ਜਾਂ RUM ਟੂਲਜ਼ ਵਧੀਆ ਅੰਦਰੂਨੀ ਜਾਣਕਾਰੀ ਦਿੰਦੇ ਹਨ। ਲੈਬ ਟੈਸਟ ਮੁੱਦਿਆਂ ਦੀ ਪਹਚਾਣ ਲਈ ਚੰਗੇ ਹਨ; ਅਸਲੀ ਯੂਜ਼ਰ ਡੇਟਾ ਅਪਟਿਮਾਈਜ਼ੇਸ਼ਨ ਦੇ ਫਲਾਂ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਜੇ ਤੁਹਾਡੇ ਸਾਈਟ 'ਤੇ ਭਾਰੀ ਟ੍ਰੈਫਿਕ ਹੈ ਤਾਂ ਤਬਦੀਲੀ ਪਹਿਲਾਂ ਸਟੇਜਿੰਗ ਵਾਤਾਵਰਣ ਵਿੱਚ ਅਤੇ ਫਿਰ ਘੱਟ ਖ਼ਤਰੇ ਵਾਲੇ ਸਮਿਆਂ 'ਚ ਲਾਂਚ ਕਰਨਾ ਜ਼ਿਆਦਾ ਸੁਰੱਖਿਅਤ ਹੈ।

ਲਾਗੂ ਕਰਨ ਯੋਗ ਛੋਟਾ ਯੋਜਨਾ: 60 ਮਿੰਟਾਂ ਵਿੱਚ ਫੋਂਟ ਅਪਟਿਮਾਈਜੇਸ਼ਨ

ਜੇ ਤੁਹਾਡਾ ਸਮਾਂ ਸੀਮਿਤ ਹੈ ਤਾਂ ਹੇਠਾਂ ਦਿੱਤੇ ਯੋਜਨਾ ਨਾਲ ਤੇਜ਼ ਸ਼ੁਰੂਆਤ ਕਰ ਸਕਦੇ ਹੋ। ਪਹਿਲੇ 10 ਮਿੰਟਾਂ ਵਿੱਚ DevTools ਨਾਲ ਮੌਜੂਦਾ ਫੋਂਟ ਬੇਨਤੀ ਲਿਸਟ ਕਰੋ ਅਤੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਲਵੋ। ਅਗਲੇ 10 ਮਿੰਟਾਂ ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਵਾਸਤਵ ਵਿੱਚ ਵਰਤੇ ਗਏ ਫੋਂਟ ਪਰਿਵਾਰ ਅਤੇ ਵਜ਼ਨ ਤੈਅ ਕਰੋ। 15 ਮਿੰਟਾਂ ਵਿੱਚ ਲੋੜੀਂਦੇ WOFF2 ਫਾਈਲਾਂ ਡਾਊਨਲੋਡ ਕਰੋ, ਪੰਜਾਬੀ ਅੱਖਰਾਂ ਦੀ ਜਾਂਚ ਕਰੋ ਅਤੇ /assets/fonts ਫੋਲਡਰ ਵਿੱਚ ਅਪਲੋਡ ਕਰੋ।

ਫਿਰ 15 ਮਿੰਟਾਂ ਲਈ CSS @font-face ਡਿਫ਼ਿਨੀਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ, font-display: swap ਵਰਤੋਂ ਅਤੇ ਪੁਰਾਣੀਆਂ ਬਾਹਰੀ ਫੋਂਟ ਲਿੰਕ ਹਟਾਓ। ਆਖਰੀ 10 ਮਿੰਟਾਂ ਵਿੱਚ ਮੋਬਾਈਲ ਟੈਸਟ ਕਰੋ, Network ਟੈਬ ਵਿੱਚ ਕੋਈ ਬਾਹਰੀ ਫੋਂਟ ਬੇਨਤੀ ਨਾ ਰਹਿਣ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ ਅਤੇ ਪੇਜ ਨੂੰ ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਚੈੱਕ ਕਰੋ। ਇਸ ਤੋਂ ਬਾਅਦ cache ਹੈਡਰ, preload ਅਤੇ subset ਵਰਗੀਆਂ ਅਗੇਰੀ ਅਪਟਿਮਾਈਜੇਸ਼ਨਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸੰਭਾਲਿਆ ਜਾ ਸਕਦਾ ਹੈ।

ਇਹ ਯੋਜਨਾ, ਖਾਸ ਕਰਕੇ ਛੋਟੇ ਕਾਰੋਬਾਰੀ ਵੈੱਬਸਾਈਟਾਂ, ਬਲੌਗਾਂ ਅਤੇ ਕਾਰਪੋਰੇਟ ਪ੍ਰਚਾਰ ਪੰਨਿਆਂ ਲਈ ਤੇਜ਼ ਨਤੀਜੇ ਦਿੰਦੀ ਹੈ। ਵੱਡੇ ਈ-ਕਾਮਰਸ ਜਾਂ SaaS ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਫੋਂਟ ਅਪਟਿਮਾਈਜੇਸ਼ਨ ਨੂੰ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ, ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀ ਅਤੇ ਡਿਸਟ੍ਰੀਬਿਊਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਨਾਲ ਮਿਲਾਕੇ ਲਿਆਉਣਾ ਜ਼ਿਆਦਾ ਸਹੀ ਹੁੰਦਾ ਹੈ।

ਨਤੀਜਾ

ਫੋਂਟਾਂ ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਹੋਸਟ ਕਰਨਾ, ਜੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇ, ਤਾਂ ਸਾਈਟ ਦੀ ਰਫਤਾਰ, ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਤਕਨੀਕੀ SEO ਦੀ ਗੁਣਵੱਤਾ ਵਿੱਚ ਸੁਧਾਰ ਲਿਆਉਂਦਾ ਹੈ। ਸਭ ਤੋਂ ਮੁੱਖ ਗੱਲਾਂ ਹਨ; WOFF2 ਵਰਤਣਾ, ਲੋੜ ਤੋਂ ਵੱਧ ਫੋਂਟ ਭਾਰ ਹਟਾਉਣਾ, font-display ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨਾ, ਜਰੂਰੀ ਫੋਂਟਾਂ ਨੂੰ ਧਿਆਨ ਨਾਲ preload ਕਰਨਾ ਅਤੇ ਮਜ਼ਬੂਤ cache ਸੈਟਿੰਗਾਂ ਨਾਲ ਫਾਈਲਾਂ ਪਰੋਸਣਾ। ਇਹ ਪ੍ਰਕਿਰਿਆ ਸਿਰਫ ਇੱਕੱਲੇ ਸਾਰੇ ਪਰਫਾਰਮੈਂਸ ਮੁੱਦੇ ਹੱਲ ਨਹੀਂ ਕਰਦੀ; ਪਰ ਇਹ ਤੇਜ਼, ਭਰੋਸੇਯੋਗ ਅਤੇ ਮਾਪਯੋਗ ਨਤੀਜੇ ਦੇ ਸਕਦੀ ਹੈ।

ਤੁਹਾਡੀ ਹੋਸਟਿੰਗ ਢਾਂਚਾ ਜਿੰਨਾ ਮਜ਼ਬੂਤ ਹੋਵੇਗਾ, ਉਸ ਅਨੁਸਾਰ ਤੁਸੀਂ ਆਪਟੀਮਾਈਜੇਸ਼ਨ ਤੋਂ ਜ਼ਿਆਦਾ ਫਾਇਦਾ ਲੈ ਸਕੋਗੇ। ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਸਾਈਟ ਨੂੰ ਹੋਰ ਤੇਜ਼ ਅਤੇ ਸੁਰੱਖਿਅਤ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ Hostragons ਦੀ ਹੋਸਟਿੰਗ, ਡੋਮੇਨ ਅਤੇ SSL ਹੱਲਾਂ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ; ਅਤੇ ਫੋਂਟ ਆਪਟੀਮਾਈਜੇਸ਼ਨ ਨੂੰ ਆਪਣੇ ਸਮੁੱਚੇ ਪਰਫਾਰਮੈਂਸ ਯੋਜਨਾ ਦਾ ਹਿੱਸਾ ਬਣਾ ਸਕਦੇ ਹੋ। ਬਿਨਾਂ ਕਿਸੇ ਵਿਕਰੀ ਦੇ ਦਬਾਅ ਦੇ, ਪਹਿਲਾਂ ਮਾਪੋ, ਫਿਰ ਸੁਧਾਰ ਕਰੋ ਅਤੇ ਨਤੀਜੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨਾਲ ਸਾਬਤ ਕਰੋ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

ਕੀ ਫੋਂਟਾਂ ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਹੋਸਟ ਕਰਨਾ ਹਮੇਸ਼ਾਂ Google Fonts ਨਾਲੋਂ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ?

ਹਮੇਸ਼ਾਂ ਨਹੀਂ। ਸਹੀ cache, WOFF2, ਘੱਟ ਫਾਇਲਾਂ ਦੀ ਗਿਣਤੀ ਅਤੇ ਚੰਗੀ ਸਰਵਰ ਰਿਸਪਾਂਸ ਹੋਵੇ ਤਾਂ ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਜ਼ਿਆਦਾ ਭਰੋਸੇਮੰਦ ਅਤੇ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ। ਪਰ ਗਲਤ ਤਰੀਕੇ ਨਾਲ ਕਨਫਿਗਰ ਕੀਤੇ ਲੋਕਲ ਫੋਂਟ, optimize ਕੀਤੇ ਬਾਹਰੀ ਫੋਂਟ ਨਾਲੋਂ ਹੌਲੀ ਹੋ ਸਕਦੇ ਹਨ।

Self-host ਫੋਂਟ ਲਈ ਕਿਹੜਾ ਫੋਂਟ ਫਾਰਮੈਟ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ?

ਆਧੁਨਿਕ ਵੈੱਬਸਾਈਟਾਂ ਲਈ ਜ਼ਿਆਦਾਤਰ ਹਾਲਤਾਂ ਵਿੱਚ WOFF2 ਸਭ ਤੋਂ ਵਧੀਆ ਚੋਣ ਹੈ। ਇਹ ਛੋਟੀ ਫਾਇਲ ਸਾਈਜ਼ ਅਤੇ ਵਿਆਪਕ ਬ੍ਰਾਊਜ਼ਰ ਸਪੋਰਟ ਦਿੰਦਾ ਹੈ। TTF ਜਾਂ OTF ਫਾਇਲਾਂ ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਆਮ ਤੌਰ 'ਤੇ ਬਹੁਤ ਵੱਡੀਆਂ ਹੁੰਦੀਆਂ ਹਨ।

ਕਿੰਨੇ ਫੋਂਟ ਵਜ਼ਨ ਵਰਤਣਾ ਆਦਰਸ਼ ਹੈ?

ਜ਼ਿਆਦਾਤਰ ਸਾਈਟਾਂ ਲਈ 400 ਅਤੇ 700 ਵਜ਼ਨ ਕਾਫ਼ੀ ਹੁੰਦੇ ਹਨ। ਕੁਝ ਡਿਜ਼ਾਈਨਾਂ ਵਿੱਚ 500 ਜਾਂ 600 ਵੀ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ; ਪਰ ਹਰ ਨਵਾਂ ਵਜ਼ਨ ਵਧੇਰੇ ਫਾਇਲ ਅਤੇ ਲੋਡ ਸਮੇਂ ਦਾ ਖਰਚ ਲੈ ਕੇ ਆਉਂਦਾ ਹੈ। ਬਿਨਾਂ ਵਰਤੇ ਵਜ਼ਨਾਂ ਨੂੰ ਹਟਾਉਣਾ ਚਾਹੀਦਾ ਹੈ।

font-display: swap ਵਰਤਣਾ ਲਾਜ਼ਮੀ ਹੈ?

ਲਾਜ਼ਮੀ ਨਹੀਂ, ਪਰ ਜ਼ਿਆਦਾਤਰ ਹਾਲਤਾਂ ਵਿੱਚ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਮੈਟਾ ਨੂੰ ਖਾਸ ਫੋਂਟ ਲੋਡ ਹੋਣ ਤੱਕ ਦਿਖਾਉਂਦਾ ਹੈ ਅਤੇ ਗੁਪਤ ਮੈਟਾ ਦੇ ਸਮੱਸਿਆ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ। CLS ਤੋਂ ਬਚਣ ਲਈ ਢੁਕਵਾਂ fallback ਫੋਂਟ ਚੁਣਣਾ ਜਰੂਰੀ ਹੈ।

WordPress ਵਿੱਚ ਲੋਕਲ ਫੋਂਟ ਹੋਸਟ ਕਰਨ ਲਈ ਕੋਈ ਪਲੱਗਇਨ ਚਾਹੀਦਾ ਹੈ?

ਨਹੀਂ, ਇਹ ਜ਼ਰੂਰੀ ਨਹੀਂ। Child theme ਵਿੱਚ ਫੋਂਟ ਫਾਇਲਾਂ ਅਪਲੋਡ ਕਰਕੇ CSS ਨਾਲ ਡਿਫਾਈਨ ਕਰਨਾ ਸਭ ਤੋਂ ਸਾਫ਼ ਸਾਧਨ ਹੈ। ਪਰ ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਤਕਨੀਕੀ ਗਿਆਨ ਘੱਟ ਹੈ ਤਾਂ ਭਰੋਸੇਮੰਦ ਅਤੇ ਅੱਪਡੇਟਡ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਵੀ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।