ਆਪਣੀ ਸਾਈਟ ਨੂੰ CSS ਸਪ੍ਰਾਈਟਸ ਨਾਲ ਵਧਾ ਰਹੇ ਹੋ

ਸਪ੍ਰਾਈਮਾਸਟਰ ਵੈਬ

ਮੈਂ ਇਸ ਸਾਈਟ ਤੇ ਪੇਜ ਦੀ ਗਤੀ ਬਾਰੇ ਥੋੜਾ ਜਿਹਾ ਲਿਖਦਾ ਹਾਂ ਅਤੇ ਇਹ ਵਿਸ਼ਲੇਸ਼ਣ ਅਤੇ ਸੁਧਾਰਾਂ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਹਿੱਸਾ ਹੈ ਜੋ ਅਸੀਂ ਆਪਣੇ ਗ੍ਰਾਹਕਾਂ ਦੀਆਂ ਸਾਈਟਾਂ ਤੇ ਕਰਦੇ ਹਾਂ. ਸ਼ਕਤੀਸ਼ਾਲੀ ਸਰਵਰਾਂ ਤੇ ਜਾਣ ਤੋਂ ਇਲਾਵਾ ਅਤੇ ਅਜਿਹੇ ਸੰਦਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਇਲਾਵਾ ਸਮਗਰੀ ਸਪੁਰਦਗੀ ਨੈਟਵਰਕ, ਇੱਥੇ ਕਈ ਹੋਰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਤਕਨੀਕਾਂ ਹਨ ਜੋ webਸਤਨ ਵੈੱਬ ਵਿਕਾਸਕਰਤਾ ਵਰਤ ਸਕਦੇ ਹਨ.

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

ਸੀਐਸਐਸ ਦਾ ਇੱਕ ਤੱਤ ਜੋ ਅਕਸਰ ਘੱਟ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ CSS ਸਪ੍ਰਾਈਟਸ. ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਤੇ ਜਾਂਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਸ਼ਾਇਦ ਇਹ ਅਹਿਸਾਸ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਉਹ ਪੇਜ ਲਈ ਸਿਰਫ ਇਕ ਬੇਨਤੀ ਨਹੀਂ ਕਰ ਰਹੇ ਹਨ. ਉਹ ਕਈ ਬੇਨਤੀਆਂ ਕਰੋ… ਕਿਸੇ ਵੀ ਸ਼ੈਲੀ ਦੀਆਂ ਸ਼ੀਟਾਂ ਲਈ, ਕਿਸੇ ਵੀ ਜੁੜੇ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਫਾਈਲਾਂ ਲਈ, ਅਤੇ ਫਿਰ ਹਰੇਕ ਚਿੱਤਰ ਲਈ ਇੱਕ ਬੇਨਤੀ. ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਇਕ ਥੀਮ ਹੈ ਜਿਸ ਵਿਚ ਬਾਰਡਰ, ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ, ਬੈਕਗ੍ਰਾਉਂਡ, ਬਟਨ, ਆਦਿ ਲਈ ਚਿੱਤਰਾਂ ਦੀ ਲੜੀ ਹੈ ... ਬ੍ਰਾ browserਜ਼ਰ ਨੂੰ ਹਰ ਇਕ ਲਈ ਬੇਨਤੀ ਕਰਨੀ ਪੈਂਦੀ ਹੈ, ਇਕੋ ਇਕ ਸਮੇਂ ਤੁਹਾਡੇ ਵੈੱਬ ਸਰਵਰ ਤੋਂ. ਗੁਣਾ ਕਰੋ ਕਿ ਹਜ਼ਾਰਾਂ ਵਿਜ਼ਿਟਰਾਂ ਦੁਆਰਾ ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਸਰਵਰ ਨੂੰ ਕੀਤੀਆਂ ਹਜ਼ਾਰਾਂ ਬੇਨਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ!

ਇਹ, ਬਦਲੇ ਵਿੱਚ, ਤੁਹਾਡੀ ਸਾਈਟ ਨੂੰ ਹੌਲੀ ਕਰ ਦਿੰਦਾ ਹੈ. ਏ ਹੌਲੀ ਸਾਈਟ ਦਾ ਰੁਝੇਵਿਆਂ ਅਤੇ ਤਬਦੀਲੀਆਂ 'ਤੇ ਨਾਟਕੀ ਪ੍ਰਭਾਵ ਪੈ ਸਕਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਦਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹਨ. ਇੱਕ ਰਣਨੀਤੀ ਜਿਹੜੀ ਮਹਾਨ ਵੈਬ ਡਿਵੈਲਪਰ ਵਰਤਦੇ ਹਨ ਉਹ ਸਾਰੇ ਚਿੱਤਰਾਂ ਨੂੰ ਇੱਕ ਸਿੰਗਲ ਫਾਈਲ ਵਿੱਚ ਪਾ ਰਹੀ ਹੈ ... ਕਹਿੰਦੇ ਹਨ sprite. ਤੁਹਾਡੇ ਹਰੇਕ ਫਾਈਲ ਚਿੱਤਰਾਂ ਲਈ ਇੱਕ ਬੇਨਤੀ ਕਰਨ ਦੀ ਬਜਾਏ, ਹੁਣ ਸਿਰਫ ਇੱਕਲੇ ਸਪ੍ਰਾਈਟ ਚਿੱਤਰ ਲਈ ਇੱਕ ਸਿੰਗਲ ਬੇਨਤੀ ਦੀ ਲੋੜ ਹੈ!

ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ CSS ਸਪ੍ਰਾਈਟਸ CSS- ਟ੍ਰਿਕਸ ਤੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ or ਸਮੈਸ਼ਿੰਗ ਮੈਗਜ਼ੀਨ ਦੇ CSS ਸਪ੍ਰਾਈਟ ਪੋਸਟ. ਮੇਰਾ ਨੁਕਤਾ ਤੁਹਾਨੂੰ ਇਹ ਨਹੀਂ ਦੱਸਦਾ ਕਿ ਇਨ੍ਹਾਂ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ, ਬੱਸ ਤੁਹਾਨੂੰ ਸਲਾਹ ਦੇਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਵਿਕਾਸ ਟੀਮ ਉਨ੍ਹਾਂ ਨੂੰ ਸਾਈਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੇ. ਉਹ ਉਦਾਹਰਣ ਜੋ CSS ਟ੍ਰਿਕਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਉਹ 10 ਚਿੱਤਰ ਵੇਖਾਉਂਦਾ ਹੈ ਜੋ 10 ਬੇਨਤੀਆਂ ਹਨ ਅਤੇ 20.5Kb ਤੱਕ ਜੋੜਦੀਆਂ ਹਨ. ਜਦੋਂ ਇਕੋ ਸਪ੍ਰਾਈਟ ਵਿਚ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ, ਇਹ ਹੁੰਦਾ ਹੈ 1 ਬੇਨਤੀ ਜੋ ਕਿ 13 ਕੇ.ਬੀ.! ਰਾ imagesਂਡ ਟਰਿੱਪ ਬੇਨਤੀ ਅਤੇ 9 ਪ੍ਰਤੀਬਿੰਬਾਂ ਲਈ ਜਵਾਬ ਦੇ ਸਮੇਂ ਹੁਣ ਚਲੇ ਗਏ ਹਨ ਅਤੇ ਡੇਟਾ ਦੀ ਮਾਤਰਾ 30% ਤੋਂ ਵੱਧ ਘਟ ਗਈ ਹੈ. ਗੁਣਾ ਕਰੋ ਕਿ ਤੁਹਾਡੀ ਸਾਈਟ 'ਤੇ ਵਿਜ਼ਟਰਾਂ ਦੀ ਗਿਣਤੀ ਦੇ ਨਾਲ ਅਤੇ ਤੁਸੀਂ ਸੱਚਮੁੱਚ ਕੁਝ ਸਰੋਤਾਂ ਨੂੰ ਕ shaਵਾਉਣ ਜਾ ਰਹੇ ਹੋ!

ਗਲੋਬਲਨਵThe ਸੇਬ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਇੱਕ ਵਧੀਆ ਉਦਾਹਰਣ ਹੈ. ਹਰ ਬਟਨ ਦੀਆਂ ਕੁਝ ਅਵਸਥਾਵਾਂ ਹੁੰਦੀਆਂ ਹਨ ... ਚਾਹੇ ਤੁਸੀਂ ਪੇਜ 'ਤੇ ਹੋ, ਪੇਜ ਤੋਂ ਬਾਹਰ, ਜਾਂ ਬਟਨ' ਤੇ ਮਾousingਸਿੰਗ. CSS ਬਟਨ ਦੇ ਤਾਲਮੇਲ ਦੀ ਪਰਿਭਾਸ਼ਾ ਦਿੰਦਾ ਹੈ ਅਤੇ ਉਪਭੋਗਤਾ ਬ੍ਰਾ .ਜ਼ਰ ਲਈ ਸਹੀ ਸਥਿਤੀ ਦੇ ਖੇਤਰ ਨੂੰ ਪੇਸ਼ ਕਰਦਾ ਹੈ. ਇਹ ਸਾਰੇ ਰਾਜ ਇਕੋ ਗ੍ਰਾਫਿਕ ਵਿਚ togetherਹਿ-.ੇਰੀ ਹੋ ਗਏ ਹਨ - ਪਰ ਸ਼ੈਲੀ ਸ਼ੀਟ ਵਿਚ ਦਰਸਾਏ ਅਨੁਸਾਰ ਖੇਤਰ ਦੁਆਰਾ ਪ੍ਰਦਰਸ਼ਿਤ ਖੇਤਰ.

ਜੇ ਤੁਹਾਡੇ ਡਿਵੈਲਪਰ ਟੂਲ ਨੂੰ ਪਸੰਦ ਕਰਦੇ ਹਨ, ਤਾਂ ਇੱਥੇ ਇਕ ਟਨ ਹੈ ਜੋ ਉਨ੍ਹਾਂ ਦੀ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ, ਸਮੇਤ ਕੰਪਾਸ CSS ਫਰੇਮਵਰਕ, ਬੇਨਤੀ ਏ.ਐੱਸ.ਪੀ.ਨੇਟ ਲਈ, CSS-Spriter ਰੂਬੀ ਲਈ, CSSSprite ਸਕ੍ਰਿਪਟ ਫੋਟੋਸ਼ਾਪ ਲਈ, ਸਪ੍ਰਾਈਟਪੈਡ, ਸਪ੍ਰਾਈਟਰਾਈਟ, ਸਪ੍ਰਾਈਟਕੋ, ਜ਼ੀਰੋਸਪ੍ਰਾਈਟਸ, ਪ੍ਰੋਜੈਕਟ ਫੋਂਡਯੂ ਦਾ CSS ਸਪ੍ਰਾਈਟ ਜੇਨਰੇਟਰ, ਸਪ੍ਰਾਈਟ ਮਾਸਟਰ ਵੈੱਬਹੈ, ਅਤੇ ਸਪ੍ਰਾਈਟਮੀ ਬੁੱਕਮਾਰਕ.

ਦੀ ਸਕ੍ਰੀਨਸ਼ੌਟ ਸਪ੍ਰਾਈਟ ਮਾਸਟਰ ਵੈੱਬ:
ਸਪ੍ਰਾਈਮਾਸਟਰ ਵੈਬ

Martech Zone ਇਸ ਦੇ ਥੀਮ ਵਿਚ ਬੈਕਗ੍ਰਾਉਂਡ ਕਲਪਨਾ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦਾ, ਇਸ ਲਈ ਸਾਨੂੰ ਇਸ ਸਮੇਂ ਇਸ ਤਕਨੀਕ ਨੂੰ ਲਗਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ.

2 Comments

  1. 1

    ਇੰਤਜ਼ਾਰ ਕਰੋ ... ਕੀ ਸਾਰਾ ਸੰਗ੍ਰਹਿ ਇੱਕ "ਚਿੱਤਰ" (ਜਾਂ ਇੱਕ "ਜਹਾਜ਼") ਨਹੀਂ ਹੈ, ਅਤੇ ਹਰੇਕ ਉਪ-ਚਿੱਤਰ (ਜਾਂ ਐਨੀਮੇਟਡ ਜਾਂ ਇੰਟਰਐਕਟਿਵ ਰੂਪ ਵਿੱਚ ਪਰਿਵਰਤਨਸ਼ੀਲ ਵਿਅਕਤੀਆਂ ਦੇ ਰੂਪ ਵਿੱਚ ਚਿੱਤਰਾਂ ਦਾ ਉਪ ਸਮੂਹ) ਇੱਕ "ਸਪ੍ਰਾਈਟ" ਹੈ?

    ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਪਿਛਲੀ ਵਾਰ ਤੋਂ ਚੀਜ਼ਾਂ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ ਸੀ ਜਦੋਂ ਮੈਂ ਇਸ ਕਿਸਮ ਦੀ ਚੀਜ਼ ਨੂੰ ਸੰਭਾਲਿਆ ਪਰ ਮੈਂ ਸਪਾਈਟਰ ਦੀ ਸਹੁੰ ਖਾਧੀ ਉਹ ਤੱਤ ਸੀ ਜੋ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋ ਰਿਹਾ ਸੀ, ਨਾ ਕਿ ਵੱਡਾ ਡੇਟਾ ਸਾਰਣੀ ਜਿਸ ਤੋਂ ਖਿੱਚਿਆ ਗਿਆ ਸੀ.

    (“ਸਪ੍ਰਾਈਟ ਟੇਬਲ”… ਕੀ ਇਹ ਉਹ ਨਹੀਂ ਸੀ?)

    • 2

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

ਤੁਹਾਨੂੰ ਕੀ ਲੱਗਦਾ ਹੈ?

ਇਹ ਸਾਈਟ ਸਪੈਮ ਨੂੰ ਘੱਟ ਕਰਨ ਲਈ ਅਕਕੀਮੈਟ ਵਰਤਦੀ ਹੈ. ਜਾਣੋ ਕਿ ਤੁਹਾਡੇ ਟਿੱਪਣੀ ਡੇਟਾ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਿਵੇਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ.